Skip to content
Mobile App Development
All coursesPlacement Report
‹ Back to previous sectionCourse homeAll page URLs

React Native Navigation, State and Native Modules Interview Questions for Mobile App Development

25 React Native Navigation, State and Native Modules questions with answers for mobile app development roles — 3 easy, 16 medium, 6 hard.

About React Native Navigation, State and Native Modules

Production React Native apps need navigation, global state, animations and native integrations. This topic covers React Navigation and Expo Router, Redux Toolkit, Zustand and TanStack Query, Reanimated and gestures, native modules, persistence, error boundaries and performance tuning of the JS thread. Senior interviews explore these trade-offs in depth.

Sheet progressStart 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

How does navigation work in React Native with React Navigation?

React Native Navigation, State and Native ModulesEasy
Save to ▾
Show answer
React Navigation provides navigators: native stack for push and pop screens using platform transitions, bottom tabs, drawer and material top tabs. You nest navigators, for example tabs inside a root stack with modal screens. Screens receive navigation and route props or use hooks like useNavigation and useRoute. Version 7 adds a static configuration API for better TypeScript inference and automatic deep link setup.
02

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

React Native Navigation, State and Native ModulesEasy
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.
03

How do you stay productive when working with both Android and iOS platforms?

React Native Navigation, State and Native ModulesEasy
Save to ▾
Show answer
I test every feature on one Android device and one iPhone or simulator before raising a pull request, keep a checklist of common platform differences like permissions, keyboard and safe areas, and use CI builds for both platforms on each merge. I learn basic Kotlin and Swift so I can read native errors and logs. This avoids late surprises when QA tests the second platform.
04

What is Expo Router?

React Native Navigation, State and Native ModulesMedium
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.
05

Write a React Navigation setup with a stack containing a tab navigator and a details screen.

React Native Navigation, State and Native ModulesMedium
Save to ▾
Show answer
const Tab = createBottomTabNavigator(); const Stack = createNativeStackNavigator(); function HomeTabs() { return ( <Tab.Navigator> <Tab.Screen name="Feed" component={FeedScreen} /> <Tab.Screen name="Profile" component={ProfileScreen} /> </Tab.Navigator> ); } export default function App() { return ( <NavigationContainer> <Stack.Navigator> <Stack.Screen name="Home" component={HomeTabs} options={{ headerShown: false }} /> <Stack.Screen name="Details" component={DetailsScreen} /> </Stack.Navigator> </NavigationContainer> ); }
06

Compare Redux Toolkit, Zustand and React Context for state in React Native.

React Native Navigation, State and Native ModulesMedium
Save to ▾
Show answer
Context is built in and fine for rarely changing values like theme or auth, but every consumer re-renders on change. Redux Toolkit gives a predictable global store with slices, middleware and excellent DevTools, suited to large teams, and RTK Query handles API caching. Zustand is small and simple, with selector-based subscriptions that limit re-renders. Server data is often better handled by TanStack Query than by any global store.
07

Why use TanStack Query for server state in mobile apps?

React Native Navigation, State and Native ModulesMedium
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.
08

Write a Redux Toolkit slice for a cart.

React Native Navigation, State and Native ModulesMedium
Save to ▾
Show answer
const cartSlice = createSlice({ name: 'cart', initialState: { items: [] }, reducers: { addItem(state, action) { const existing = state.items.find((i) => i.id === action.payload.id); if (existing) existing.qty += 1; else state.items.push({ ...action.payload, qty: 1 }); }, removeItem(state, action) { state.items = state.items.filter((i) => i.id !== action.payload); }, }, }); export const { addItem, removeItem } = cartSlice.actions; export const selectTotal = (s) => s.cart.items.reduce((t, i) => t + i.price * i.qty, 0);
09

How do you implement authentication flow screens in React Navigation?

React Native Navigation, State and Native ModulesMedium
Save to ▾
Show answer
Conditionally render screen groups based on auth state: if the user is signed out, the navigator shows login and signup; when signed in, it shows the app screens. Changing state automatically switches stacks and prevents going back to login with the back button. Restore tokens from secure storage on startup while showing a splash screen. Expo Router offers protected routes for the same pattern.
10

What are optimistic updates and how do you implement them?

React Native Navigation, State and Native ModulesMedium
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.
11

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

