React Native Interview Questions

Summary

React Native builds iOS and Android apps with React and JavaScript/TypeScript, rendering real native views rather than HTML in an embedded browser.

Longer Answer

Components such as View, Text and TextInput map to native platform views. Your JavaScript runs on the device (on the Hermes engine) and describes the UI; React Native's renderer creates and updates the native views. Hybrid apps (Cordova/Capacitor-style) instead render web pages in a WebView, so they look and scroll like web pages unless heavily customised.

Key Points

• Real native views, not HTML.
• One React codebase for iOS and Android, with platform-specific code where needed.
• JavaScript runs on the device; native modules expose platform APIs.

Deep dive: Mobile Apps with React Native and Expo: Your First App

Summary

Your React code runs on the JavaScript thread; native views are drawn and touches arrive on the main (UI) thread; layout and native modules can use background threads. A blocked JS thread delays taps and JS-driven updates.

Longer Answer

Smoothness means finishing each frame in about 16 ms (60 fps). Long synchronous work on the JS thread (parsing huge JSON, heavy loops) delays event handlers and state updates, so the UI feels frozen even though native scrolling can continue. Keep heavy work off interaction paths, move animations to the UI thread (Reanimated or the native driver), and defer non-urgent work.

Key Points

• JS thread: React and business logic.
• UI thread: native rendering and input.
• Keep the JS thread free during interactions; run animations on the UI thread.

Deep dive: Mobile Apps with React Native and Expo: How React Native Works

Summary

The replacement for the old asynchronous JSON bridge, default since React Native 0.76: JSI for direct JS-native calls, Fabric for rendering, and TurboModules for lazily loaded, typed native modules.

Longer Answer

• JSI (JavaScript Interface) lets JavaScript hold references to C++/native objects and call them directly, synchronously where needed, without serialising messages to JSON.
• Fabric is the new renderer with a shared C++ core, enabling synchronous layout when needed and React's concurrent features.
• TurboModules are native modules loaded on demand and called through JSI, with interfaces generated from typed specs by Codegen.

Key Points

• Old bridge: async, batched JSON messages.
• JSI: direct calls, no serialisation.
• Fabric: new rendering system.
• TurboModules + Codegen: lazy, type-safe native modules.

Deep dive: Mobile Apps with React Native and Expo: How React Native Works

Summary

Use FlatList (or SectionList) for long or unbounded lists: it virtualises, rendering only items near the screen. ScrollView renders every child at once.

Longer Answer

For speed: stable keyExtractor IDs; memoised row components with stable props; light rows; thumbnails sized for the row; tuning initialNumToRender, windowSize and maxToRenderPerBatch; getItemLayout when rows have a fixed height; and guarding onEndReached so pagination doesn't fire repeatedly. Very large lists can use a recycling list library.

Key Points

• ScrollView renders everything; FlatList virtualises.
• Stable keys, memoised rows, small images.
• Tune window sizes; getItemLayout for fixed heights.

Deep dive: Mobile Apps with React Native and Expo: Lists with FlatList

Summary

AsyncStorage for small, non-sensitive key-value data; SQLite for structured data you query; the file system for files; and secure storage (Keychain/Keystore via expo-secure-store) for tokens and secrets, which must never go in AsyncStorage because it isn't encrypted.

Longer Answer

AsyncStorage stores plain strings and rewrites whole values, so it suits settings and small caches. For hundreds or thousands of records with filtering and sorting, use expo-sqlite. Store large binary data as files and keep only paths in the database.

Key Points

• AsyncStorage: small, non-sensitive.
• SQLite: queryable data.
• SecureStore: tokens and secrets.
• Files for blobs.

Deep dive: Mobile Apps with React Native and Expo: Working Offline

Summary

Read from a local store first, write changes locally and optimistically, queue them in a persisted outbox with client-generated IDs, and sync when connectivity returns; the server deduplicates by those IDs.

