Animations, Gestures & Reduced Motion

Treat Animations, Gestures & Reduced Motion as a native UI contract covering Yoga constraints, pixel density, font scaling, safe areas, the keyboard, touch targets, the accessibility tree, and iOS/Android differences—not merely screen styling syntax.

Build a Complete Mental Model

Treat Animations, Gestures & Reduced Motion as a native UI contract covering Yoga constraints, pixel density, font scaling, safe areas, the keyboard, touch targets, the accessibility tree, and iOS/Android differences—not merely screen styling syntax.

Apply It in Production React Native

Test an original Animations, Gestures & Reduced Motion example on Android and iOS with small and large screens, font scaling, dark mode, keyboard and screen reader use, slow/offline networking, denied permissions, and background/foreground transitions. Use DevTools, tests, and a release build where relevant.

After This Lesson

• Explain the shared-code and platform boundary
• Build an example with loading, error, and accessibility states
• Verify one Android/iOS behavior with a test or profiler

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

export function SaveButton() {
  const scale = useRef(new Animated.Value(1)).current;
  const animate = (toValue: number) => Animated.spring(scale, {
    toValue, useNativeDriver: true,
  }).start();
  return <Animated.View style={{ transform: [{ scale }] }}>
    <Pressable onPressIn={() => animate(0.96)} onPressOut={() => animate(1)} accessibilityRole="button">
      <Text>Save</Text>
    </Pressable>
  </Animated.View>;
}

Press feedback runs smoothly without changing layout.

Animations — React Native