React Native Interview Questions & Answers

This set covers 88 React Native interview questions with point-wise answers, written from a working mobile developer's point of view. Each answer is concise and structured the way you should speak in an interview.

React Native Fundamentals

1. What is React Native?

• A framework for building native mobile apps using JavaScript and React.
• It renders real native UI components, not a web view.
• One codebase targets both iOS and Android.
• It is maintained by Meta and a large community.

2. How does React Native differ from a hybrid (web view) app?

• React Native renders actual native widgets, not HTML in a web view.
• This gives near-native performance and look.
• Hybrid apps (e.g. Cordova) wrap a website in a browser shell.
• React Native bridges JavaScript to native APIs directly.

3. What is the difference between React and React Native?

• React is a library for building web UIs with the DOM.
• React Native uses the same component model but renders native views.
• React Native uses View/Text instead of div/span.
• Styling uses a JS subset of CSS via StyleSheet, not real CSS.

4. What is JSX?

• A syntax extension letting you write UI markup inside JavaScript.
• It compiles to React.createElement calls.
• It makes component structure readable.
• Expressions go inside curly braces.

5. What are core components in React Native?

• Built-in building blocks like View, Text, Image, ScrollView.
• They map to native platform views.
• TextInput, FlatList, and Pressable are also core.
• You compose them into custom components.

6. What is the difference between View and ScrollView?

• View is a non-scrolling container for layout.
• ScrollView scrolls its content.
• ScrollView renders all children at once, so it is bad for long lists.
• For long lists use FlatList instead.

7. What is the difference between ScrollView and FlatList?

• ScrollView renders everything immediately.
• FlatList lazily renders only visible items.
• FlatList recycles views and is memory-efficient.
• Use FlatList for large or dynamic data.

8. What is the difference between Text and a string in a View?

• All text must be wrapped in a Text component.
• You cannot place raw strings directly inside a View.
• Text handles styling, nesting, and accessibility.
• Nested Text inherits parent styles.

9. How does styling work in React Native?

• Styles are JavaScript objects via StyleSheet.create.
• It is a subset of CSS using camelCase properties.
• There is no cascade; styles are explicit per component.
• Layout uses Flexbox by default.

10. How does Flexbox work in React Native?

• It is the default layout system for arranging components.
• flexDirection defaults to column, unlike web's row.
• justifyContent and alignItems control axes.
• flex distributes available space proportionally.

11. What are props in React Native?

• Read-only inputs passed from parent to child components.
• They configure how a component renders.
• Changing props triggers a re-render.
• Children should not mutate their props.

12. What is state in React?

• Mutable data owned by a component that affects rendering.
• Updating it re-renders the component.
• Managed with useState in function components.
• Treat state as immutable; replace, do not mutate.

13. What is the difference between props and state?

• Props come from the parent and are read-only.
• State is internal and changeable by the component.
• Props flow down; state stays local.
• Both trigger re-renders when they change.

14. What is the virtual DOM and does React Native use it?

• The virtual DOM is an in-memory tree React diffs to compute updates.
• React Native uses the same reconciliation idea.
• Instead of a real DOM, it updates a native view tree.
• Diffing minimises expensive native UI changes.

15. What is reconciliation?

• The process of diffing the new element tree against the previous one.
• React applies only the minimal set of changes.
• Keys help it match list items efficiently.
• It keeps UI updates fast and predictable.

Components & Hooks

16. What is the difference between function and class components?

• Function components are plain functions using hooks for state and lifecycle.
• Class components use lifecycle methods and this.state.
• Function components are now the standard.
• Hooks replaced most class-based patterns.

17. What is useState?

• A hook that adds local state to a function component.
• It returns the current value and a setter.
• Calling the setter schedules a re-render.
• Updates may be batched and are asynchronous.

18. What is useEffect?

• A hook for running side effects after render.
• Used for data fetching, subscriptions, and timers.
• Its dependency array controls when it re-runs.
• Return a cleanup function to undo effects.

19. What does the dependency array in useEffect control?

• It lists values the effect depends on.
• An empty array runs the effect once on mount.
• Omitting it runs the effect after every render.
• Wrong dependencies cause stale or missing updates.

20. What is the cleanup function in useEffect?

• A function returned from the effect to undo it.
• It runs before the next effect and on unmount.
• Use it to remove listeners, cancel timers, or unsubscribe.
• It prevents leaks and duplicate subscriptions.

21. What is useRef?

• A hook holding a mutable value that persists across renders.
• Changing it does not trigger a re-render.
• It can reference native components for imperative calls.
• Common for timers, previous values, and focus control.

22. What is useMemo?