Longer Answer

Listen for connectivity (NetInfo) and app start to flush the outbox. Remove an operation only after the server confirms it. Define a conflict policy (last write wins by timestamp, field-level merge, or prompting the user). Show sync status in the UI. Cache server reads (e.g. TanStack Query with persistence) so screens render without the network.

Key Points

• Local-first reads and writes.
• Persisted outbox + idempotent client IDs.
• Remove only after confirmation.
• Explicit conflict policy and visible sync state.

Deep dive: Mobile Apps with React Native and Expo: Working Offline

Summary

Use a short-lived access token and a refresh token, store both in secure storage, attach the access token to API calls, refresh once on 401 (single-flight) and retry, and sign out if the refresh fails.

Longer Answer

Single-flight refresh matters when several requests fail together: without it, parallel refreshes race and, with rotating refresh tokens, invalidate each other. On sign-out, delete tokens, clear cached data and local databases, and unregister push tokens. For social sign-in use the platform SDKs or expo-auth-session with PKCE; never embed client secrets in the app.

Key Points

• Access + refresh tokens in SecureStore.
• Refresh once on 401, then retry.
• Full cleanup on sign-out.
• No secrets in the app bundle.

Deep dive: Mobile Apps with React Native and Expo: Sign-In and Secure Tokens

Summary

Reproduce in a release build, profile to find what re-renders or blocks the JS thread, then fix the cause: memoise rows and stabilise props, move expensive computations out of render, tune lists, right-size images, and move animations to the UI thread.

Longer Answer

Tools: the React DevTools profiler (which components rendered and why), the performance monitor (JS vs UI frame rates), and platform profilers for native issues. Typical culprits: inline functions defeating React.memo, filtering large arrays on every keystroke, full-resolution images in lists, and JSON parsing during interactions.

Key Points

• Measure in release builds first.
• Fix re-renders: memo + useCallback/useMemo.
• Defer heavy work; tune lists and images.

Deep dive: Mobile Apps with React Native and Expo: Performance

Summary

Expo is a framework and set of tools on top of React Native: project setup, a large library of native modules, file-based routing (Expo Router), development builds, and cloud build/submit/update services (EAS).

Longer Answer

It removes most native setup work: you can start with create-expo-app, add native capabilities with npx expo install, configure native projects through config plugins instead of editing Xcode/Gradle files by hand, and build signed binaries in the cloud. Custom native code is still possible with development builds and Expo Modules. The React Native team recommends starting new apps with a framework such as Expo.

Key Points

• Expo libraries for camera, notifications, storage, etc.
• Config plugins instead of manual native edits.
• EAS Build, Submit and Update for shipping.
• Custom native code via development builds.

Deep dive: Mobile Apps with React Native and Expo: Your First App

Summary

React Native uses Flexbox for all layout, but flexDirection defaults to column, there's no cascade or class names, and dimensions are unitless density-independent pixels.

Longer Answer

Styles are JavaScript objects (StyleSheet.create), applied per component; text styles don't inherit except within nested Text. flex: 1 fills available space. There is no CSS grid; percentages, gap, aspectRatio and absolute positioning cover most needs. Safe areas (notches, home indicators) must be handled explicitly, and dark mode via useColorScheme().

Key Points

• Flexbox only, column by default.
• Style objects, no cascade.
• Handle safe areas and dark mode yourself.

Deep dive: Mobile Apps with React Native and Expo: Layout and Styling

Summary

Expo Router is file-based: files in the app/ directory become routes, _layout.tsx files define navigators (Stack, Tabs), (group) folders organise screens without changing URLs, and [param] files are dynamic routes.

Longer Answer

