React Native Core Interview Questions for Mobile App Development
25 React Native Core questions with answers for mobile app development roles — 10 easy, 12 medium, 3 hard.
About React Native Core
React Native lets JavaScript and TypeScript developers build native mobile apps with React. Learn core components, styling with flexbox, hooks, lists, platform-specific code, Metro, Hermes, Expo and the New Architecture with JSI, Fabric and TurboModules. Questions often test how React concepts translate to mobile and how the framework talks to native code.
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
What is an Expo project and how does it differ from a bare React Native project?
Expo is a framework and toolset for React Native that provides prebuilt native modules, file-based routing with Expo Router, EAS cloud builds and over-the-air updates. With Continuous Native Generation, Expo creates the android and ios folders from app config and config plugins, so you rarely edit native code. A bare project manages native folders directly. Expo is now the officially recommended way to start React Native apps.
React Native lets you build mobile apps with React and JavaScript or TypeScript. You write components like View, Text and Image, and React Native renders them as real native views on Android and iOS. JavaScript runs on the Hermes engine, and with the New Architecture it communicates with native code directly through JSI rather than an asynchronous JSON bridge. Business logic and most UI code are shared between platforms.
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.
Styles are JavaScript objects created with StyleSheet.create, using camelCase properties like backgroundColor. Layout uses flexbox through the Yoga engine, with flexDirection defaulting to column, unlike the web. Units are density-independent pixels without px. There is no CSS cascade, so styles are applied per component and composed with arrays. Libraries like NativeWind bring Tailwind-style classes, and themes are usually provided through context.
05
What is the difference between ScrollView and FlatList?
ScrollView renders all its children at once, which is fine for short content but uses lots of memory and slows rendering for long lists. FlatList virtualises, rendering only items near the viewport and recycling as you scroll, with props like keyExtractor, initialNumToRender and windowSize. For very large or complex lists, FlashList offers better recycling and performance. Never nest a FlatList inside a ScrollView of the same direction.
useState stores local state and returns the value and a setter; calling the setter re-renders the component. useEffect runs side effects after render, like fetching data or subscribing to events, with a dependency array controlling when it re-runs, and a returned cleanup function to unsubscribe. Missing dependencies cause stale values, while unstable dependencies cause loops. For data fetching, libraries like TanStack Query are usually better than raw useEffect.
07
Why is TypeScript recommended for React Native projects?
TypeScript adds static types to JavaScript, catching mistakes like wrong prop names, missing fields in API responses and undefined values at compile time. It improves editor autocomplete and makes refactoring safer in large codebases. New React Native and Expo templates use TypeScript by default, and Codegen for TurboModules and Fabric components uses typed specs. Combined with strict mode, it significantly reduces runtime crashes.
08
How do you handle platform-specific code in React Native?
Use Platform.OS checks or Platform.select({ ios: ..., android: ... }) for small differences in styles or behaviour. For larger differences, create files with platform extensions like DatePicker.ios.tsx and DatePicker.android.tsx, and the bundler picks the right one automatically. Keep platform branches inside small components so screens stay shared. Native platform differences, such as permissions setup, are configured in native files or Expo config plugins.
09
A React Native app shows a red screen error in development: Text strings must be rendered within a Text component. What does it mean?
React Native requires every string to be inside a Text component. The error usually appears when a string or a number is placed directly inside a View, or when a conditional like {count && <Badge />} renders 0 as text when count is zero. Wrap text in Text and use explicit conditions like {count > 0 ? <Badge /> : null} so falsy values are not rendered as raw strings.
10
How do you handle feedback that your code is not good enough?
I treat it as information, not a personal attack. I ask for specific examples and what better looks like, fix the issues, and look for patterns so I do not repeat them. Early in my career, a reviewer pointed out that my components were too large; I learned to split them and write small hooks, and my review comments dropped steadily after that. I also thank reviewers for their time.
Hermes is a JavaScript engine optimised for React Native. It compiles JavaScript to bytecode at build time, so the app does not parse and compile JavaScript on startup, which reduces time to interactive, memory use and app size. It is the default engine on Android and iOS. It supports debugging with Chrome DevTools-based tools and sampling profiling to find slow JavaScript.
12
What are useMemo, useCallback and React.memo used for?
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.
13
Write a FlatList that shows products with pull-to-refresh and infinite scroll.
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.
16
How does the keyboard affect layouts in React Native and how do you handle it?
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.
17
A React Native list of 2000 items scrolls slowly and shows blank areas. How do you fix it?
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.
18
A screen re-renders every time the user types in a search box, making it laggy. How do you fix it?
Keep the search text state local to the search input component so only it re-renders, debounce the query before updating the list or calling the API, and memoise the list and row components. Avoid storing frequently changing values in a global store that many components subscribe to. Use the React DevTools profiler to confirm which components render, and useDeferredValue to keep typing responsive.
19
Your web team wants to reuse React code in the mobile app. How much can realistically be shared?
Business logic, API clients, validation, state management, types and utility hooks can be shared through a monorepo package. UI components usually cannot be shared directly because web uses DOM elements and mobile uses native components, unless you adopt React Native for Web or a universal design system. Navigation and storage differ too. Plan a shared core package and platform-specific UI to avoid forcing awkward compromises.
Use React Native DevTools, the default debugger since 0.76, for console logs, breakpoints, React component inspection and profiling. Inspect network requests with the network panel or a proxy. For native crashes, check Logcat in Android Studio and the Xcode console. Use the performance monitor overlay for frame rates, and add a crash reporting tool like Sentry or Crashlytics for production errors with source maps uploaded.
21
Describe a time you had to deliver a feature with incomplete requirements.
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.
22
Write a React Native component that requests location permission and shows the coordinates using Expo.
The New Architecture, enabled by default since React Native 0.76, replaces the old asynchronous bridge. JSI lets JavaScript hold references to C++ objects and call native methods synchronously. Fabric is the new renderer supporting concurrent React features and synchronous layout. TurboModules load native modules lazily with typed interfaces generated by Codegen. Bridgeless mode removes the bridge entirely. Together they improve startup, responsiveness and type safety.
24
How do native modules work, and when do you write one?
A native module exposes platform code written in Kotlin, Java, Swift or Objective-C to JavaScript. With the New Architecture, you define a typed TypeScript spec, Codegen generates interfaces, and the TurboModule implements them natively. Expo Modules API offers a simpler way using Swift and Kotlin. You write one when no library supports a needed SDK or device feature, such as a specific payment or biometric SDK.
25
After upgrading React Native, a third-party library breaks on the New Architecture. What do you do?
Check the library's documentation and the React Native directory for New Architecture support, and update to the latest version, since many libraries added support. The interop layer often lets old-architecture modules work, so read the error carefully. If unsupported, look for a maintained alternative, contribute a fix or patch with patch-package, or temporarily keep the old architecture only if your version still allows it, while planning a replacement.
Frequently asked questions
How important is React Native Core in Mobile App Development interviews?
React Native lets JavaScript and TypeScript developers build native mobile apps with React. Learn core components, styling with flexbox, hooks, lists, platform-specific code, Metro, Hermes, Expo and the New Architecture with JSI, Fabric and TurboModules. Questions often test how React concepts translate to mobile and how the framework talks to native code.
How should I use the React Native Core sheet?
Go top to bottom — easy to hard. Answer before opening each answer, tick what you solved and save misses to Last-Minute Revision.