Skip to content

React Native Developer Interview Questions & Answers

40 questions for React Native Developer interviews — 5 easy, 29 medium, 6 hard.

About the React Native Developer role

A React Native developer builds mobile apps with React and TypeScript, often sharing logic with a web team. They work with React Navigation or Expo Router, Redux Toolkit or Zustand, TanStack Query, Reanimated and native modules, and manage builds with Expo and EAS. Companies with existing React web products frequently hire React Native developers to extend their apps to mobile quickly and consistently.

React and TypeScript React Navigation State management Expo and EAS Native module basics
Solved for this roleStart practicing
3 QUESTIONS FREESign up to unlock the full question bank and track your progress.Unlock every question and answer, then continue practising company-wise and package-wise.
3 questions free Unlock the rest in seconds
01

A global Redux store causes the whole app to re-render on every small change. How do you fix it?

Save to ▾
Show answer
Components are probably selecting large parts of state or creating new objects in selectors. Select only the fields each component needs with useSelector, memoise derived data with createSelector, and keep state normalised. Move server data to RTK Query or TanStack Query and local UI state back into components. Verify improvements with the React profiler, checking which components render after each action.
02

What is the difference between REST and GraphQL for mobile clients?

Save to ▾
Show answer
REST exposes resources at fixed endpoints, which can lead to over-fetching or many round trips for one screen. GraphQL exposes one endpoint where the client asks exactly for the fields it needs, reducing payload size and requests, which helps on slow mobile networks. GraphQL adds complexity in caching, error handling and server performance. Clients like Apollo or graphql_flutter provide normalised caching and code generation.
03

A React Native list of 2000 items scrolls slowly and shows blank areas. How do you fix it?

Save to ▾
Show answer
Use FlatList or FlashList rather than ScrollView with map. Provide a stable keyExtractor, memoise row components with React.memo, avoid inline functions and heavy computation in renderItem, and use getItemLayout or fixed item sizes where possible. Tune windowSize and maxToRenderPerBatch, compress and cache images with a library like expo-image, and test a release build, since dev mode is much slower.
04

A user reports that they cannot find your app in the store on their old phone. Why could this happen?

Save to ▾
Show answer
The app may not be available for their device because the minimum OS version is higher than theirs, the device lacks a required hardware feature declared in the manifest, the app is not released in their country, or the device architecture is excluded. Check the device catalogue in Play Console and the deployment target on iOS. Decide whether supporting that segment is worth lowering requirements.
05

How do you handle error boundaries in a React Native app?

Save to ▾
Show answer
An error boundary is a class component, or a library like react-error-boundary, that catches rendering errors in its child tree and shows a fallback UI instead of crashing the whole app. Place one at the app root and around risky screens. They do not catch errors in event handlers or async code, so use try-catch there. Report caught errors to a crash reporting tool with context for debugging.
06

The Firestore bill is growing fast because of too many reads. How do you reduce it?

Save to ▾
Show answer
Find screens that listen to large collections or re-read data on every rebuild. Paginate queries with limits, listen only to needed documents, detach listeners when screens close, and avoid starting listeners inside build methods. Denormalise data to reduce reads per screen, cache data locally with offline persistence, and use aggregate count queries instead of reading all documents to count. Monitor usage per collection.
07

Write a custom hook that fetches data with loading and error states.

Save to ▾
Show answer
function useFetch(url) { const [state, setState] = useState({ data: null, loading: true, error: null }); useEffect(() => { const controller = new AbortController(); fetch(url, { signal: controller.signal }) .then((r) => { if (!r.ok) throw new Error('HTTP ' + r.status); return r.json(); }) .then((data) => setState({ data, loading: false, error: null })) .catch((e) => { if (e.name !== 'AbortError') setState({ data: null, loading: false, error: e.message }); }); return () => controller.abort(); }, [url]); return state; }
08

Write a Dart HTTP client using dio with an interceptor that adds an auth token.

Save to ▾
Show answer
final dio = Dio(BaseOptions( baseUrl: 'https://api.example.com', connectTimeout: const Duration(seconds: 10), receiveTimeout: const Duration(seconds: 15), )); dio.interceptors.add(InterceptorsWrapper( onRequest: (options, handler) async { final token = await secureStorage.read(key: 'access_token'); if (token != null) options.headers['Authorization'] = 'Bearer $token'; handler.next(options); }, onError: (e, handler) { if (e.response?.statusCode == 401) authNotifier.logout(); handler.next(e); }, ));
09

Describe a time you had to deliver a feature with incomplete requirements.

Save to ▾
Show answer
Situation: product asked for a referral feature with only a one-line description. Task: deliver in a sprint. Action: I listed open questions, met the product manager for 20 minutes to agree on core rules, built the agreed version with configurable reward values from the backend, and documented assumptions in the ticket. Result: we shipped on time, and later changes needed only config updates instead of a new release.
10