React Native Navigation, State and Native ModulesMedium
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.
12

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

React Native Navigation, State and Native ModulesMedium
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.
13

The product team wants the same app on mobile and web from one codebase. What would you propose?

React Native Navigation, State and Native ModulesMedium
Save to ▾
Show answer
With React Native, Expo with Expo Router and React Native Web lets one codebase target Android, iOS and web, with file-based routes working as URLs. With Flutter, the web target exists but suits app-like experiences more than SEO-heavy pages. I would share business logic and most screens, keep SEO landing pages on a web framework, and plan for platform-specific tweaks like hover states and keyboard navigation.
14

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

React Native Navigation, State and Native ModulesMedium
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.
15

How do you persist state in React Native between app launches?

React Native Navigation, State and Native ModulesMedium
Save to ▾
Show answer
For small key-value data use AsyncStorage or MMKV, which is much faster and synchronous. Persist Redux with redux-persist or Zustand with its persist middleware, choosing only the slices that need it. Store tokens in secure storage like expo-secure-store or Keychain and Keystore wrappers, never in plain storage. For larger structured data use SQLite through expo-sqlite or an ORM like WatermelonDB.
16

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

React Native Navigation, State and Native ModulesMedium
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.
17

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

React Native Navigation, State and Native ModulesMedium
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

Tell me about a time you improved app performance in a cross-platform app.

React Native Navigation, State and Native ModulesMedium
Save to ▾
Show answer
Situation: our React Native order history screen took three seconds to render and scrolled poorly. Task: make it smooth. Action: I profiled with React Native DevTools, replaced ScrollView with FlashList, memoised rows, moved date formatting into the API layer and switched images to a caching library. Result: render time dropped below 600 milliseconds, and frame drops nearly disappeared on budget phones.
19

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

React Native Navigation, State and Native ModulesMedium
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.
20

How do animations work in React Native and why use Reanimated?

React Native Navigation, State and Native ModulesHard
Save to ▾
Show answer
The built-in Animated API can run animations on the native thread with useNativeDriver for transform and opacity, but not for layout properties. Reanimated runs animation logic in worklets on the UI thread, so animations stay smooth even if JavaScript is busy, and supports gestures, layout animations and shared element transitions. Combined with react-native-gesture-handler, it is the standard for complex interactive animations.
21

What are the JS thread and UI thread in React Native and why do they matter?

React Native Navigation, State and Native ModulesHard
Save to ▾
Show answer
JavaScript, including React rendering and business logic, runs on the JS thread, while the native UI thread draws views and handles touches. If the JS thread is busy with heavy computation or large re-renders, taps and JS-driven animations lag even though the UI thread is free. Keep heavy work off the JS thread, move animations to the UI thread with Reanimated, and split expensive tasks into smaller chunks.
22

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

React Native Navigation, State and Native ModulesHard
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.
23

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

React Native Navigation, State and Native ModulesHard
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

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

React Native Navigation, State and Native ModulesHard
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.
25

Your app needs a third-party SDK that has only native Android and iOS libraries. How do you integrate it in React Native?

React Native Navigation, State and Native ModulesHard
Save to ▾
Show answer
First check whether a maintained wrapper package exists. If not, create a native module using the Expo Modules API or a TurboModule with a typed spec, add the SDK through Gradle and CocoaPods or Swift Package Manager, and expose a small JavaScript API with promises and events. If using Expo, write a config plugin to apply native setup during prebuild. Test on both platforms and document the setup.

Frequently asked questions

How important is React Native Navigation, State and Native Modules in Mobile App Development interviews?

Production React Native apps need navigation, global state, animations and native integrations. This topic covers React Navigation and Expo Router, Redux Toolkit, Zustand and TanStack Query, Reanimated and gestures, native modules, persistence, error boundaries and performance tuning of the JS thread. Senior interviews explore these trade-offs in depth.

How should I use the React Native Navigation, State and Native Modules sheet?

Go top to bottom — easy to hard. Answer before opening each answer, tick what you solved and save misses to Last-Minute Revision.

More question sheets

Mobile Development Fundamentals questionsDart and Flutter Basics questionsFlutter State Management and Architecture questionsReact Native Core questionsMobile Backend, APIs and Firebase questionsTesting, Performance and CI/CD questionsApp Store and Play Store Publishing questions