• It memoises an expensive computed value.
• It recomputes only when dependencies change.
• It avoids redoing costly work each render.
• Overusing it can add complexity without benefit.

23. What is useCallback?

• It memoises a function reference between renders.
• It prevents passing new function instances to children.
• It helps when children are memoised with React.memo.
• Dependencies control when the function is recreated.

24. What is the difference between useMemo and useCallback?

• useMemo memoises a computed value.
• useCallback memoises a function.
• useCallback(fn, deps) equals useMemo(() => fn, deps).
• Both reduce unnecessary work or re-renders.

25. What is React.memo?

• A wrapper that memoises a component's render.
• It skips re-rendering when props are unchanged.
• It uses shallow prop comparison by default.
• Useful for expensive pure components.

26. What is useContext?

• A hook to read a Context value without prop drilling.
• Consumers re-render when the context value changes.
• Good for theme, auth, or locale.
• Avoid putting frequently changing values in one large context.

27. What is useReducer and when do you use it?

• A hook managing state via a reducer and dispatched actions.
• It suits complex state with multiple transitions.
• It centralises update logic for predictability.
• It is an alternative to multiple useState calls.

28. What are the rules of hooks?

• Only call hooks at the top level, not in loops or conditions.
• Only call them from React functions or custom hooks.
• This keeps hook order stable across renders.
• The linter enforces these rules.

29. What is a custom hook?

• A reusable function starting with "use" that composes other hooks.
• It extracts shared stateful logic.
• It keeps components clean and DRY.
• Example: a useFetch hook for API calls.

30. What are keys and why are they important in lists?

• Keys uniquely identify list items for reconciliation.
• They help React track, reorder, and update efficiently.
• Use stable ids, not array indices, for dynamic lists.
• Wrong keys cause incorrect rendering and lost state.

Lists, Navigation & UI

31. How do you optimise a FlatList?

• Provide a stable keyExtractor.
• Use getItemLayout for fixed-height rows.
• Memoise item components and tune windowSize/initialNumToRender.
• Avoid heavy work in renderItem.

32. What is the difference between FlatList and SectionList?

• FlatList renders a single list of items.
• SectionList groups items into titled sections.
• Both virtualise rendering for performance.
• Use SectionList for grouped data like contacts.

33. How do you handle touch and gestures?

• Use Pressable or the Touchable components.
• For complex gestures, use react-native-gesture-handler.
• Combine with Reanimated for smooth interactions.
• Provide visual feedback on press.

34. What is the difference between TouchableOpacity and Pressable?

• TouchableOpacity fades opacity on press.
• Pressable is newer and more flexible.
• Pressable exposes press states for custom styling.
• New code generally prefers Pressable.

35. How does navigation work in React Native?

• React Navigation is the standard library.
• It provides stack, tab, and drawer navigators.
• Screens are registered and navigated by name.
• It manages history and transitions.

36. What are the main navigator types in React Navigation?

• Stack for push/pop screen flows.
• Tab for bottom or top tab bars.
• Drawer for a side menu.
• They can be nested for complex flows.

37. How do you pass parameters between screens?

• Pass a params object in navigation.navigate('Screen', { id }).
• Read them via route.params.
• Return data with navigation callbacks or state.
• Keep params small; fetch heavy data on the screen.

38. How do you handle deep linking?

• Configure a linking config mapping URLs to screens.
• Set platform intent filters / universal links.
• React Navigation routes the incoming URL.
• Test cold and warm starts.

39. How do you handle images in React Native?

• Use the Image component with local or remote sources.
• Specify dimensions for remote images.
• Use caching libraries for performance.
• Provide multiple resolutions for different densities.

40. How do you make a responsive layout?

• Use Flexbox and percentage or flex-based sizing.
• Read screen size from useWindowDimensions.
• Handle safe areas with react-native-safe-area-context.
• Test on multiple device sizes and orientations.

Architecture, Bridge & Native

41. What is the React Native bridge?

• The communication layer between JavaScript and native code.
• It serialises messages asynchronously across threads.
• It is the classic architecture's core mechanism.
• Heavy traffic over it can cause performance bottlenecks.

42. What are the main threads in React Native?

• The JavaScript thread runs your app logic.
• The native/UI (main) thread renders views.
• The shadow thread computes layout (Yoga).
• Blocking any of them causes jank.

43. What is the new architecture (Fabric and TurboModules)?

• Fabric is the new rendering system replacing the bridge UI layer.
• TurboModules lazily load native modules.
• JSI enables direct, synchronous JS-native calls.
• It reduces serialisation overhead and improves performance.

44. What is JSI (JavaScript Interface)?