Explain the Bloc pattern and Cubit.

Save to ▾
Show answer
In Bloc, the UI adds events, the Bloc handles them with on<Event> handlers and emits new immutable states, and widgets rebuild with BlocBuilder or react with BlocListener. A Cubit is a simpler version where the UI calls methods directly and the Cubit emits states, without event classes. Use Cubit for straightforward logic and full Bloc when you need event transformations like debounce or detailed traceability.
11
Save to ▾
Show answer
Expo Router is a file-based router built on React Navigation. Files in the app directory become routes, so app/product/[id].tsx maps to /product/42. Layout files define stacks and tabs, and every screen is deep-linkable automatically on mobile and web. It supports typed routes, protected routes for auth, and API routes. It reduces navigation boilerplate and makes URL-based linking consistent across platforms.
12

Push notifications arrive on Android but not on iOS. How do you debug it?

Save to ▾
Show answer
Check that the push notifications capability and background modes are enabled in Xcode, that an APNs authentication key is uploaded to the push provider, and that notification permission was granted. Verify the app gets an APNs token and the provider token, and that the right environment, development or production, is used. Test on a real device, since simulators have limited push support, and check payload format.
13

The API responses are slow on mobile networks. What can the mobile team ask the backend team to change?

Save to ▾
Show answer
Ask for pagination with sensible page sizes, gzip or brotli compression, removing unused fields or providing screen-specific endpoints, and aggregated endpoints to avoid multiple sequential calls. Request proper cache headers and ETags so the client can reuse responses. Ask for resized images through a CDN and HTTP/2 or HTTP/3 support. Share measured timings from real devices to justify the requests.
14

Why use TanStack Query for server state in mobile apps?

Save to ▾
Show answer
Server state, such as data fetched from APIs, has caching, refetching, staleness and retry concerns that client state libraries do not handle well. TanStack Query caches responses by query keys, deduplicates requests, refetches on focus or reconnect, supports pagination and infinite queries, optimistic updates and offline persistence. It removes large amounts of useEffect and loading-state code and keeps screens consistent.
15

How do you write a Fabric native component or use one in React Native?

Save to ▾
Show answer
A Fabric component wraps a native view for use in JavaScript. You write a TypeScript spec using codegenNativeComponent with typed props, run Codegen to generate C++ and platform interfaces, and implement the view in Kotlin and Objective-C or Swift. With Expo, the Expo Modules API lets you define a native view in Kotlin and Swift with less boilerplate. Use this for maps, video players or custom SDK views.
16

How do you design an offline-first mobile app?

Save to ▾
Show answer
Store data in a local database and render the UI from it, so the app works without network. Queue user changes locally with a pending status and sync them in the background when connectivity returns, using retries with backoff. Fetch server changes using timestamps or sync tokens and merge them. Resolve conflicts with clear rules like last write wins or server authority, and show sync status to users.
17

How would you migrate a large React Native app from JavaScript to TypeScript?

Save to ▾
Show answer
Enable TypeScript with allowJs so both coexist, start with a relaxed tsconfig, and convert shared code first: API types, models, utilities and navigation param lists. Then convert screens feature by feature, tightening strict options gradually. Add type checks to CI so new files must be TypeScript. Avoid using any to silence errors; use unknown and narrow. Track progress and celebrate milestones to keep momentum.
18

How do you handle pressure when a production issue affects many users?

Save to ▾
Show answer
I stay calm and focus on reducing impact first: confirm the issue, communicate status to the team, and look for the fastest safe mitigation such as a remote config switch, server-side fix or pausing a rollout. Then I find the root cause, ship a proper fix and write a short postmortem. Clear, regular updates to stakeholders reduce panic and let others plan around the issue.
19

How does token-based authentication work in mobile apps?

Save to ▾
Show answer
The user signs in and the server returns a short-lived access token, often a JWT, and a longer-lived refresh token. The app stores them securely in Keychain or Keystore-backed storage and sends the access token in the Authorization header. When it expires, the app uses the refresh token to get a new one, retrying the failed request. On logout, tokens are deleted and ideally revoked on the server.
20

Compare Provider, Riverpod and Bloc.

Save to ▾
Show answer
Provider is simple and built on InheritedWidget but depends on BuildContext and can throw provider-not-found errors at runtime. Riverpod, from the same author, is compile-safe, independent of the widget tree, supports async providers and easy overrides for testing. Bloc uses events and states with streams, enforcing strict separation and traceability, popular in large teams and enterprises. Choose based on team familiarity and app complexity.
21

Tell me about a time you had to learn a new framework under a deadline.

