Animation details in consumer apps
Why small animations and sensor-driven interactions matter in a consumer app, and the React Native tools I'd use for them.
Consumer apps compete for attention, and most of them look alike. Small animations and interactions driven by the device's sensors are one of the ways an app stands apart.
They matter for three reasons.
- They guide the user and make navigation clearer.
- They make digital elements feel physical.
- They give people a reason to come back.
The best recent example I know is the welcome screen in the Linear app, where a 3D object responds as you tilt the phone. Enzo Manuel Mangano wrote a tutorial for Expo's blog on recreating it in React Native. He uses useAnimatedSensor from Reanimated to read the device's sensors and React Native Skia to draw realistic shadows. The demo repository is public.
The tools
React Three Fiber renders real-time 3D scenes. It's the choice for interactive 3D elements, custom shaders for lighting and reflections, and camera movement.
Skia covers 2D. It gives you GPU-accelerated drawing, spring-based motion, and shaders for blur, transitions and depth. Drive the animation by interpolating shared values, and keep it out of React state. The interface then doesn't re-render on every frame.
Keeping it fast
A graphics-heavy screen is only pleasant while it's smooth.
- Keep the number of draw calls low, to avoid dropped frames.
- Don't re-render elements that are off screen.
- Handle gestures yourself where the default handling feels slow.
How I work on an animation
- Start with a basic prototype.
- Measure its performance impact.
- Refine the timing, then polish the easing curves.
- Document the animation's logic. A large animation is very hard to understand later without it.
A few habits help it stay smooth.
- Run animations on the native driver, so they don't wait on the JavaScript thread.
- Animate transforms, not layout.
- Avoid nested animations.
- Delay work that isn't urgent with
InteractionManager. - Watch the frame rate with the Performance Monitor, and test on low-end devices.
One warning. An animation you spent hours on can become annoying when people see it for the hundredth time. Keep animations minimal, and test them with real users to make sure they help.
React Native isn't limited to standard interfaces. With the right tools, the details can be as good as native ones.