React Native Interview Questions and Answers 2026

React Native enables building truly native iOS and Android applications using React and JavaScript/TypeScript. Candidates report that the new architecture (JSI/Fabric/TurboModules), React Navigation setup, FlatList optimization, native modules, and the distinction between React Native and Expo are the most frequently tested topics in mobile and full-stack developer interviews. This guide covers 45 questions with code examples. Confirm the React Native version and whether the new architecture is enabled at your target company on their official careers portal.

Table of Contents

1. React Native Fundamentals
2. New Architecture
3. Core Components and UI
4. Navigation
5. State Management
6. Performance Optimization
7. Native Modules
8. 5-Question Mock Test
9. Frequently Asked Questions

React Native Fundamentals

Q1. How does React Native work? What is the bridge? Easy

React Native runs JavaScript in a separate thread (the JS thread). In the old architecture, communication between JavaScript and native code happens over the Bridge: a serialized, asynchronous message queue. When React renders JSX, it produces a virtual DOM. React Native's renderer translates this into native view creation calls that are sent over the bridge to the main (UI) thread.

Old architecture limitations:

• All JS-to-native calls are async and serialized to JSON
• No synchronous access to native APIs
• Bridge creates a performance ceiling for high-frequency interactions
• All native modules loaded at startup (slow cold start)

Q2. What is Expo and when should you use bare React Native? Easy

Use bare React Native (or Expo bare) when: you need a native module not available in Expo's ecosystem, you have existing native code to integrate, or your team has strong native iOS/Android expertise.

Q3. What is the difference between React Native StyleSheet and inline styles? Easy

import { StyleSheet, Text, View } from 'react-native'

// StyleSheet.create: processes styles at registration time,
// validates on dev, sends integer ID over bridge instead of full object
const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    padding: 16,
  },
  title: {
    fontSize: 24,
    fontWeight: 'bold',
    color: '#000',
  },
})

// Inline: new object every render - avoid for stable styles
<View style={{ flex: 1, padding: 16 }}>  // creates new object each render

// Preferred
<View style={styles.container}>
  <Text style={styles.title}>Title</Text>

// Dynamic styles: array merging
<View style={[styles.container, isActive && styles.active]} />

Q4. What is the difference between StyleSheet and CSS? Easy

React Native styles are a subset of CSS. Key differences:

RN uses Yoga (a Flexbox implementation) for layout. flexDirection defaults to column (not row as in CSS).

Q5. What are the React Native core components? Easy

New Architecture

Q6. What is JSI (JavaScript Interface) in the new architecture? Medium

JSI is a C++ abstraction that allows JavaScript (via Hermes) to directly hold references to C++ host objects and call methods synchronously, without serialization. This replaces the async JSON bridge.

// Old bridge (async, serialized)
NativeModules.Camera.takePicture({ quality: 0.8 })
  .then(uri => setPhoto(uri)) // async, JSON serialized over bridge

// New architecture with JSI (synchronous where needed)
// The native module is a C++ host object; JS holds a direct reference
const camera = global.nativeCameraModule
const uri = camera.takePicture({ quality: 0.8 }) // can be synchronous

Q7. What is Fabric (the new renderer)? Medium

Fabric is the new React Native rendering system. Changes:

1. C++ shadow tree: layout calculations (via Yoga) happen on the C++ layer, not on the JS thread. This makes layout synchronous and allows layout to run on any thread.
2. Synchronous rendering: UI thread can synchronously call into JavaScript for concurrent React features (Suspense, transitions).
3. Renderer in C++: shared between iOS, Android, and other platforms.
4. React concurrent mode support: works with useTransition, useDeferredValue.

Q8. What are TurboModules? Medium

TurboModules replace the old NativeModules system. Key improvements:

1. Lazy loading: modules load on first access, not at startup (faster cold start)
2. Synchronous access: via JSI, no serialization required
3. Type-safe: CodeGen generates type-safe bindings from TypeScript specs
4. Shared C++ implementation: cross-platform modules can share native logic

