React Native

React Native Interview Questions and Answers

1. What is React Native?

Answer:
React Native is an open-source mobile application framework created by Meta (Facebook) that allows developers to build cross-platform mobile apps using JavaScript and React. It compiles to native platform code, offering near-native performance.

import React from 'react';
import { Text, View } from 'react-native';

const App = () => (
  <View>
    <Text>Hello React Native!</Text>
  </View>
);

export default App;

Explanation: Unlike hybrid frameworks (like Ionic or Cordova), React Native uses native UI components instead of WebViews.

2. Difference Between React Native CLI and Expo

Feature React Native CLI Expo
Setup Manual setup (needs Android Studio/Xcode) Simple setup using npx create-expo-app
Native Modules Full access to native code (Java, Swift, Objective-C) Limited access, unless you eject
Customization Highly customizable Limited customization (until eject)
App Size Smaller bundle size Larger bundle size due to prebuilt libraries
Performance Slightly better (direct native integration) Slight overhead due to Expo runtime
OTA Updates Requires tools like CodePush Built-in OTA updates using Expo’s EAS
Best For Production-grade apps, deep native integrations Prototypes, MVPs, or simple apps

Example:

# React Native CLI
npx react-native init MyApp

# Expo CLI
npx create-expo-app MyApp

3. What is the difference between React and React Native?

Feature React JS React Native
Platform Web Mobile (iOS & Android)
Rendering HTML & CSS Native Components
Navigation React Router React Navigation
Styling CSS StyleSheet API

4. How does React Native achieve native performance?

React Native uses a JavaScript bridge that connects JS code with native platform APIs written in Swift, Objective-C, or Java, ensuring near-native speed.

5. Explain JSX in React Native.

JSX (JavaScript XML) lets developers write UI structures directly in JavaScript.

const App = () => <Text>Hello JSX!</Text>;

6. How do you style components in React Native?

React Native uses the StyleSheet API instead of CSS.

const styles = StyleSheet.create({
  container: {
    backgroundColor: '#fafafa',
    padding: 10,
  },
});

7. What is Flexbox in React Native?

Flexbox is used for responsive layouts.

<View style={{ flexDirection: 'row', justifyContent: 'space-between' }} />

8. What is the difference between State and Props?

  • Props: Immutable, used to pass data from parent to child.

  • State: Mutable, internal data that changes over time.

9. Explain useState and useEffect Hooks.

const [count, setCount] = useState(0);
useEffect(() => console.log('Mounted'), []);

10. How do you navigate between screens in React Native?

Using React Navigation.

npm install @react-navigation/native

11. Explain FlatList vs ScrollView.

ScrollView FlatList
Renders all elements Renders only visible elements
Slower for large lists Optimized for large lists

12. How to fetch API data in React Native?

useEffect(() => {
  fetch('https://api.example.com/data')
    .then(res => res.json())
    .then(data => setData(data));
}, []);

13. What is AsyncStorage?

AsyncStorage provides local key-value data storage.

await AsyncStorage.setItem('user', 'Sumit');

14. What is the use of Platform module?

Detects the running platform.

Platform.OS === 'ios' ? 'Running on iOS' : 'Running on Android';

15. Explain Redux in React Native.

Redux is used for global state management.

const mapStateToProps = state => ({ user: state.user });

16. What are Native Modules and Bridging?

Native Modules are written in Java/Swift and exposed to JS via a bridge for deeper system integration.

17. What is Metro bundler?

Metro is React Native’s JavaScript bundler that compiles and serves JS code to the app.

18. What is Hermès Engine?

Hermès is a lightweight JavaScript engine optimized for React Native to improve app performance and startup time.

19. What are advantages of using React Native?

  • Faster development

  • Code reusability

  • Hot Reloading

  • Cross-platform support

  • Strong community

20. What is Fast Refresh?

Fast Refresh updates only changed files in real-time without reloading the entire app.

21. What are the disadvantages of React Native?

  • Slower than fully native apps

  • Limited access to some native APIs

  • Larger app size

22. How do you debug a React Native app?

  • Use Flipper, React Native Debugger, or Chrome DevTools.