• A lightweight layer letting JS hold references to native objects.
• It enables synchronous, direct method calls without the bridge.
• It underpins the new architecture.
• It removes the serialisation cost of the old bridge.

45. What is Hermes?

• A JavaScript engine optimised for React Native.
• It improves startup time, memory, and app size.
• It uses bytecode precompilation.
• It is the default engine in recent versions.

46. How do you write a native module?

• Implement native code in Kotlin/Java or Swift/Objective-C.
• Expose methods to JavaScript via the module API.
• Register the module so JS can import it.
• Use TurboModules for the new architecture.

47. When would you write native code instead of JS?

• To access platform APIs not covered by existing libraries.
• For performance-critical work like heavy image processing.
• To integrate native SDKs.
• To reuse existing native code.

48. What is the difference between Expo and bare React Native?

• Expo provides a managed workflow with prebuilt native modules.
• Bare React Native gives full native control.
• Expo speeds setup but historically limited custom native code.
• Expo dev/config plugins now ease many native needs.

49. What are the pros and cons of Expo?

• Pros: fast setup, OTA updates, easy builds, rich SDK.
• Cons: larger app, some native limits, dependency on Expo services.
• Great for many apps and quick prototyping.
• Eject or use prebuild when you outgrow it.

State Management & Data

50. What state management options exist for React Native?

• Local state with hooks for small scope.
• Context for app-wide simple values.
• Redux, Zustand, Jotai, or Recoil for larger apps.
• React Query / TanStack Query for server state.

51. What is Redux and how does it work?

• A predictable state container with a single store.
• Actions describe changes; reducers compute new state.
• Components subscribe via selectors.
• State updates are immutable and traceable.

52. What is Redux Toolkit?

• The official, opinionated way to write Redux.
• It reduces boilerplate with slices and built-in immutability.
• It includes thunks and RTK Query for async.
• It is the recommended modern Redux approach.

53. What is the difference between Redux and Context?

• Context passes values down without prop drilling.
• Redux adds structured updates, middleware, and devtools.
• Context can cause broad re-renders if misused.
• Use Context for simple shared values, Redux for complex state.

54. What is Zustand?

• A small, hook-based state management library.
• It avoids Redux boilerplate and providers.
• Components subscribe to selected slices.
• It is popular for its simplicity.

55. How do you manage server state?

• Use React Query / TanStack Query for fetching and caching.
• It handles loading, errors, and background refetch.
• It deduplicates requests and manages staleness.
• It separates server state from local UI state.

56. How do you make network requests?

• Use the built-in fetch or axios.
• Handle status codes, errors, and timeouts.
• Parse JSON and map to typed models.
• Wrap with React Query for caching.

57. How do you persist data locally?

• AsyncStorage for small key-value data.
• MMKV for fast key-value storage.
• SQLite, WatermelonDB, or Realm for structured data.
• Secure storage for tokens and secrets.

58. What is AsyncStorage?

• An asynchronous, unencrypted key-value store.
• Good for small settings and flags.
• Do not store sensitive data in it.
• For speed, many teams prefer MMKV.

59. How do you store sensitive data securely?

• Use Keychain/Keystore via react-native-keychain or secure storage.
• Never put tokens in AsyncStorage.
• Use HTTPS and avoid hardcoding secrets.
• Consider encryption for local databases.

Performance & Animations

60. How do you improve React Native performance?

• Use FlatList with virtualisation for long lists.
• Memoise components and callbacks to limit re-renders.
• Avoid heavy work on the JS thread.
• Use Hermes and the new architecture.

61. What causes performance problems in React Native?

• Excessive re-renders and unmemoised props.
• Heavy bridge traffic in the old architecture.
• Large images and unoptimised lists.
• Blocking the JS thread with synchronous work.

62. What is the difference between the JS thread and UI thread for animations?

• JS-driven animations can stutter if the JS thread is busy.
• Native-driven animations run on the UI thread independently.
• Use useNativeDriver: true where possible.
• Reanimated runs animation logic on the UI thread.

63. What is the Animated API?

• The built-in library for declarative animations.
• It animates values over time with timing or spring.
• Use useNativeDriver for smoother performance.
• It is suitable for simpler animations.

64. What is React Native Reanimated?

• A high-performance animation library running on the UI thread.
• It uses worklets to avoid bridge latency.
• It supports complex gestures and smooth interactions.
• It is preferred for advanced animations.

65. What is useNativeDriver?

• An option that sends animation work to the native side.
• Animations run on the UI thread, unaffected by JS load.
• It supports transform and opacity, not layout props.
• It produces smoother, jank-free motion.

