React Native animations stutter: use the native driver for opacity

A fade pauses while JavaScript processes a large response. If you drive that fade with JavaScript, busy work can delay its next frame. For an Animated opacity transition, try useNativeDriver: true: React Native sends the configuration to native so the started animation can continue on the UI thread. The animation guide explains the driver.

Move the fade to the native driver

This component uses Animated.timing to fade its children in and stops its animation on cleanup. Supply reduceMotion from your app's accessibility preference; it defaults to a static view until you provide that preference.

import { useEffect, useRef } from 'react';
import { Animated } from 'react-native';

export default function FadeIn({ children, reduceMotion = true }) {
  const opacity = useRef(new Animated.Value(reduceMotion ? 1 : 0)).current;

  useEffect(() => {
    if (reduceMotion) {
      opacity.setValue(1);
      return;
    }

    opacity.setValue(0);
    const animation = Animated.timing(opacity, {
      toValue: 1,
      duration: 250,
      useNativeDriver: true,
      isInteraction: false,
    });
    animation.start();

    return () => animation.stop();
  }, [opacity, reduceMotion]);

  return <Animated.View style={{ opacity }}>{children}</Animated.View>;
}

Mount it with reduceMotion={false} to inspect the fade, then with true to verify immediate visibility. The decorative fade uses isInteraction: false so it does not hold an interaction handle that can delay list rendering.

Check the property before flipping the flag

Opacity and transforms support the native driver. Layout properties such as height and Flexbox sizing do not; swapping the flag on a height animation will not make it work. Every animation sharing this Animated.Value must use the same driver.

Compare the same screen and interaction on the same device in a release build. React Native's performance guide explains why development mode changes performance. If the animation still stutters, investigate UI-thread work and view complexity. This flag also leaves your expensive JavaScript processing in place; a blocked handler can still delay the start of an animation.

Documentation checked October 4, 2026. This uses React Native's built-in Animated API. No device benchmark or native execution is claimed.