gitGood.dev
Back to Blog

Top 50 React Native Interview Questions in 2026 (With Answers and Code)

P
Patrick Wilson
10 min read

Top 50 React Native Interview Questions in 2026 (With Answers and Code)

React Native is still the dominant cross-platform mobile framework in 2026. The New Architecture (Fabric, TurboModules, JSI) is now the default, and Expo is the recommended path for new apps. If you're interviewing for mobile or full-stack roles, these are the questions you'll hit.

50 questions, focused on what's actually asked in 2025-2026 interviews. Compact answers, concrete tradeoffs.


Fundamentals (1-10)

1. What is React Native?

A framework for building native iOS and Android apps with React. Unlike hybrid frameworks (Cordova, Capacitor), it renders real native UI components - <View> becomes a UIView on iOS and ViewGroup on Android.

2. React Native vs Flutter?

React Native: JS/TS, real native components, web team productivity, larger talent pool. Flutter: Dart, custom rendered widgets (Skia/Impeller), more consistent visuals across platforms, smaller hiring pool. RN wins on hiring and JS reuse; Flutter on visual consistency and 60fps default.

3. React Native vs Expo?

Expo is a managed platform on top of RN: prebuilt native modules, OTA updates, build service (EAS). Most new apps in 2026 should start with Expo - the "ejection" tax is gone since Expo supports custom native code via config plugins.

4. What is the bridge?

The legacy async messaging layer between JS and native. JS posts serialized messages, native reads them, replies cross back. The bottleneck for performance-sensitive features. The New Architecture replaces it with JSI.

5. What is JSI?

JavaScript Interface - a C++ layer that lets JS hold native object references and call them synchronously, without JSON serialization. Foundation for the New Architecture's TurboModules and Fabric.

6. What is the New Architecture?

Three pieces:

  • JSI replaces the bridge.
  • TurboModules: lazily-loaded native modules with a typed JSI interface.
  • Fabric: the new renderer, with synchronous layout, type-safe view managers, and concurrent rendering support.

Default in React Native 0.76+, mandatory for new modules in 2026.

7. What is Hermes?

The JS engine maintained by Meta, optimized for mobile - faster startup, lower memory, smaller bundle. Default since 0.70. Always use Hermes for production unless a specific dependency forces JSC.

8. What's a "view" in React Native?

A wrapper around a native UIView/ViewGroup. <View> is the building block - layout container, gesture target, accessibility node. Don't reach for HTML mental models; there is no DOM.

9. How does styling work?

JS-side StyleSheet objects (similar to inline CSS) that compile to native layout properties. Flexbox is the layout engine (with mobile defaults: column instead of row, no flex: 0 weirdness). No CSS cascade.

10. What is the app entry point?

index.js calls AppRegistry.registerComponent('MyApp', () => App). Native code (MainActivity.java, AppDelegate.mm) loads the JS bundle and starts the app from that name.


Components and Layout (11-20)

11. <View> vs <ScrollView> vs <FlatList>?

  • <View>: container, fixed content.
  • <ScrollView>: renders all children at once, then scrolls. OK for small/static content.
  • <FlatList>: virtualized - only renders visible items. Use for any list of unknown or large size.

12. Why is <FlatList> performance important?

Rendering a thousand items in a <ScrollView> mounts a thousand components and trashes memory. <FlatList> keeps a window of mounted items and recycles. Always use it for lists.

13. Common <FlatList> perf knobs?

  • keyExtractor: stable keys.
  • getItemLayout: tells RN heights without measuring (huge win).
  • windowSize, initialNumToRender, maxToRenderPerBatch: tune virtualization.
  • removeClippedSubviews={true}: detach offscreen views on Android.
  • Memoize renderItem.

14. <FlatList> vs <FlashList>?

FlashList (Shopify) is a faster drop-in for FlatList - recycles native views instead of unmounting/remounting. Significantly smoother for big lists. New code should default to FlashList.

15. What is SafeAreaView?

Avoids notches, status bars, home indicators. Modern apps use react-native-safe-area-context (more flexible) over the built-in SafeAreaView.

16. How do you handle keyboard avoidance?

