74 React Native interview questions with answers

All React Native interview questions

• How does React Native differ from ReactJS?

  ReactJS is a JavaScript library that renders to the DOM in a browser — output is HTML/CSS. React Native is a framework that reuses the same component model + JSX but renders to native UI components (UIView on iOS, android.view.View/ViewGroup on Android). No DOM, no…

• How is JSX in React Native different from web JSX?

  The JSX syntax is identical — {} for expressions, but className does not exist (RN uses style), and the valid tag set is completely different. Web JSX accepts any HTML element because it compiles to DOM. RN JSX only accepts components exported from react-native or…

• Why must every piece of text in RN sit inside `<Text>`?

  On iOS and Android, a string is not a view. UIView cannot render characters — only UILabel/TextView can. RN forces you to wrap text in <Text so it binds to the correct native component. <ViewHello</View throws "Text strings must be rendered within a <Text component."…

• What was the old RN Bridge? Why has it been replaced with JSI from 2024+?

  The legacy Bridge was an asynchronous message queue between the JS thread and the native thread. Every JS-to-native call (for example updating the UI after state changes) serialized the data to JSON, pushed it across the bridge, and deserialized it on the other side. Properties:…

• What is Hermes and how is it different from JSC?

  Hermes is an open-source JavaScript engine Meta built specifically for React Native, optimized for startup time, memory and app size. JSC (JavaScriptCore) is Safari's engine and used to be RN's default. Key differences: - Ahead-of-time bytecode: at build time Hermes compiles the JS bundle to…

• How does the RN component lifecycle compare with React on the web?

  Same: RN uses the same React core, so hooks (useEffect, useLayoutEffect, useRef...) and class lifecycle methods (componentDidMount, componentWillUnmount) behave identically. Mount/update/unmount cycles match. Different: - No DOM event lifecycle (load, DOMContentLoaded). - useLayoutEffect works as on the web: it runs after layout and before the…

• Are props vs state any different in RN compared with React on the web?

  Conceptually, no — this is React core, RN does not interfere. Props are still parent-down data, immutable from the child's side. State is still local, mutable via setState/useState, triggering re-render on change. The differences are in how you use them in a mobile environment. A…

• How does RN actually render on iOS vs Android?

  JS code is identical across platforms, but the layer below differs: iOS: each <View maps to a UIView (class RCTViewComponentView), <Text is RN's own view (RCTParagraphComponentView) that draws text with TextKit (NSTextStorage) rather than using UILabel, and <Image is displayed through UIImageView. Layout runs through…