66. How do you reduce app startup time?

• Enable Hermes for faster JS startup.
• Lazy-load screens and heavy modules.
• Minimise work before the first render.
• Trim bundle size and unused dependencies.

67. How do you debug performance issues?

• Use the in-app performance monitor for FPS.
• Use Flipper or the React DevTools profiler.
• Check the JS and UI thread frame rates.
• Identify re-renders with the profiler.

Debugging, Testing & Tooling

68. How do you debug a React Native app?

• Use the dev menu, console logs, and breakpoints.
• Flipper provides network, layout, and logs.
• React DevTools inspects the component tree.
• Use error overlays and source maps.

69. What is Flipper?

• A desktop debugging platform for mobile apps.
• It shows logs, network, layout, and storage.
• Plugins extend its capabilities.
• It helps diagnose runtime issues.

70. What is the Metro bundler?

• React Native's JavaScript bundler.
• It transforms and serves your JS to the app.
• It supports fast refresh during development.
• It produces the bundle for release builds.

71. What is Fast Refresh?

• It applies code edits instantly while preserving state.
• It speeds up UI iteration.
• It replaced the older live/hot reload.
• Full reloads happen when state cannot be preserved.

72. How do you test React Native apps?

• Unit tests with Jest for logic.
• Component tests with React Native Testing Library.
• End-to-end tests with Detox or Maestro.
• Favour many unit tests and fewer E2E tests.

73. What is React Native Testing Library?

• A library for testing components the way users interact.
• It queries by text, role, and test id.
• It avoids testing implementation details.
• It pairs with Jest.

74. What is Detox?

• A gray-box end-to-end testing framework.
• It runs tests on real devices/simulators.
• It synchronises with the app to reduce flakiness.
• It validates full user flows.

75. How do you handle errors and crashes?

• Use error boundaries for component errors.
• Integrate crash reporting like Sentry or Crashlytics.
• Handle promise rejections and network failures.
• Log context to diagnose production issues.

76. What is an error boundary?

• A component that catches render errors in its subtree.
• It shows a fallback UI instead of crashing.
• It is implemented with class component lifecycle methods.
• It does not catch async or event handler errors.

Platform, Release & Best Practices

77. How do you handle platform-specific code?

• Use Platform.OS to branch logic.
• Use .ios.js/.android.js file extensions.
• Platform.select picks values per platform.
• Keep shared code maximised, branches minimal.

78. How do you handle safe areas and notches?

• Use react-native-safe-area-context.
• Wrap screens in SafeAreaView or use insets.
• Avoid content under status bars and home indicators.
• Test on notched and non-notched devices.

79. How do you do over-the-air (OTA) updates?

• Use CodePush or Expo Updates.
• JS-only changes ship without an app store review.
• Native changes still require a store release.
• It speeds bug fixes and iteration.

80. What are the limitations of OTA updates?

• They cannot change native code or permissions.
• Store policies restrict what can change.
• Users must relaunch to apply updates.
• Version mismatches need careful handling.

81. How do you build a release version?

• Configure signing for iOS and Android.
• Build an AAB/APK or IPA.
• Enable Hermes and minification.
• Test the release build before submitting.

82. How do you manage environment configuration?

• Use react-native-config or Expo env handling.
• Keep dev/staging/prod values separate.
• Do not commit secrets to source control.
• Switch API endpoints per environment.

83. How do you handle push notifications?

• Use Firebase Cloud Messaging or Expo Notifications.
• Request permission and register for a token.
• Handle foreground, background, and tapped states.
• Send the token to your backend.

84. How do you reduce app bundle size?

• Enable Hermes and ProGuard/R8 on Android.
• Remove unused dependencies and assets.
• Use vector icons and optimised images.
• Split or lazy-load heavy modules.

85. How do you handle accessibility?

• Add accessibilityLabel and roles to components.
• Ensure sufficient contrast and touch target size.
• Support screen readers (VoiceOver/TalkBack).
• Test with accessibility tools enabled.

86. How do you handle different screen densities?

• Use density-independent units (points).
• Provide @2x/@3x image assets.
• Use PixelRatio when needed.
• Test across device resolutions.

87. What are common React Native pitfalls?

• Using ScrollView for long lists instead of FlatList.
• Unnecessary re-renders from unstable props.
• Blocking the JS thread with heavy work.
• Ignoring platform differences and safe areas.

88. What are the pros and cons of React Native?

• Pros: shared codebase, web skill reuse, OTA updates, fast iteration.
• Cons: bridge overhead in old architecture, native modules for some features.
• Complex native UI can still need platform code.
• Great for teams with JS/React experience shipping to both platforms.