React Native Interview Questions India 2026: Bridge Architecture, Navigation, and Performance

React Native core architecture:

1. What is React Native? React Native is Facebook's framework for building native mobile apps using JavaScript and React. Unlike hybrid apps (Ionic, Cordova), React Native renders actual native UI components (not a WebView). The JavaScript code runs on a JavaScript engine (Hermes, a custom JS engine optimised for React Native) and communicates with native iOS/Android code.

2. The Bridge (legacy architecture): In the old React Native architecture, the JavaScript thread and the native thread communicate over a Bridge. Communication is: asynchronous (no synchronous JS-to-native calls), serialised (all data is JSON-serialised before crossing the bridge), and batched (messages are collected and sent in batches). The Bridge is the main limitation of the old architecture: it introduces latency for frequent interactions (scroll events, gesture handling), and serialisation overhead for large payloads.

3. New Architecture (React Native 0.68+, stable 0.74+): The New Architecture removes the Bridge and replaces it with JSI (JavaScript Interface): allows JavaScript to directly call native functions synchronously without serialisation. Key components of the New Architecture: - JSI: direct JavaScript-to-native binding; no serialisation, no bridge, synchronous calls possible - Fabric: the new synchronous UI rendering layer (replaces UIManager) - TurboModules: lazy-loaded native modules via JSI (old native modules were all loaded at startup) - Codegen: generates type-safe native code from TypeScript type definitions

4. Hermes: Hermes is a custom JavaScript engine developed by Meta, optimised for React Native. Benefits over V8: faster app startup (Hermes pre-compiles JavaScript to bytecode at build time; the app loads bytecode, not source), lower memory usage, smaller APK size. Hermes is the default JavaScript engine for React Native since 0.70.

React Native navigation and state:

1. React Navigation: React Navigation is the standard navigation library for React Native. Key navigators: - Stack Navigator: push/pop screen transitions (like a web browser's back button). useNavigation().navigate('ScreenName') to navigate, goBack() to go back. - Tab Navigator: bottom tab bar (the most common navigation pattern for Indian consumer apps). Each tab has its own navigation stack. - Drawer Navigator: slide-out drawer menu from the side. - Deep linking: configure URL patterns in React Navigation's linking config to navigate to specific screens from push notifications or external links.

2. React Native state management: React Native apps use the same React state management as web React apps. Options: useState/useReducer (local component state), Context API (shared state without Redux), Redux Toolkit (the standard for complex global state; widely used in large React Native apps at Indian companies), Zustand (simpler alternative to Redux; growing in popularity), React Query / TanStack Query (server state management; handles caching, loading, and error states for API calls).

3. Shared business logic with React Native Web: React Native Web (react-native-web) allows React Native components to render in the browser. Some Indian companies (Nykaa, Meesho) share business logic and some UI components between their React Native app and their React web app. The approach: write logic in pure JavaScript/TypeScript; use platform-specific file extensions (.native.tsx, .web.tsx) for UI that must differ.

4. Platform-specific code: Platform.OS: 'ios' or 'android'; use for inline platform checks. .ios.tsx and .android.tsx file extensions: React Native automatically picks the platform-specific file. Platform.select({ ios: value, android: value }): object-based platform selection.

React Native performance:

1. FlatList (virtualised list): FlatList is React Native's virtualised list component (like Android's RecyclerView). It only renders items that are currently visible in the viewport. Key props: data (the array), renderItem (the function that renders each item), keyExtractor (unique key for each item), getItemLayout (optimisation for fixed-height items; avoids measuring each item), initialNumToRender (number of items to render on the first paint), windowSize (number of viewport heights to render above and below the visible area). Performance pitfall: using ScrollView instead of FlatList for long lists (ScrollView renders all items at once; causes memory issues with large lists).

2. React.memo, useMemo, and useCallback: Avoid unnecessary re-renders: React.memo(Component): prevents re-renders if the props have not changed (shallow equality). useMemo: memoises an expensive computation; recalculates only when dependencies change. useCallback: memoises a function reference; prevents child components from re-rendering when the parent re-renders.

3. Animations: Animated API: React Native's built-in animation API. Use Animated.Value to define animated values; Animated.timing, Animated.spring, Animated.decay to animate them. Run animations on the native thread (useNativeDriver: true) to avoid blocking the JavaScript thread during animations (80% of animation performance improvements come from this one setting). Reanimated 2 (react-native-reanimated): the best library for complex animations in React Native; runs animations entirely on the UI thread using Worklets (a subset of JavaScript that runs on the native side via JSI).

4. Image performance: - FastImage (react-native-fast-image): replacement for React Native's built-in Image component; uses Glide (Android) and SDWebImage (iOS) for superior caching and performance. - Resize images on the server: never load a 2000x2000 image to display a 100x100 thumbnail. - Preloading: prefetch images for the next screen before navigation.

React Native advanced topics:

1. NativeModules: NativeModules allow React Native JavaScript code to call native Android (Kotlin/Java) or iOS (Swift/Obj-C) code for functionality not available in JavaScript or existing packages. Create a native module: implement the native code (RCTBridgeModule on iOS, ReactContextBaseJavaModule on Android), export methods using @ReactMethod. Call from JavaScript: NativeModules.MyModule.myMethod(arg, callback). TurboModules (new architecture): NativeModules using JSI; generated via Codegen; synchronous calls available.

2. React Native testing: Jest: the standard JavaScript test runner; used for unit and integration tests. React Native Testing Library (@testing-library/react-native): test component behaviour without testing implementation details; renders components in a virtual environment. Detox: end-to-end testing framework specifically for React Native; runs tests on a real device or simulator; supports both iOS and Android.

3. Release process: CodePush (Microsoft): over-the-air update system for React Native; push JavaScript bundle updates without a new App Store/Play Store release. Limited to JavaScript changes; native code changes still require a full app store release. App Center (Microsoft): crash reporting, analytics, and distribution for React Native apps. Sentry: error monitoring and crash reporting; displays JavaScript stack traces with source maps for easier debugging.

4. React Native vs Expo: Expo is a framework and platform built on top of React Native that provides a managed workflow: Expo Go app (test your app on a device without a native build), Expo SDK (pre-built native modules for cameras, notifications, location, etc.), EAS (Expo Application Services: cloud build service for generating APKs and IPAs without a Mac or Linux build machine). Trade-off: Expo managed workflow is faster to get started but limits access to native modules; bare workflow (or React Native CLI) gives full native access but requires Xcode and Android Studio. Most Indian startups use Expo for prototypes and React Native CLI for production apps that need full native access.