// TurboModule spec (TypeScript)
import type { TurboModule } from 'react-native'
import { TurboModuleRegistry } from 'react-native'

export interface Spec extends TurboModule {
  getBatteryLevel(): Promise<number>
  getDeviceName(): string // synchronous
}

export default TurboModuleRegistry.getEnforcing<Spec>('NativeDeviceInfo')

Core Components and UI

Q9. What is the difference between FlatList and SectionList? Easy

// FlatList: uniform list
<FlatList
  data={users}
  keyExtractor={(item) => item.id}
  renderItem={({ item, index }) => <UserRow user={item} />}
  ListHeaderComponent={<Header />}
  ListFooterComponent={<Footer />}
  ListEmptyComponent={<EmptyState />}
  onEndReached={loadMore}
  onEndReachedThreshold={0.3}
  getItemLayout={(data, index) => ({
    length: ITEM_HEIGHT,
    offset: ITEM_HEIGHT * index,
    index,
  })}
  initialNumToRender={10}
  maxToRenderPerBatch={10}
  windowSize={5}
/>

// SectionList: grouped list with section headers
<SectionList
  sections={[
    { title: 'A', data: ['Alice', 'Andrew'] },
    { title: 'B', data: ['Bob', 'Beth'] },
  ]}
  keyExtractor={(item, index) => item + index}
  renderItem={({ item }) => <Text>{item}</Text>}
  renderSectionHeader={({ section: { title } }) => (
    <Text style={styles.header}>{title}</Text>
  )}
  stickySectionHeadersEnabled
/>

Q10. How does the Animated API work? Medium

import { Animated, Easing } from 'react-native'
import { useRef, useEffect } from 'react'

function FadeIn({ children }) {
  const opacity = useRef(new Animated.Value(0)).current
  const translateY = useRef(new Animated.Value(20)).current

  useEffect(() => {
    Animated.parallel([
      Animated.timing(opacity, {
        toValue: 1,
        duration: 400,
        easing: Easing.out(Easing.cubic),
        useNativeDriver: true, // runs on UI thread, not JS
      }),
      Animated.timing(translateY, {
        toValue: 0,
        duration: 400,
        useNativeDriver: true,
      }),
    ]).start()
  }, [])

  return (
    <Animated.View style={{ opacity, transform: [{ translateY }] }}>
      {children}
    </Animated.View>
  )
}

useNativeDriver: true offloads the animation to the native UI thread, preventing JS thread jank. Only works with transform and opacity (not layout properties like width/height).

Q11. What is Reanimated 3 and why is it preferred over the Animated API? Advanced

React Native Reanimated runs animations entirely on the UI thread using worklets (small JS functions that run in a separate JS runtime on the native side).

import Animated, {
  useSharedValue,
  useAnimatedStyle,
  withSpring,
  withTiming,
  interpolate,
  Extrapolation,
} from 'react-native-reanimated'
import { Gesture, GestureDetector } from 'react-native-gesture-handler'

function SwipeableCard() {
  const translateX = useSharedValue(0)

  const gesture = Gesture.Pan()
    .onUpdate((event) => {
      translateX.value = event.translationX // runs on UI thread
    })
    .onEnd(() => {
      translateX.value = withSpring(0) // spring back
    })

  const animatedStyle = useAnimatedStyle(() => ({
    transform: [{ translateX: translateX.value }],
    opacity: interpolate(
      Math.abs(translateX.value),
      [0, 150],
      [1, 0.5],
      Extrapolation.CLAMP
    ),
  }))

  return (
    <GestureDetector gesture={gesture}>
      <Animated.View style={[styles.card, animatedStyle]}>
        <Text>Swipe me</Text>
      </Animated.View>
    </GestureDetector>
  )
}

Reanimated advantages: 60-120fps guaranteed (no JS thread), gesture-driven animations without bridge, interpolations computed on UI thread.

Navigation

