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.
Previous
What is MMKV and how does it compare to AsyncStorage?
Next
What is the React Native testing strategy?