Save to ▾
Show answer
Situation: my team decided to build a client app in Flutter, and I had only React Native experience. Task: deliver the login and dashboard screens in three weeks. Action: I completed the official codelabs in the first week, mapped concepts I knew like components and hooks to widgets and state, and asked for early code reviews. Result: the screens shipped on time, and I later wrote a short guide for other React Native developers moving to Flutter.
22

What are optimistic updates and how do you implement them?

Save to ▾
Show answer
An optimistic update changes the UI immediately as if the server request succeeded, such as liking a post, then rolls back if the request fails. It makes apps feel fast on slow networks. With TanStack Query, use onMutate to update the cache and save the previous value, onError to restore it, and onSettled to refetch. Use it for low-risk actions, not payments.
23

The JS bundle grew large and startup is slow. How do you reduce startup time in React Native?

Save to ▾
Show answer
Measure time to interactive on a release build first. Make sure Hermes is enabled, remove unused dependencies and heavy libraries like full date or icon packs, and lazy-load screens and modules with inline requires. Defer non-critical SDK initialisation until after the first screen. Keep the initial screen light, avoid large synchronous storage reads at startup, and use the New Architecture for faster native module loading.
24

What local storage options exist for Flutter and React Native apps?

Save to ▾
Show answer
For simple key-value settings, Flutter uses shared_preferences and React Native uses AsyncStorage or MMKV. For sensitive data, flutter_secure_storage or expo-secure-store use Keychain and Keystore. For structured data and queries, use SQLite via sqflite or drift in Flutter and expo-sqlite or WatermelonDB in React Native. Object stores like Isar, Hive or Realm also exist, but check maintenance status before choosing.
25

How do you handle gestures such as swipe to delete in React Native?

Save to ▾
Show answer
Use react-native-gesture-handler, which processes gestures on the native side, often with Reanimated for smooth animations. For swipe to delete, the Swipeable or ReanimatedSwipeable component renders action buttons behind a row. Define gestures with the Gesture API, such as Gesture.Pan, and compose them when needed. Wrap the app root in GestureHandlerRootView. Provide an accessible alternative like a long-press menu for screen reader users.
26

What is Firebase and which services do mobile apps commonly use?

Save to ▾
Show answer
Firebase is a mobile and web development platform. Commonly used services are Authentication for email, phone OTP and social logins; Cloud Firestore and Realtime Database for synced data; Cloud Storage for files; Cloud Functions for server code; Cloud Messaging for push notifications; Crashlytics for crash reports; Analytics; Remote Config for feature flags; and App Distribution for testers. FlutterFire and React Native Firebase provide SDKs.
27

Explain the core React Native components.

Save to ▾
Show answer
View is the basic container, like a div, supporting flexbox layout and styles. Text displays text, and all strings must be inside Text. Image shows images from network or local sources. TextInput handles keyboard input. Pressable handles touches with press states. ScrollView scrolls a small amount of content, while FlatList and SectionList render long lists virtually. SafeAreaView or the safe area context library keeps content away from notches.
28

How do you implement OTP login with a phone number?

Save to ▾
Show answer
The user enters a phone number, the backend or an auth service sends an OTP via SMS and returns a verification ID. The user enters the code, which is verified to issue session tokens. On Android, use the SMS Retriever or User Consent API to auto-read the code without SMS permissions; on iOS, set the text content type to one-time code for autofill. Rate-limit requests, expire codes quickly and protect against abuse.
29

Deep links open the app but land on the home screen instead of the product page. How do you debug it?

Save to ▾
Show answer
Check that the link configuration maps the URL path to the right screen name, including nested navigators, and that path parameters match. Verify verified link setup on both platforms: assetlinks.json for Android and the associated domains entitlement plus the site association file for iOS. Test with adb shell am start and xcrun simctl openurl. Also handle links when the app is cold started versus already running.
30

How do you secure Cloud Firestore data accessed directly from a mobile app?

Save to ▾
Show answer
Because the app talks to the database directly, security rules are the backend. Write rules that check request.auth for authentication and that users can read or write only their own documents, for example allow read, write: if request.auth.uid == userId. Validate fields and types in rules, never leave test mode rules open, and move sensitive operations like payments or role changes to Cloud Functions. Test rules with the emulator suite.
31

What are useMemo, useCallback and React.memo used for?

Save to ▾
Show answer
React.memo skips re-rendering a component when its props are shallowly equal. useCallback keeps the same function reference between renders, and useMemo caches a computed value, both only changing when dependencies change. They help when passing callbacks to memoised list items or computing expensive values. Overusing them adds complexity with little gain; the React Compiler can now apply such memoisation automatically in supported projects.
32

What would you do if you joined a project and found the codebase poorly structured?

Save to ▾
Show answer
I would first understand why it is that way, since deadlines and changing requirements often explain it. I would document the main pain points with examples, such as frequent bugs in a module, and propose small improvements tied to upcoming features rather than a rewrite. I would add tests around risky areas first. Showing measurable wins, like fewer bugs, builds trust for larger refactors later.
33

