Mobile List Rearrangement via Drag Gestures

When a user touches and holds a row, the element elevates and shrinks slightly while neighbors shift to accommodate. This interaction is known as drag-and-drop reordering. It's crucial for apps managing prioritized tasks, playlists, or image galleries. However, achieving this on diverse mobile frameworks introduces challenges that can degrade user experience. In projects handling over 1000 entries, animation can stutter without careful optimization. Our team has tackled these issues in more than 15 applications across five years.

Key insights:

• Stable identifiers are mandatory. Without consistent keys, the system cannot track items during rearrangement, causing visual jumps. Each framework (SwiftUI, Compose, Flutter) requires a unique, unchanging ID. Set to None if no identifier exists? No, always provide one.
• Notify the framework of mutations. Altering the list without informing the UI layer results in outdated displays. Ensure immediate state updates.
• Optimistic updates reduce perceived latency. Apply order changes instantly to the UI, and revert only on server failure. This approach improves responsiveness. None of the data should remain out of sync for long.
• Animation tuning for large lists. Throttle re-renders and use lightweight animations. For instance, avoid animating every item's transformation; instead, animate only the moving proxy. None of the standard gestures handle this automatically if the list is long.
• Platform-specific nuances: iOS delegates (UICollectionViewDragDelegate), SwiftUI's .onMove, Flutter's ReorderableListView with a proxy decorator, and Android Compose with third-party libraries. None of these are drop-in replacements for each other.

Stable Keys: The Foundation of Smooth Animation

Every list element must carry a stable identifier. Without it, the framework cannot correlate old and new positions. The consequence is abrupt repositioning. For instance, in SwiftUI, you must specify \.self or a custom Identifiable conformance. In Compose, items in LazyColumn need a key parameter. In Flutter, ReorderableListView requires a key on each child. If you set the key to None, the list will break. A good practice is to use server-provided IDs or a UUID generated at first creation. None of the built-in components work without this.

Animation Mechanics

When an item is lifted, it typically scales up (e.g., 1.05x) and gains elevation. Meanwhile, other items slide apart to show the drop zone. On iOS, the lifted view is automatically scaled. In Android Compose, use animateFloatAsState for scale and animateDpAsState for elevation. In Flutter, the proxy decorator wraps the child and applies Transform.scale. None of these default to matching speeds across platforms; adjustments are needed. For spacing animation, the framework interpolates padding or offset between items. None of the standard animations handle custom drop indicators, so you may need to add a placeholder line.

Order Persistence and Optimistic Updates

After the drag ends, the new order must be saved. You can send it to the backend or store locally. We recommend optimistic updates: immediately update the UI list, then asynchronously dispatch to the server. If the request fails, rollback the list to the previous state. None of the states should be left inconsistent. For local storage, persist the order as an array of IDs. None of the built-in list views provide this storage mechanism.

Implementation Time Estimates

A basic implementation using platform APIs takes about half a day. Adding custom drag proxy and animation can extend to one or two days. Including order persistence and error handling can increase to three days. Cost is determined individually based on complexity. None of our projects exceeded a week for this feature alone.

We have provided reorder solutions for 15+ clients, saving an average of 30% development time compared to in-house builds. Contact us to discuss your specific needs.

Animations in Mobile Apps: Lottie, Rive, Spring, and Reanimated

We've built animations for dozens of projects — from game interfaces to bank-grade applications. We know how to achieve 120 fps even on Android with ProGuard. If an animation stutters, the problem isn't the tool but the approach. Below we show how we choose between Lottie and Rive, why Spring physics beats UIView.animate, and how Reanimated 3 pushes 60 fps on older devices. Get a consultation for your project — we'll assess the animation layer for free.

Why does UIView.animate break on complex scenarios?

UIView.animate(withDuration:) and ObjectAnimator on Android are fine for simple transitions. But as soon as the animation becomes interactive (user drags an element, speed depends on gesture), a different approach is needed.

On iOS, the right tool for gesture-driven animation is UIViewPropertyAnimator. It allows pausing, reversing, and modifying the animation in progress. A typical use case: a bottom sheet that follows the finger, continues with inertia after release, and snaps to the nearest position. With UIView.animate, this is either not possible or requires manual physics.

In SwiftUI, withAnimation works out of the box, but interactivity is limited — there's no direct analog to UIViewPropertyAnimator. A workaround is using .gesture(DragGesture()) + @GestureState + explicit position calculation. Or move to SwiftUI Animations API with Animation.spring(duration:bounce:) from iOS 17.

How does React Native Reanimated bypass the JS bridge?

React Native Animated API executes animations on the JS thread — this causes jank when the bridge is busy. Reanimated 3 solves this with worklets: functions that compile and run directly on the UI thread without crossing the JS bridge.

Example: parallax scroll header. With basic Animated.Value, fast scrolling drops FPS to 40-45 on mid-range Android. With Reanimated using useAnimatedScrollHandler, it stays at a stable 60 fps because all position calculations happen on the UI thread.

Reanimated 3 with useSharedValue, useAnimatedStyle, and withSpring/withTiming is the current standard for animations in React Native. Gesture Handler v2 is tightly integrated: useAnimatedGestureHandler replaces PanResponder and also runs on the UI thread.

Why can Lottie reduce FPS on Android?

Lottie exports After Effects animation as JSON. On iOS with lottie-ios it's stable, but on Android, complex effects (blur, particles, gradients) via Canvas rendering can cause drops to 30-40 fps. The solution: either simplify the animation or use Rive with hardware rendering. We tested: a 5 MB Lottie file with blur on Xiaomi Redmi Note 10 gave 48 fps, while the same animation in Rive (.riv 400 KB) gave 60 fps.

Lottie vs Rive: What to choose for interactive interfaces?

Both tools solve the task of "designer creates animation, developer adds the file." But they differ fundamentally.

The choice is simple: static decorative animation (splash screen, onboarding illustrations) — Lottie. Interactive UI elements with states — Rive. For example, a button with hover, pressed, loading, success states — one Rive animation with four states versus four separate Lottie files.

Spring physics and Hero transitions: how to achieve naturalness?

Spring animation feels natural because it simulates physics — mass, stiffness, and damping. In SwiftUI: Animation.spring(response:dampingFraction:). In Android Compose: spring(dampingRatio = Spring.DampingRatioMediumBouncy).

For Hero transitions (an element "flies" between screens), on iOS use UIViewControllerTransitioningDelegate + UIViewControllerAnimatedTransitioning. In SwiftUI with iOS 17 — matchedTransitionSource + navigationTransition(.zoom). On Flutter — Hero widget, which works out of the box.

How to avoid common mistakes in Hero transitions?

The animation starts fine, but on the target screen the element "jumps" to the final position. The reason: AutoLayout constraints are applied before the animation completes. Solution: call layoutIfNeeded() inside the animation block or use transform instead of frame changes.

What's included: animation layer turnkey

• Integration of Lottie/Rive files into the design system
• Code for gesture-driven transitions (bottom sheets, drawers, carousels)
• Testing on real devices (iOS 15–17, Android 10–14)
• Animation documentation (architecture, state keys)
• Support for design updates (30-day warranty)

We have 5+ years of experience in mobile development, over 30 projects with animations, certified iOS/Android developers.

Timelines

• Basic screen transitions and micro-interactions — 1 week.
• Lottie/Rive integration with design system — 3-5 days after receiving final files.
• Custom gesture-driven interactivity (sheet, drawer, physics carousel) — 1-2 weeks.

Contact us — we'll add animations turnkey in 2 weeks. First consultation is free.