<KeyboardAvoidingView> (built-in, decent on iOS, awkward on Android) or react-native-keyboard-controller (modern, consistent, recommended in 2026).

17. How does flexbox differ from web?

flexDirection defaults to column (web defaults to row). No display: block. No CSS grid. flex: 1 is the most common pattern - take available space.

18. Pixel ratios and dimensions?

Dimensions.get('window') for current size. PixelRatio to deal with logical vs physical pixels. RN sizes are in DIPs (density-independent pixels) so width: 100 looks consistent across devices.

19. Responsive layouts?

Use flexbox + percentage widths for the basic case. For breakpoint-style logic, use useWindowDimensions() (handles rotation/foldables) and conditional styles. Libraries: react-native-size-matters, tamagui.

20. What's the equivalent of position: fixed?

There isn't one. Mobile UIs typically use a top-level absolutely-positioned overlay or a separate root in the navigator tree (modal, header).


21. React Navigation vs Expo Router?

React Navigation: imperative, stack/tabs/drawer. Expo Router: file-based routing on top of React Navigation, web/native parity. New Expo apps default to Expo Router.

22. Stack vs Tab vs Drawer?

  • Stack: push/pop screens (the standard "drill down" pattern).
  • Tab: bottom or top tab bar.
  • Drawer: side menu.

Most apps combine them: a tab navigator at the root, each tab containing a stack.

23. How do you pass params between screens?

navigation.navigate('Screen', { id }), read in the destination via route.params. Keep params small and serializable - don't pass entire objects, fetch by id on the destination.

24. Deep linking?

Configure URL prefixes and a screen mapping. With Expo Router, file-based routes generate the linking config automatically. Test with npx uri-scheme open or device link clicks.

25. Local storage options?

  • AsyncStorage (community): simple key/value, async, JSON-serialized.
  • MMKV: way faster, synchronous, smaller. Recommended for 2026.
  • expo-sqlite / op-sqlite: relational data.
  • WatermelonDB, Drizzle, Nozbe DB: full ORMs.

26. Secure storage?

expo-secure-store (Keychain on iOS, EncryptedSharedPreferences on Android). Use for tokens, credentials. Never put secrets in AsyncStorage.

27. State management?

Same as web: Zustand for simple, Jotai for atomic, Redux Toolkit if your team's already there. React Query / TanStack Query for server state. Context for tiny global state.

28. Forms?

react-hook-form works on RN. Pair with zod for validation. Keep heavy state out of inputs - controlled components on RN can be slow if every keystroke re-renders the parent.

29. How do you handle network requests?

fetch is built in. TanStack Query handles caching, retries, optimistic updates. Axios still common in legacy code. For offline-first, consider WatermelonDB sync or a queue.

30. Animations?

react-native-reanimated is the standard - runs animations on the UI thread, not JS. Animated (built-in) is older and slower. For gestures: react-native-gesture-handler. Together they replace touch events for any non-trivial interaction.


Native Modules and Performance (31-40)

31. What's a native module?

Native code (Swift/Kotlin/C++) exposed to JS. With TurboModules: typed via codegen, lazily loaded, JSI-backed. Used when you need APIs RN doesn't expose, performance-critical work, or hardware access.

32. How does codegen work?

You declare a TS spec for the module/component. Codegen produces native interface code (Obj-C++/Java) you implement. Type safety across the JS/native boundary.

33. Can you write native modules in pure C++?

Yes - JSI lets you skip the platform-specific layer. Used for performance-critical libraries that work the same on iOS and Android (RN Reanimated, RNQuickSQLite, MMKV).

34. How do you debug a native crash?

iOS: open .xcarchive and dSYM in Xcode, look at the symbolicated stack. Android: adb logcat, use ProGuard mapping for release builds. Sentry/Crashlytics in production with symbolication uploads.

35. What is the JS thread vs UI thread vs Shadow Thread?

  • JS thread: runs your React code.
  • UI thread: native rendering and event dispatch.
  • Shadow thread: layout (Yoga).

In the New Arch, layout can be synchronous on the JS thread for some interactions. Heavy JS work blocks renders - keep hot paths off the JS thread (Reanimated worklets, native modules).