What is InheritedWidget and how does Provider build on it?

Save to ▾
Show answer
InheritedWidget lets descendants read data efficiently via context and rebuild when it changes, which is how Theme and MediaQuery work. Writing it by hand is verbose. Provider wraps InheritedWidget with a simpler API: ChangeNotifierProvider exposes a ChangeNotifier, and widgets use context.watch to rebuild or context.read to call methods without rebuilding. It is simple and suitable for small to medium apps.
34

What is Metro?

Save to ▾
Show answer
Metro is the JavaScript bundler for React Native. It resolves modules, transforms code with Babel, and serves the bundle to the app during development with Fast Refresh. For release builds, it produces a minified bundle that is compiled to Hermes bytecode. It supports platform-specific extensions, asset handling and configuration in metro.config.js for things like SVG transformers or monorepo setups with watch folders.
35

What is the difference between a BaaS and a custom backend for a mobile startup?

Save to ▾
Show answer
A Backend-as-a-Service gives ready authentication, database, storage and functions, so a small team launches faster without managing servers, and costs stay low at small scale. A custom backend gives full control over business logic, data model, integrations and cost at large scale, but needs more engineering effort. Many startups begin with BaaS for the MVP and gradually move complex or expensive parts to custom services.
36

Write a React Native function that uploads an image with progress using Expo FileSystem.

Save to ▾
Show answer
import * as FileSystem from 'expo-file-system'; export async function uploadImage(uri, token, onProgress) { const task = FileSystem.createUploadTask( 'https://api.example.com/upload', uri, { httpMethod: 'POST', uploadType: FileSystem.FileSystemUploadType.MULTIPART, fieldName: 'file', headers: { Authorization: `Bearer ${token}` }, }, ({ totalBytesSent, totalBytesExpectedToSend }) => onProgress(totalBytesSent / totalBytesExpectedToSend) ); const res = await task.uploadAsync(); if (res.status !== 200) throw new Error('Upload failed'); return JSON.parse(res.body); }
37

Write a FlatList that shows products with pull-to-refresh and infinite scroll.

Save to ▾
Show answer
function ProductList({ items, loading, onRefresh, onEndReached }) { const renderItem = useCallback(({ item }) => <ProductRow product={item} />, []); return ( <FlatList data={items} keyExtractor={(item) => item.id} renderItem={renderItem} refreshing={loading} onRefresh={onRefresh} onEndReached={onEndReached} onEndReachedThreshold={0.5} ListEmptyComponent={!loading ? <Text>No products</Text> : null} /> ); }
38

An animation stutters whenever the screen fetches data. How do you fix it?

Save to ▾
Show answer
The animation likely runs on the JS thread, and data parsing or re-renders block it. Move the animation to the UI thread with Reanimated or Animated with useNativeDriver, reduce the work done when data arrives by memoising components and normalising state updates, and delay heavy processing with InteractionManager or requestIdleCallback-style scheduling until the animation finishes. Profile with React Native DevTools to confirm.
39

How do you pass parameters between screens and type them safely?

Save to ▾
Show answer
Pass small, serialisable params like IDs with navigation.navigate('Details', { id }), and read them with route.params. Define a param list type, such as type RootStackParamList = { Details: { id: string } }, and use it with the navigator and hooks for type checking. Avoid passing functions or large objects, which break state persistence and deep linking; fetch full data on the destination screen.
40

How does the keyboard affect layouts in React Native and how do you handle it?

Save to ▾
Show answer
When the keyboard opens it can cover inputs, especially at the bottom of the screen. Use KeyboardAvoidingView with behavior padding on iOS, and rely on Android's adjustResize window setting, or use react-native-keyboard-controller for consistent behaviour on both. Wrap forms in a ScrollView with keyboardShouldPersistTaps set to handled so buttons work while the keyboard is open, and dismiss the keyboard on submit.

Frequently asked questions

What does a React Native Developer do?

A React Native developer builds mobile apps with React and TypeScript, often sharing logic with a web team. They work with React Navigation or Expo Router, Redux Toolkit or Zustand, TanStack Query, Reanimated and native modules, and manage builds with Expo and EAS. Companies with existing React web products frequently hire React Native developers to extend their apps to mobile quickly and consistently.

Which skills are tested in a React Native Developer interview?

Expect questions on React and TypeScript, React Navigation, State management, Expo and EAS, Native module basics. Most rounds also ask you to explain a project and solve one practical problem live.

How do I prepare for a React Native Developer interview?

Revise React Native Core, React Native Navigation, State and Native Modules, Mobile Backend, APIs and Firebase first using the topic sheets, practise the questions on this page aloud, then do one full mock interview to practise timing.