What is the Reanimated layout animation system?

Why Interviewers Ask This

Senior React Native engineers are expected to reason about architecture, performance, and edge cases. This question separates mid-level from senior candidates by testing deep system-level understanding.

Answer

React Native Reanimated v2/v3's Layout Animations allow you to animate components when they mount, unmount, and when their layout changes — with minimal code. No need to manually coordinate animations with state changes. Entering animations: import Animated, { FadeIn, FadeOut, SlideInLeft, BounceIn, ZoomIn } from "react-native-reanimated"; // Component fades in when it mounts: <Animated.View entering={FadeIn.duration(500)}> <Text>I fade in!</Text> </Animated.View> // Bounce in with custom settings: <Animated.View entering={BounceIn.delay(200).springify().damping(15)}>. Exiting animations: <Animated.View exiting={FadeOut.duration(300)}> <Text>I fade out when removed</Text> </Animated.View>. Layout transitions (when position/size changes): // When items reorder, they animate smoothly: <Animated.View layout={LinearTransition}> {/* This view smoothly transitions to its new position */} </Animated.View>. List animation (staggered): function AnimatedList({ items }) { return items.map((item, index) => ( <Animated.View key={item.id} entering={FadeInUp.delay(index * 100).springify()} exiting={FadeOutDown} > <ItemCard item={item} /> </Animated.View> )); }. Custom animations: const MyEntering = new Keyframe({ 0: { opacity: 0, transform: [{ scale: 0 }] }, 100: { opacity: 1, transform: [{ scale: 1 }], easing: Easing.bounce } }); <Animated.View entering={MyEntering}>. All layout animations run on the UI thread — 60fps without blocking JS. Works correctly with FlatList items, conditional rendering, tab changes.

Pro Tip

If you're unsure about a detail, say so honestly and explain your reasoning. Interviewers respect candidates who can think through uncertainty rather than bluffing.