React Native technical interviews assess cross-platform mobile development skills, iOS/Android specifics, and performance patterns. This guide covers the 30 most frequently asked questions, with detailed answers and code examples for effective preparation. These questions cover fundamentals through advanced concepts. Mastering React Native architecture and understanding differences from React web are essential for interview success. ## React Native Fundamentals ### 1. What is the difference between React and React Native? React is a library for building web interfaces, while React Native enables native mobile app development for iOS and Android. The fundamental difference lies in rendering: React uses a Virtual DOM that translates to HTML elements, while React Native uses a bridge that communicates with native components on each platform. ```jsx // React (Web) - uses HTML elements function WebComponent() { return (

Web text

) } // React Native - uses native components import { View, Text, TouchableOpacity, StyleSheet } from 'react-native' function NativeComponent() { return ( Native text Press ) } const styles = StyleSheet.create({ container: { flex: 1, padding: 16 } }) ``` React Native components translate to UIView on iOS and android.view on Android, delivering native performance. ### 2. How does React Native's architecture work? React Native uses a three-layer architecture: JavaScript, Bridge (or JSI in the new architecture), and Native. JavaScript code runs in a JS engine (Hermes or JavaScriptCore). Communications with native code pass through JSON serialization in the old architecture, or through JSI (JavaScript Interface) in the new architecture. ```jsx // Old architecture: asynchronous communication via Bridge // The Bridge serializes messages as JSON between JS and Native // New architecture (Fabric + TurboModules) // JSI enables synchronous direct calls to native modules // Example TurboModule usage import { TurboModuleRegistry } from 'react-native' // Synchronous access to native module const DeviceInfo = TurboModuleRegistry.get('DeviceInfo') const deviceName = DeviceInfo.getDeviceName() // Synchronous call // With Fabric, rendering is smoother // Components can be created synchronously // Reducing jank during animations ``` The new architecture significantly improves performance by eliminating JSON serialization and enabling synchronous calls. ### 3. What is the Metro bundler? Metro is the JavaScript bundler used by React Native. It transforms source code into an optimized bundle for mobile execution. Metro handles module resolution, code transformation (via Babel), and hot reloading during development. ```javascript // metro.config.js const { getDefaultConfig } = require('expo/metro-config') const config = getDefaultConfig(__dirname) // Custom configuration config.resolver.assetExts.push('db') // Add extensions config.resolver.sourceExts.push('cjs') // CommonJS support // Transformer configuration config.transformer.babelTransformerPath = require.resolve( 'react-native-svg-transformer' ) // Production optimizations config.transformer.minifierConfig = { keep_classnames: true, keep_fnames: true, mangle: { keep_classnames: true, keep_fnames: true } } module.exports = config ``` Metro supports Fast Refresh, allowing instant changes without losing application state. ### 4. Explain StyleSheet.create and its benefits `StyleSheet.create` optimizes styles by validating them and converting them to numeric references, reducing bridge overhead. ```jsx // ❌ Inline styles - recreated on every render function BadExample() { return ( Title ) } // ✅ StyleSheet.create - optimized and validated const styles = StyleSheet.create({ container: { flex: 1, padding: 16, backgroundColor: '#fff' }, title: { fontSize: 18, fontWeight: 'bold' }, // Style composition row: { flexDirection: 'row', alignItems: 'center', gap: 8 } }) function GoodExample() { return ( Title {/* Style combination */} Content ) } // StyleSheet.absoluteFillObject for absolute positioning const overlayStyles = StyleSheet.create({ overlay: { ...StyleSheet.absoluteFillObject, backgroundColor: 'rgba(0,0,0,0.5)' } }) ``` ### 5. What is the difference between web Flexbox and React Native? React Native uses Flexbox but with different default values from web, adapted for vertical mobile interfaces. ```jsx // Key differences from web const styles = StyleSheet.create({ container: { // flexDirection: 'column' by default (vs 'row' on web) // alignItems: 'stretch' by default flex: 1 }, // React Native Flexbox row: { flexDirection: 'row', // Horizontal justifyContent: 'space-between', // Main axis alignItems: 'center', // Cross axis flexWrap: 'wrap', // Line wrapping gap: 8 // Supported since RN 0.71 }, // Flex grow/shrink flexItem: { flex: 1, // Equivalent to flex: 1 1 0 flexGrow: 1, // Grow to fill flexShrink: 0, // Don't shrink flexBasis: 100 // Base size }, // Absolute positioning absolute: { position: 'absolute', top: 0, left: 0, right: 0, bottom: 0 } }) // Practical example: card with image and content function Card() { return ( Title Description ) } const cardStyles = StyleSheet.create({ container: { flexDirection: 'row', backgroundColor: '#fff', borderRadius: 8, overflow: 'hidden' }, image: { width: 100, height: 100 }, content: { flex: 1, // Takes remaining space padding: 12, justifyContent: 'center' }, title: { fontSize: 16, fontWeight: '600' }, description: { fontSize: 14, color: '#666' } }) ``` ## Navigation and Components ### 6. How do you implement navigation with React Navigation? React Navigation is the standard solution for navigation in React Native. It offers various navigator types suited to mobile patterns. ```jsx // Installing dependencies // npm install @react-navigation/native @react-navigation/native-stack // npm install react-native-screens react-native-safe-area-context import { NavigationContainer } from '@react-navigation/native' import { createNativeStackNavigator } from '@react-navigation/native-stack' import { createBottomTabNavigator } from '@react-navigation/bottom-tabs' // TypeScript typing for navigation params type RootStackParamList = { Home: undefined Profile: { userId: string } Settings: { section?: string } } const Stack = createNativeStackNavigator() const Tab = createBottomTabNavigator() // Tab navigation function TabNavigator() { return ( ({ tabBarIcon: ({ focused, color, size }) => { // Dynamic icon based on tab const iconName = route.name === 'Home' ? 'home' : 'settings' return }, tabBarActiveTintColor: '#007AFF', tabBarInactiveTintColor: 'gray' })} > ) } // Stack navigation function App() { return ( ({ title: `Profile ${route.params.userId}` })} /> ) } ``` ### 7. How do you handle performant lists with FlatList? `FlatList` is optimized for long lists with automatic virtualization, only rendering visible elements. ```jsx import { FlatList, RefreshControl } from 'react-native' function ProductList() { const [products, setProducts] = useState([]) const [refreshing, setRefreshing] = useState(false) const [loading, setLoading] = useState(false) // Initial loading const fetchProducts = async (page = 1) => { const response = await api.getProducts(page) return response.data } // Pull-to-refresh const onRefresh = useCallback(async () => { setRefreshing(true) const data = await fetchProducts(1) setProducts(data) setRefreshing(false) }, []) // Infinite pagination const loadMore = useCallback(async () => { if (loading) return setLoading(true) const nextPage = Math.ceil(products.length / 20) + 1 const data = await fetchProducts(nextPage) setProducts(prev => [...prev, ...data]) setLoading(false) }, [products.length, loading]) // Item rendering const renderItem = useCallback(({ item }) => ( ), []) // Key extraction const keyExtractor = useCallback((item) => item.id.toString(), []) // Item separator const ItemSeparator = useCallback(() => ( ), []) return ( } // Infinite pagination onEndReached={loadMore} onEndReachedThreshold={0.5} ListFooterComponent={loading ? : null} // Empty list ListEmptyComponent={} /> ) } ``` Always memoize `renderItem` with `useCallback` and extract heavy components. Avoid inline functions in `renderItem` that cause unnecessary re-renders. ### 8. What is the difference between TouchableOpacity, Pressable, and TouchableHighlight? These components handle touch interactions with different visual feedback. ```jsx import { TouchableOpacity, TouchableHighlight, Pressable, StyleSheet } from 'react-native' function InteractionExamples() { return ( {/* TouchableOpacity: reduces opacity on touch */} console.log('Pressed')} style={styles.button} > TouchableOpacity {/* TouchableHighlight: adds background color */} console.log('Pressed')} style={styles.button} > TouchableHighlight {/* Pressable: modern API with more control */} console.log('Pressed')} onLongPress={() => console.log('Long press')} delayLongPress={500} style={({ pressed }) => [ styles.button, pressed && styles.buttonPressed ]} > {({ pressed }) => ( {pressed ? 'Pressed!' : 'Pressable'} )} {/* Pressable with hitSlop to enlarge touch area */} console.log('Pressed')} style={styles.smallButton} > Small button ) } const styles = StyleSheet.create({ container: { gap: 16, padding: 20 }, button: { backgroundColor: '#007AFF', padding: 16, borderRadius: 8, alignItems: 'center' }, buttonPressed: { backgroundColor: '#0056b3', transform: [{ scale: 0.98 }] }, textPressed: { color: '#fff' }, smallButton: { padding: 8, backgroundColor: '#eee' } }) ``` `Pressable` is recommended for new projects as it offers more control and a more consistent API. ### 9. How do you create smooth animations? React Native offers several animation APIs: Animated (built-in) and Reanimated (more performant). ```jsx import { Animated, Easing } from 'react-native' import Reanimated, { useSharedValue, useAnimatedStyle, withSpring, withTiming } from 'react-native-reanimated' // Animation with Animated (native API) function FadeInView({ children }) { const fadeAnim = useRef(new Animated.Value(0)).current useEffect(() => { Animated.timing(fadeAnim, { toValue: 1, duration: 500, easing: Easing.ease, useNativeDriver: true // Performant on UI thread }).start() }, []) return ( {children} ) } // Animation with Reanimated (recommended for complex animations) function BouncyButton() { const scale = useSharedValue(1) const animatedStyle = useAnimatedStyle(() => ({ transform: [{ scale: scale.value }] })) const handlePressIn = () => { scale.value = withSpring(0.95, { damping: 10, stiffness: 400 }) } const handlePressOut = () => { scale.value = withSpring(1, { damping: 10, stiffness: 400 }) } return ( Press ) } // List animation with LayoutAnimation import { LayoutAnimation, UIManager, Platform } from 'react-native' // Enable on Android if (Platform.OS === 'android') { UIManager.setLayoutAnimationEnabledExperimental?.(true) } function AnimatedList() { const [items, setItems] = useState([]) const addItem = () => { // Configure animation before state change LayoutAnimation.configureNext(LayoutAnimation.Presets.spring) setItems(prev => [...prev, { id: Date.now() }]) } const removeItem = (id) => { LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut) setItems(prev => prev.filter(item => item.id !== id)) } return (