23. What is the difference between Expo Managed and Bare Workflow?

Workflow Description
Managed Expo manages native builds. Easier setup.
Bare Full access to native code, more flexibility.

24. How do you handle push notifications?

Using Firebase Cloud Messaging (FCM) or Expo Notifications.

25. What is CodePush?

CodePush lets you push JS bundle updates instantly without resubmitting apps to stores.

26. How to use environment variables?

Using react-native-config.

27. What is the difference between useCallback and useMemo?

  • useCallback: Caches functions.

  • useMemo: Caches values.

28. How do you handle forms?

Using TextInput, Formik, or react-hook-form.

29. What is the difference between Expo Go and a custom build?

  • Expo Go: Runs Expo apps quickly but cannot use custom native modules.

  • Custom Build: Uses EAS or CLI to include native dependencies.

30. How to improve performance in React Native apps?

  • Use React.memo

  • Avoid inline functions

  • Use FlatList

  • Optimize images

31. What is useRef used for?

To reference DOM-like elements or persist values.

32. How do you test React Native apps?

Using Jest, Detox, or React Native Testing Library.

33. How do you secure sensitive data?

Use react-native-keychain or secure storage APIs.

34. How do you implement animations?

Using Animated or react-native-reanimated.

35. How do you deploy apps?

  • Android → Generate signed APK and upload to Play Store.

  • iOS → Archive via Xcode and submit to App Store.

36. What is Flipper?

A debugging tool for React Native used to inspect network calls, layout, and performance.

37. How do you handle deep linking?

Using the Linking API or React Navigation deep linking configuration.

38. How to manage localization?

Using react-native-localize and i18n-js.

39. How do you create splash screens?

Using react-native-splash-screen or Expo Splash configuration.

40. How do you monitor app crashes?

Using Sentry, Firebase Crashlytics, or Flipper.

41. What are Controlled vs Uncontrolled components?

  • Controlled: State managed by React.

  • Uncontrolled: Native elements manage their own state.

42. What are gestures in React Native?

Handled via react-native-gesture-handler and react-native-reanimated.

43. What is the difference between Hot Reload and Live Reload?

Hot Reload Live Reload
Keeps app state Reloads entire app
Replaces only changed files Restarts from scratch

44. What are common directories in a React Native project?

  • /android

  • /ios

  • /src

  • /assets

  • /components

45. How to store global data without Redux?

Using Context API.

46. Explain the use of useLayoutEffect.

Runs synchronously after DOM mutations, mainly used for layout updates.

47. What is an Eject process in Expo?

Ejecting converts an Expo-managed project into a bare React Native project with full native access.

48. How to use Modal in React Native?

<Modal visible={true}>
  <View><Text>Hello Modal</Text></View>
</Modal>

49. How do you handle app permissions?

Using react-native-permissions.

50. What is the difference between Hybrid Apps and React Native Apps?

Hybrid Apps React Native Apps
Runs in WebView Uses native components
Slower performance Near-native performance
Example: Ionic, Cordova Example: React Native

51. How do you handle offline data?

Using AsyncStorage, SQLite, or redux-persist.

52. How to implement authentication?

Using Firebase Auth or custom API with JWT tokens.

53. How do you use third-party libraries?

npm install react-native-vector-icons

54. What is OTA (Over-The-Air) update?

It lets you update app JS code instantly without Play Store or App Store resubmission.

55. What is the role of Babel?

Babel transpiles JSX and modern JavaScript (ES6+) into compatible JS code for React Native.

56. What are best practices for React Native architecture?

  • Use modular folder structure

  • Separate UI and logic

  • Manage state globally (Redux, Zustand)

  • Avoid nested components

57. What is TypeScript in React Native?

TypeScript provides static typing for React Native, improving maintainability.

58. What is React Native Reanimated?

An advanced animation library offering 60fps performance and gesture-based motion.

59. What is a bundle identifier?

A unique ID that identifies an app (e.g., com.companyname.app).

60. Final Tip for Interviews:

Be ready to discuss real-world challenges like performance optimization, navigation setup, debugging, and deployment steps. Show confidence in both React Native CLI and Expo workflows to impress senior-level interviewers.

Scroll to Top