36. How do you offload work to a separate thread?

Reanimated worklets for animations. react-native-quick-tasks or worker threads via JSI for compute. For I/O, just keep using async/await - the bridge / JSI doesn't block the UI for that.

37. Common perf bottlenecks?

  • Large lists without <FlatList>/<FlashList>.
  • Re-rendering huge trees (no memo, prop instability).
  • JS thread blocking (sync JSON parse on big payloads, heavy reducers).
  • Image loading without caching/sizing (expo-image, react-native-fast-image).
  • Animating Animated instead of Reanimated.

38. Image performance?

Use expo-image (modern, caches, supports blurhash/thumbhash, transitions). Always set explicit width/height to avoid reflow. For long lists of remote images, prefetch and use a CDN with sized variants.

39. How do you measure perf?

  • Flipper (legacy) / React Native DevTools (new).
  • Systrace for JS-thread profiling.
  • react-devtools Profiler for component re-renders.
  • Hermes sampling profiler for prod-like profiles.
  • useProfiler hooks for specific render measurements.

40. App size - how to keep it small?

  • Hermes (smaller bytecode than full JS).
  • Enable Proguard / R8 (Android) and Bitcode/symbolication (iOS).
  • Avoid heavy deps (moment.js, lodash whole-package imports).
  • Image asset variants (1x/2x/3x) with the right resolution.
  • expo-asset lazy loading.
  • Hermes proguard config.

Distribution, OTA, and Modern Features (41-50)

41. How do you ship updates without a store release?

OTA updates with expo-updates or CodePush (LTS only - shut down for new sign-ups). JS/asset bundles can be updated; native code changes require a store release. Apple/Google policy still allows this for non-functional changes.

42. What's EAS Build?

Expo's cloud build service. Handles iOS signing, Android keystores, native dependency compilation. Replaces the Xcode + Android Studio dance for CI/CD.

43. How do you handle environment configs?

Build profiles (eas.json) for dev/staging/prod with different env vars and bundle IDs. expo-constants reads them at runtime. Keep secrets out of JS - they ship to clients.

44. Push notifications?

Expo Notifications is the easiest path - one API for FCM (Android) and APNs (iOS). For finer control or non-Expo apps: @react-native-firebase/messaging + native APN config.

45. Background tasks?

Limited on mobile - the OS suspends apps aggressively. expo-background-fetch for periodic tasks (15+ min intervals, OS-decided). expo-task-manager for headless tasks. iOS background modes are stricter than Android.

46. How do you do analytics?

expo-analytics-amplitude, PostHog, Mixpanel SDKs, or roll your own. Track screen views automatically by hooking into the navigator's state listener.

47. How do you add crash reporting?

Sentry RN SDK is the de-facto choice. Includes JS stack traces, native crashes, breadcrumbs, source maps. Auto-uploads symbols on EAS Build with the Sentry plugin.

48. How do you test?

  • Unit: Jest + React Native Testing Library.
  • E2E: Detox (mature, native), Maestro (newer, YAML-based, gaining ground in 2026).
  • Visual: Storybook for RN, Chromatic.

49. How do you handle accessibility?

accessibilityLabel, accessibilityRole, accessibilityState props on every interactive element. Test with VoiceOver (iOS) and TalkBack (Android). It's table stakes for any app shipped in 2026.

50. When should you NOT use React Native?

  • Apps that need cutting-edge native UI (live photo editing, AR-heavy).
  • Games (use Unity/Unreal/native).
  • Apps with massive native code already - the integration tax is real.
  • Tiny teams who only have one platform - native may be simpler.

But if you want one team and one codebase shipping iOS, Android, and arguably web (RN Web), it's still the most pragmatic choice.


How to Use These

Build something. Spin up an Expo app, ship a simple feature with navigation, persist some state to MMKV, animate something with Reanimated. Interviewers can tell when you've actually battled with the platform - they ask "how do you handle X" because they've hit X.

Know the New Architecture cold. The Fabric/TurboModules/JSI questions separate people who've kept up from people whose RN experience stopped at 0.6x.