• `StyleSheet.create` vs inline style — what differs and when to use each?

  StyleSheet.create({ ... }) at runtime essentially returns the object you pass in (in dev mode it also freezes each style so you cannot mutate it by accident). Its value is elsewhere: TypeScript/your IDE checks each key against the real style props of View/Text/Image (a typo…

• Why does RN use density-independent pixels instead of `px`?

  A number in style: { width: 100 } is not a physical pixel but a DIP (density-independent pixel), equivalent to Android dp or iOS pt. At render time RN multiplies it by PixelRatio.get() to get the number of physical pixels. For example, on an iPhone…

• `Platform.OS` / `Platform.select` — when to use them, when to split into `.ios.tsx` / `.android.tsx` files?

  Inline checks (Platform.OS / Platform.select) are for small differences that fit inside one component, for example shadows: iOS uses the shadow properties, Android uses elevation. Split files (Component.ios.tsx + Component.android.tsx) when: - The JSX structure, behavior or flow differs a lot between the two platforms,…

• Fundamental differences — RN vs Flutter vs native (Swift/Kotlin) for new 2026 projects?

• Differences between `View`, `Text`, `Image`, `ScrollView` — when to use each?

  <View is the base container — equivalent to <div on the web, with no default text rendering. Use it for any layout block (row/column). <Text is required for any string. Supports numberOfLines, ellipsizeMode, font style, and nested <Text for inline formatting. <Image source={{ uri }}…

• `FlatList` vs `SectionList` vs `ScrollView` — when to use each?

  ScrollView renders all children immediately. Use for short UI (forms, profile screens) without a data-driven pattern. With long lists every item is mounted at once, so it is slow and memory-heavy. FlatList is a virtualized list — it only renders visible items plus a windowSize…

• How important is `keyExtractor` in FlatList?

  keyExtractor returns a unique string per item so React's reconciler can tell items apart when data changes (the same as the key prop in a regular React list). Without it, FlatList tries item.key, then item.id, and only then falls back to the index. Using the…

• Built-in `SafeAreaView` vs `react-native-safe-area-context` — why do teams replace the built-in?

  RN core ships <SafeAreaView that only works on iOS (padding around notch/home indicator). On Android it renders as a plain <View with no effect. Since RN 0.81 it is officially deprecated, and the RN docs point to react-native-safe-area-context. It also does not expose the inset…

• `KeyboardAvoidingView` — should you pick `padding` or `height` for `behavior`?

  <KeyboardAvoidingView pushes content up so the keyboard does not cover a TextInput. The behavior prop: - padding (preferred on iOS): adds bottom padding equal to the keyboard height. Children stay put, only the bottom area is pushed up. The motion is smooth and the result…

• Controlled vs uncontrolled `TextInput` — which pattern wins in RN?

  Controlled (standard React, the recommended default): the parent state holds the value, onChangeText updates it. Upsides: validate/format while typing, sync to a global store, reset the form by setting state. Uncontrolled: use defaultValue and cache values to an external ref via onChangeText, not React state.…

• Image caching in RN — when should you reach for `expo-image` / `FastImage`?

  React Native's <Image does cache, but gives you little control. Android uses Fresco (memory cache and disk cache), iOS keeps decoded images in memory and relies on NSURLCache's HTTP cache. The real weaknesses are elsewhere: - No placeholder: an image that has not loaded is…

• `Pressable` vs `TouchableOpacity` / `TouchableHighlight` — what does RN recommend in 2026?

  Pressable (available since RN 0.63): the RN docs call it the "future-proof" way to handle touch and point you to it instead of the Touchable family; one component covers what that whole family does. Children can be a function ({ pressed }) = ReactNode for…

• Built-in `Modal` vs portal-style custom modal — which one to pick?

  Built-in <Modal renders via the native modal API (UIViewController on iOS, Dialog on Android). Pros: handles the Android back button and status bar, and gives a true full-screen overlay above every layer. Cons: limited animations (slide, fade, none), hard to style the header/backdrop, presentationStyle is…

• How does Flexbox in RN differ from CSS on the web?

  RN computes layout with Yoga (Meta's C++ engine). Flexbox works much like the web, but the defaults differ — this is where web developers usually trip: React Native Web CSS --------- flexDirection column row flexShrink 0 1 alignContent flex-start stretch flex accepts a single number…

• react-navigation v7 — when to use Stack vs Tab vs Drawer?

  Stack Navigator: push/pop navigation — a new screen stacks over the previous one. There are two flavours: @react-navigation/native-stack uses UINavigationController (iOS) and Fragment (Android), so animations and gestures are handled by the platform — the default choice; @react-navigation/stack is written in JS, more customisable animations…

• Native stack (`@react-navigation/native-stack`) vs JS stack — performance differences?

  Both navigators share the same API (Stack.Navigator, Stack.Screen) but differ in who runs the transition. JS stack (@react-navigation/stack) builds animations and gestures in JS, using Animated with the native driver. Native stack (@react-navigation/native-stack) wraps react-native-screens and hands the work to the OS navigation components: UINavigationController…

• How do you configure deep linking in RN?

  Deep links let an external URL (web link, push notification) open a specific screen inside the app. Step 1 — declare a URL scheme: - iOS: add CFBundleURLTypes to Info.plist with a custom scheme (myapp://). - Android: add <intent-filter for android.intent.action.VIEW + <data android:scheme="myapp" /…

• `useNavigation` / `useRoute` — how to type them with TypeScript?

  Type safety in React Navigation starts from a param list: a type that maps screen names to their params. With a param list, navigate knows which screens exist and which params each needs. In (1), NativeStackScreenProps<ParamList, 'Detail' tells TypeScript this screen is named Detail, so…

• Passing params between screens — pitfalls?

  navigation.navigate('Detail', { productId: 42 }) passes params through the route, and the target screen reads them from route.params. Common pitfalls: 1. Passing a whole object instead of an id: React Navigation recommends params hold only what identifies the content (id, filter, page), like a URL…

• What is the split-stacks authentication pattern?

• AsyncStorage vs MMKV vs SecureStore — which one to pick?

  @react-native-async-storage/async-storage: persistent key-value, async API (every call returns a Promise). v3 stores data in SQLite on both iOS and Android; v2 used files on iOS and SQLite on Android (with a default ~6 MB cap on Android). Cross-platform, stable, large ecosystem. Downside: because reads are…

• Redux Toolkit vs Zustand vs Jotai in RN 2026 — which one?

  Redux Toolkit (RTK): the most complete option. RTK Query handles fetching and caching server state (it still uses fetch underneath via fetchBaseQuery, so it replaces your hand-written layer around axios, not the HTTP client itself), has the best devtools, and supports time-travel debugging. Fits large…

• TanStack Query in RN — how to configure the persister?

  React Query keeps its cache in memory, so reopening the app loses everything. A persister serializes the cache to storage; on the next launch the cache is restored (hydrated) and the UI shows data immediately without waiting for the network. Setup with MMKV (a common…

• Context API in RN — what is the concrete re-render pitfall?

  Context has no shallow compare: every consumer re-renders when the value object reference changes (React compares with Object.is), even if the field it reads did not change. Common anti-pattern: Problem: a child that only reads theme re-renders when user changes. Fixes: 1. Split contexts: dedicated…

• Why is react-hook-form usually picked for forms in RN?

  Long forms in RN usually hit two problems. One is controlled state held in the parent component: every keystroke re-renders the parent and, with it, every input, so low-end devices can stutter. The other is complex validation (cross-field checks, async checks), which is messy to…

• Networking in RN — fetch vs axios, retry, offline detection?

  fetch: built-in, fine for ~80% of cases. Weaknesses: no default timeout (use AbortController), no retry, JSON parse requires a separate .json() call. axios: nicer API, built-in transformers, interceptors for auth headers and refresh tokens, easy timeout config. Retry / backoff: use axios-retry, or let TanStack…

• How does FlatList stay smooth with 10k items? How to tune `windowSize`/`maxToRenderPerBatch`/`getItemLayout`?

  FlatList virtualizes: it mounts only items inside the "window" (visible area + buffer on each side) and unmounts items outside as you scroll. Memory is roughly constant regardless of total item count. Key knobs: - windowSize (default 21): how many viewport heights of content stay…

• `useCallback` / `useMemo` in RN — when do you really need them?

  Same rules as React on the web: memoization only helps when you need a stable reference for something that compares references (React.memo, dependency arrays, FlatList props). The difference is that on low-end Android devices, wasted renders in a long list turn into scroll jank more…

• Hermes engine — how to enable it and how to measure the improvement?

  Hermes has been the default engine on both Android and iOS since RN 0.70. New projects created with Expo or the React Native CLI ship with Hermes on; usually nothing to do. Enable/disable: - Expo: Hermes is already the default; the "jsEngine" field in app.json…

• `removeClippedSubviews` — how to measure the trade-off?

• `InteractionManager.runAfterInteractions` — what is the use case?

  InteractionManager.runAfterInteractions queues a callback and runs it only once every interaction has finished. An interaction is an active touch or an animation that registered a "handle" with InteractionManager. The classic use case: defer heavy JS-thread work until the screen-transition animation has finished. Why it is…

• Image-related perf bugs — how to handle thumbnails, blur placeholder, and prefetch?

  Image-heavy lists commonly hit: 1. Layout shift from late-loading images: remote images have no intrinsic size, so the row's height changes when they load → the list jumps. Fix: set explicit width/height or aspectRatio. 2. Blank area before load: use a placeholder. With expo-image: A…

• `react-native-screens` `enableScreens(true)` — what does it do?

  react-native-screens gives each navigator screen a native container instead of a plain <View: a UIViewController on iOS and a Fragment on Android. That way the OS knows what a "screen" is and manages it like a native app. enableScreens(true) turns the library on, but the…

• Profiling RN — when to use RN DevTools, Systrace, or Xcode Instruments?

• What is the New Architecture, what does it include, and from which RN version is it default?

  New Architecture is the umbrella for three pieces Meta rewrote in RN since 2020: 1. JSI (JavaScript Interface): a C++ layer that replaces the old Bridge. The JS engine holds direct references to C++/native objects and calls them synchronously, no JSON serialization. 2. TurboModules: the…

• What is JSI, and how is its native call mechanism different from the old Bridge?

• Fabric — how does the new renderer work, and what differs from the old UIManager?

• TurboModules vs old NativeModules — concrete differences?

• Why is Codegen required in the New Architecture?

• What is Bridgeless mode?

• Migrating an old library to the New Architecture — what is the checklist?

• Hermes + New Architecture — why is this the default combo in 2026?

• When should you write a native module instead of using an existing package?

  Rule: always prefer the npm package first. Reason: existing libraries are tested across many devices, have cross-platform CI, and get bugs fixed by the community. Rolling your own means you own the maintenance. When to write a native module: 1. A brand-new platform API with…

• Writing an Android (Kotlin) native module — hello world step-by-step?

• Writing an iOS (Swift) native module — hello world step-by-step?

• TurboModule spec file (`.ts`) → Codegen flow in detail?

• Expo Modules API — how does it differ from TurboModule and when to pick it?

  Expo Modules API is an Expo-maintained way to write native modules in Swift/Kotlin. TurboModule is React Native's official native module system in the New Architecture. Both call native code through JSI (not the bridge) and have comparable performance; the main difference is how you declare…

• Animated API vs Reanimated — which one should you use?

  Animated API (built into RN core): - With useNativeDriver: true, the whole animation is sent to native before it starts and runs on the UI thread, so it stays smooth even when the JS thread is busy. - Limit: the native driver only animates properties…

• `useSharedValue` / `useAnimatedStyle` — how do they run on the UI thread?

• `react-native-gesture-handler` — why does it replace `PanResponder`?

  PanResponder is React Native's built-in gesture API, but all the work happens in JS: every time the finger moves, an event is sent to the JS thread, your code computes, and only then is the view updated. react-native-gesture-handler (RNGH) moves gesture recognition to native: the…

• When is `LayoutAnimation` enough?

  LayoutAnimation is a built-in React Native API: you announce "animate the next layout change", then update state as usual. RN computes the old and new position and size of the views and transitions smoothly between them. On press, the answer appears and the items below…

• RN-Skia — what are the use cases (canvas, charts, blur, glassmorphism)?

• Expo managed vs bare workflow vs vanilla CLI — what to pick in 2026?

  In 2026 the sensible default for a new app is Expo, and "managed vs bare" has changed meaning. Expo no longer has two rigid modes; the real difference is whether the ios/ and android/ folders are generated or edited by hand. - Continuous Native Generation…

• Metro bundler — how is it different from Webpack?

  Metro is React Native's default bundler, written by Meta. It packs the app's JS and assets into bundles for iOS/Android and serves them from a dev server for Fast Refresh. Webpack is a general-purpose web bundler that outputs JS/CSS/HTML and is strong at splitting bundles.…

• EAS Build vs local build — trade-offs?

  EAS Build is Expo's cloud build service: you run eas build, Expo's machines install dependencies, sign the app and hand back an .ipa/.apk/.aab. A local build means running Xcode or Gradle yourself, on your machine or your own CI. Local build EAS Build --------- What…

• OTA updates — Expo Updates / EAS Update / CodePush — which to pick in 2026?

  OTA (Over-The-Air) updates push a new JS bundle without rebuilding/uploading to the App Store/Play Store. By default: the user opens the app → the app checks for and downloads the new bundle in the background → the new bundle is used from the next launch…

• App size optimization — ProGuard/R8, Hermes, ABI splits, asset compression?

• Jest + React Native Testing Library — how to write a component unit test?

  React Native Testing Library (RNTL) renders components inside Jest (running on Node, no emulator) and lets you find elements and interact like a real user: type, press, then check the result. Its principle: the more a test resembles how the app is used, the more…

• Detox vs Maestro — which to pick for E2E?

  Detox (Wix): - E2E framework for RN/iOS/Android, written in JS/TS. - Complex setup: needs a dedicated test build (extra native code on Android), simulator/emulator config. - Strengths: gray-box testing — Detox knows what the app is busy with (network requests, animations, timers, the JS thread)…

• React Native DevTools (RN 0.76+) — how does it replace Flipper?

  Flipper was Meta's old desktop debug tool for RN — console, network inspector, layout inspector, plugin ecosystem (database, AsyncStorage). Flipper was deprecated in RN 0.73 and removed from the template in RN 0.74, because: - It added native dependencies to both the iOS and Android…

• Snapshot testing in RN — when does it help and when does it hurt?

  A snapshot test renders a component, turns the resulting tree into text and saves it in a .snap file. On later runs Jest compares the new tree with the saved file; any difference fails the test. On the first run the .snap file is created…

• Permissions in RN — `react-native-permissions` cross-platform pattern?

  react-native-permissions is the standard cross-platform permissions library. Unified API: Config setup: - iOS: Info.plist adds keys like NSCameraUsageDescription, NSLocationWhenInUseUsageDescription, with a meaningful reason string (App Store rejects missing or generic ones). - Android: AndroidManifest.xml adds <uses-permission. Android 6+ requires runtime requests; the library handles it.…

• Accessibility in RN — `accessibilityLabel`, `accessibilityRole`, screen readers?

  RN exposes accessibility props from iOS VoiceOver and Android TalkBack so screen readers can describe the UI to vision-impaired users. Main props: - accessible={true}: enables accessibility for the component (defaults to false for View, true for Text/Button). - accessibilityLabel: the text the screen reader says.…

• i18n in RN — `react-i18next` / `i18n-js`, RTL support?

  Library options: - react-i18next: strongest, large React ecosystem. Supports namespaces, plurals, interpolation, lazy-loaded translation files. - i18n-js: a standalone library (not part of FormatJS) with a simple i18n.t('key') API, lighter and with fewer features; common in older RN/Expo apps. If you want the FormatJS stack…

• Push notifications — FCM + APNs, Expo Notifications, how to set up?

  Mobile push notifications always go through the OS vendor's service: APNs (Apple Push Notification service) for iOS and FCM (Firebase Cloud Messaging) for Android. The app asks the OS for a push token identifying the device, sends the token to the backend, and the backend…

• Security in RN — Keychain/Keystore, certificate pinning, encrypted storage?