The Animated API is React Native's built-in animation system. Animated.Value holds a single numeric value while Animated.ValueXY holds two values for 2D transforms. Animated.timing produces duration-based animations with an easing curve, Animated.spring simulates physics-based motion with damping and stiffness, and Animated.decay models friction-based deceleration. The useNativeDriver option runs animations on the UI thread for smoother performance. LayoutAnimation automatically animates the next layout change on all views in the next render cycle, configured via LayoutAnimation.configureNext before triggering a setState that affects layout.
react-native-reanimated and react-native-gesture-handler together provide a more powerful, native-driven animation system. Reanimated worklets are JavaScript functions annotated with the 'worklet' directive that execute on the UI thread instead of the JavaScript thread, enabling 60fps animations and gesture handling without bridge round-trips. The useSharedValue hook returns a reactive object whose .value can be read or written from both threads, while useAnimatedStyle creates styles that depend on shared values. withTiming smoothly animates a shared value over a duration with an easing curve, withSpring handles physics-based motion, and runOnJS schedules a JavaScript function to run on the JS thread from within a worklet, useful for updating React state after a native-driven animation completes.
react-native-gesture-handler recognizes taps, pans, swipes, pinches, and rotation directly on the UI thread using native gesture recognizers. GestureHandlerRootView must wrap the app to initialize the native gesture system. Composable gestures like Pan(), Pinch(), Tap(), and LongPress() are passed to a GestureDetector wrapper. For lists, FlatList offers virtualization that only renders items currently in the viewport, and FlashList from Shopify further improves performance by recycling native views like RecyclerView and UICollectionView. Optimization tips include setting getItemLayout when item heights are known, using stable keyExtractor IDs, configuring initialNumToRender and maxToRenderPerBatch, enabling removeClippedSubviews on Android, and wrapping items in React.memo to skip unnecessary re-renders.