Navigate with <Link href="/contact/42"> or router.push(...); read params with useLocalSearchParams(). Because every screen has a URL, deep links (myapp://contact/42) and web URLs work without extra configuration once a scheme is set. Protected areas are implemented by a layout that redirects to sign-in when there's no session.

Key Points

• Files = routes; _layout = navigator.
• (groups) don't affect URLs; [id] captures params.
• Deep links come for free; params are strings.

Deep dive: Mobile Apps with React Native and Expo: Navigation with Expo Router

Summary

Handle loading, empty, error and success states; use timeouts; retry only network errors, timeouts and 5xx with exponential backoff; cache responses and refetch in the background; and refetch when the app returns to the foreground or reconnects.

Longer Answer

TanStack Query provides caching, retries, deduplication and background refetching; in React Native, connect it to AppState (focus) and NetInfo (online status). Use AbortController to cancel stale requests (e.g. superseded searches).

Key Points

• Four UI states.
• Timeouts + selective retries with backoff.
• Cache + background refresh; AppState and NetInfo wiring.

Deep dive: Mobile Apps with React Native and Expo: Fetching Data

Summary

The app asks for permission, obtains a device push token (an Expo push token or native APNs/FCM token), sends it to your server, and the server sends messages through the push service. Taps are handled by reading the notification's data and navigating.

Longer Answer

Ask for permission in context. Store multiple tokens per user and delete tokens reported invalid. Android needs notification channels. Handle three tap cases: app in foreground, in background, and launched from a killed state (read the last notification response at startup). Only navigate to internal routes from notification data.

Key Points

• Permission → token → server → push service.
• Multiple tokens per user; prune invalid ones.
• Route taps from data, including cold start.

Deep dive: Mobile Apps with React Native and Expo: Push Notifications

Summary

Unit-test pure logic with Jest (jest-expo preset), test components with React Native Testing Library by interacting like a user and asserting on visible output, and cover a few critical flows end to end with Maestro or Detox on real builds.

Longer Answer

Query by role, label and text rather than implementation details. Mock network and native modules at the edges. Keep end-to-end tests few and stable (sign-in, purchase), and run all tests in CI.

Key Points

• Jest for logic.
• RNTL for components, user-centric queries.
• Maestro/Detox for critical flows.

Deep dive: Mobile Apps with React Native and Expo: Testing

Summary

JavaScript and asset changes can ship over the air (e.g. with EAS Update) without store review; changes to native code, native modules, permissions or SDK versions require a new store build.

Longer Answer

OTA updates are matched to a runtime version so that JS expecting new native code never lands on an old binary. Use staged rollouts and the ability to roll back. Store policies allow OTA bug fixes and improvements but not changing an app's primary purpose.

Key Points

• OTA: JS + assets only.
• Native changes need a store build.
• Runtime versions prevent incompatible updates.

Deep dive: Mobile Apps with React Native and Expo: Building and Publishing

Summary

AppState reports active, background and (on iOS) inactive. When leaving active, save state and pause timers, polling and media; when returning to active, refresh stale data and re-check the session and permissions.

Longer Answer

The OS can suspend or kill a backgrounded app without warning, so persist anything important on the way out. iOS inactive occurs for brief interruptions (app switcher, incoming call); don't treat it as signing out. Use transitions (previous → next), not just the current state.

Key Points

• active / background / inactive.
• Save on leave; refresh on return.
• Don't overreact to inactive.

Deep dive: Mobile Apps with React Native and Expo: How React Native Works

Summary

React Native suits most product apps: one team and codebase for both platforms, fast iteration and OTA updates. Native is better when the app is dominated by platform-specific, performance-critical or cutting-edge native features (heavy 3D, advanced camera/audio processing, OS extensions).

Longer Answer

React Native apps can still include native modules where needed, so the choice is often "mostly shared with some native code". Consider team skills, the share of UI that is truly platform-specific, performance needs, and how quickly you need new OS features on day one.

Key Points

• Shared codebase, faster iteration.
• Native for platform-heavy or extreme-performance apps.
• Hybrid approach with native modules is common.

Deep dive: Mobile Apps with React Native and Expo: Your First App