Q12. How does React Navigation work? What are the main navigator types? Medium

import { NavigationContainer } from '@react-navigation/native'
import { createNativeStackNavigator } from '@react-navigation/native-stack'
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs'
import { createDrawerNavigator } from '@react-navigation/drawer'

const Stack = createNativeStackNavigator()
const Tab = createBottomTabNavigator()
const Drawer = createDrawerNavigator()

// Nested navigation
function AppNavigator() {
  return (
    <NavigationContainer>
      <Stack.Navigator screenOptions={{ headerShown: false }}>
        <Stack.Screen name="Auth" component={AuthStack} />
        <Stack.Screen name="Main" component={MainTabs} />
      </Stack.Navigator>
    </NavigationContainer>
  )
}

function MainTabs() {
  return (
    <Tab.Navigator>
      <Tab.Screen name="Home" component={HomeScreen} />
      <Tab.Screen name="Profile" component={ProfileScreen} />
    </Tab.Navigator>
  )
}

// Navigation hooks
import { useNavigation, useRoute } from '@react-navigation/native'

const navigation = useNavigation()
navigation.navigate('Profile', { userId: '123' })
navigation.goBack()
navigation.reset({ index: 0, routes: [{ name: 'Home' }] })

const route = useRoute()
const { userId } = route.params

Q13. How do you handle deep linking in React Native? Advanced

const linking = {
  prefixes: ['myapp://', 'https://myapp.com'],
  config: {
    screens: {
      Home: 'home',
      Profile: 'profile/:userId',
      Post: {
        path: 'post/:id',
        parse: { id: (id) => parseInt(id) }
      },
    },
  },
}

<NavigationContainer linking={linking}>
  ...
</NavigationContainer>

For iOS: configure URL scheme in Info.plist and Associated Domains for universal links. For Android: configure intent filters in AndroidManifest.xml. Expo handles much of this via app.json scheme configuration.

State Management

Q14. What are the state management options for React Native? Medium

// Zustand (recommended for most RN apps)
import { create } from 'zustand'
import { persist, createJSONStorage } from 'zustand/middleware'
import AsyncStorage from '@react-native-async-storage/async-storage'

const useStore = create(
  persist(
    (set, get) => ({
      user: null,
      token: null,
      setUser: (user) => set({ user }),
      logout: () => set({ user: null, token: null }),
    }),
    {
      name: 'auth-store',
      storage: createJSONStorage(() => AsyncStorage),
    }
  )
)

// TanStack Query for server state
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query'

const { data, isLoading, error } = useQuery({
  queryKey: ['user', userId],
  queryFn: () => fetchUser(userId),
  staleTime: 5 * 60 * 1000,
})

Performance Optimization

Q15. What are the common React Native performance issues and how do you fix them? Advanced

1. JS Thread overload: heavy computation on JS thread blocks UI updates

   • Fix: move to InteractionManager.runAfterInteractions, worker isolates, or native modules

2. Unoptimized FlatList: renders too many items

   • Fix: getItemLayout (fixed height), keyExtractor, removeClippedSubviews, reduce windowSize

3. Memory leaks: event listeners or subscriptions not cleaned up

   • Fix: cleanup in useEffect return function

4. Excessive re-renders: context causing full tree rerenders

   • Fix: React.memo, useMemo, useCallback, split contexts by domain

5. Large bundle: slow startup

   • Fix: inline requires (Metro inlineRequires), Hermes engine, remove unused native modules

// React.memo: prevent re-render if props unchanged
const UserRow = React.memo(({ user, onPress }) => (
  <Pressable onPress={() => onPress(user.id)}>
    <Text>{user.name}</Text>
  </Pressable>
), (prevProps, nextProps) => prevProps.user.id === nextProps.user.id)

// useCallback: stable reference for callbacks
const handlePress = useCallback((id) => {
  navigation.navigate('User', { id })
}, [navigation])

// Profiling with Flipper / Performance Monitor
// React DevTools Profiler for component render times

