React Native Fundamentals Interview Questions
20 questions with detailed answers
Q1. What is React Native and how does it differ from React?
Answer: React Native builds native mobile apps using React's component model. React targets the DOM in browsers; React Native targets native iOS and Android views via the JavaScript bridge (or New Architecture Fabric).
Q2. Explain the React Native bridge.
Answer: The bridge serializes messages between JavaScript and native threads. JS describes UI updates; native side applies them. New Architecture (Fabric + TurboModules) reduces async bridge overhead with synchronous native calls where safe.
Q3. What is Metro bundler?
Answer: Metro transforms and bundles JavaScript for React Native. It resolves imports, handles JSX/TypeScript, serves Fast Refresh in dev, and produces optimized bundles for production embedded in the app.
Q4. Difference between ScrollView and FlatList?
Answer: ScrollView renders all children at once — fine for small content. FlatList virtualizes — only visible items mount — essential for long lists. FlatList also has built-in separators, headers, and refresh control patterns.
Q5. How does Flexbox work in React Native?
Answer: Flexbox is the default layout. flexDirection defaults to column. Key props: flex, justifyContent, alignItems, alignSelf, flexWrap. No CSS grid — Flexbox handles most mobile layouts.
Q6. Explain useState and useEffect with a real example.
Answer: useState holds changing data (form input, API results). useEffect runs after render — fetch data on mount, subscribe to events, sync with props. Cleanup function in useEffect prevents memory leaks on unmount.
Q7. How do you navigate between screens?
Answer: React Navigation: NavigationContainer wraps app; Stack/Tabs/Drawer navigators define routes. navigation.navigate('Screen', { params }) pushes screens; navigation.goBack() pops. Type params with TypeScript ParamList.
Q8. How do you fetch data from a REST API?
Answer: fetch or axios in useEffect or custom hook. Manage loading, data, error states. Use AbortController for cancellation. Centralize in services/api.ts. Handle token auth in headers.
Q9. What is AsyncStorage and when not to use it?
Answer: AsyncStorage is async persistent key-value store. Good for tokens, settings, small cache. Not for large datasets (use SQLite), not for highly sensitive secrets (use Keychain), not synchronous.
Q10. How do you handle platform differences?
Answer: Platform.OS checks, Platform.select for values, separate .ios.tsx/.android.tsx files, platform-specific native modules. Common: shadows, permissions, back button behavior.
Q11. What are controlled vs uncontrolled TextInputs?
Answer: Controlled: value + onChangeText tied to useState — React owns the value. Uncontrolled: defaultValue only — DOM/native owns it. Controlled is standard for forms with validation.
Q12. How do you optimize FlatList performance?
Answer: Stable keyExtractor, memoized renderItem, React.memo on row component, getItemLayout for fixed heights, removeClippedSubviews on Android, avoid inline arrow functions in renderItem when possible.
Q13. What is Context API and when to use Zustand/Redux instead?
Answer: Context shares state without prop drilling — theme, auth. Re-renders all consumers on change. Zustand/Redux better for frequent updates, middleware, devtools, and large apps with complex state.
Q14. Explain Fast Refresh.
Answer: Fast Refresh updates modules on save while preserving React state when possible. If you edit a component export, state may reset. Faster than full reload — core to RN dev experience.
Q15. How do you debug network issues on Android emulator?
Answer: Use 10.0.2.2 instead of localhost for host machine. Check cleartext traffic if HTTP (usesCleartextTraffic in AndroidManifest). Use Flipper or Reactotron to inspect requests.
Q16. What is Hermes?
Answer: Hermes is Meta's JavaScript engine optimized for React Native — faster startup, lower memory than JSC on Android. Enabled by default in modern RN templates. Bytecode precompilation in release builds.
Q17. How do you structure a medium-sized RN app?
Answer: src/screens, components, navigation, hooks, services, context, types, utils. Screens compose components; services handle API; hooks encapsulate data fetching; navigation in separate files per flow.
Q18. Expo vs bare React Native — tradeoffs?
Answer: Expo: faster setup, managed workflow, OTA updates, limited custom native until prebuild. Bare RN: full native control, any native module, more setup. Expo can eject/prebuild to bare when needed.
Q19. How do you handle authentication flow in navigation?
Answer: AuthContext holds user + token. Root navigator conditionally renders AuthStack vs MainTabs based on user state. On app launch, read token from AsyncStorage, validate, restore session before showing UI.
Q20. What are common causes of white screen on launch?
Answer: Silent JS error — check Metro logs. Wrong entry file registration. Missing native dependency link. Bundle not loading — reset cache. Native crash before JS loads — check Xcode/Android logcat.