Q16. What is Hermes and why does React Native use it? Medium

Hermes is a JavaScript engine optimized for React Native, built by Meta. Benefits over JavaScriptCore (JSC):

• Pre-compiles JavaScript to bytecode at build time (AOT) rather than at runtime (JIT), reducing startup time
• Lower memory usage
• Deterministic garbage collector reducing GC pauses
• Smaller bundle footprint on device
• Default engine since React Native 0.70

// Check if Hermes is running
const isHermes = () => !!global.HermesInternal
console.log('Hermes:', isHermes())

Native Modules

Q17. How do you create a basic native module in React Native? Advanced

// Android: NativeCalendarModule.kt
package com.myapp

import com.facebook.react.bridge.*

class NativeCalendarModule(reactContext: ReactApplicationContext)
  : ReactContextBaseJavaModule(reactContext) {

  override fun getName() = "NativeCalendarModule"

  @ReactMethod
  fun createEvent(title: String, location: String, promise: Promise) {
    try {
      val eventId = createCalendarEvent(title, location)
      promise.resolve(eventId)
    } catch (e: Exception) {
      promise.reject("CREATE_EVENT_ERROR", e.message, e)
    }
  }

  @ReactMethod(isBlockingSynchronousMethod = true)
  fun getDeviceName(): String {
    return android.os.Build.MODEL
  }
}

// JavaScript usage
import { NativeModules } from 'react-native'
const { NativeCalendarModule } = NativeModules

async function createEvent() {
  try {
    const eventId = await NativeCalendarModule.createEvent('Meeting', 'Office')
    console.log('Created event:', eventId)
  } catch (error) {
    console.error(error)
  }
}

Q18. What are Expo Modules (new Expo module API)? Advanced

Expo Modules API provides a modern, type-safe way to write native modules using Swift and Kotlin with automatic TypeScript type generation.

// Kotlin (ExampleModule.kt)
import expo.modules.kotlin.modules.Module
import expo.modules.kotlin.modules.ModuleDefinition

class ExampleModule : Module() {
  override fun definition() = ModuleDefinition {
    Name("Example")

    Function("getValue") { return@Function "Hello from native!" }

    AsyncFunction("setValueAsync") { value: String ->
      // runs on background thread automatically
      persistValue(value)
    }

    Events("onChange")

    View(ExampleView::class) {
      Prop("name") { view: ExampleView, prop: String ->
        view.updateName(prop)
      }
    }
  }
}

5-Question Mock Test

Q1. What is the React Native new architecture? Name and describe the three main components.

Q2. What is the difference between ScrollView and FlatList? When would you use each?

Q3. What is useNativeDriver: true in React Native Animated, and why is it important?

Q4. How do you prevent unnecessary re-renders in a React Native FlatList with complex items?

Q5. What is the difference between Expo managed workflow and bare React Native?

Answers:

A1. JSI (JavaScript Interface) replaces the async bridge with direct C++ references for synchronous native calls. Fabric is the new renderer that builds a C++ shadow tree for synchronous layout. TurboModules lazy-load native modules on demand, reducing startup time.

A2. ScrollView renders all children at once, suitable for small bounded lists. FlatList uses windowing to render only visible items, suitable for large lists. Use ScrollView for forms and short content; use FlatList for lists with many items.

A3. useNativeDriver: true offloads animation calculations to the native UI thread, bypassing the JS bridge/thread entirely. This ensures smooth 60fps animations even when the JS thread is busy. Only works with non-layout properties (opacity, transform).

A4. Wrap item component in React.memo to prevent re-render when props haven't changed. Use useCallback for renderItem and event callbacks. Provide keyExtractor. Use getItemLayout for fixed-height items to skip layout measurement.

A5. Expo managed workflow handles native code build for you via EAS Build; no Xcode/Android Studio needed; limited to Expo-supported native modules. Bare React Native gives full native code access, requires native build tooling, and supports any native module.