React Native Interview Questions

Here are 50 React Native interview questions along with their answers. These will help you prepare for interviews:

1. What is React Native?

Answer:
React Native is an open-source framework developed by Facebook for building mobile applications using JavaScript and React. It allows you to use the same codebase for both iOS and Android apps, while rendering the components using native APIs.

2. What are the advantages of using React Native?

Answer:

• Cross-Platform Development: Write code once and deploy it on both iOS and Android.
• Faster Development: Hot reloading, reusable components, and a large community of developers accelerate the development process.
• Native Performance: React Native bridges JavaScript with native code to provide high performance.
• Third-Party Plugin Support: You can easily integrate third-party plugins and modules.
• Active Community: Extensive community support and resources.

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

Answer:

• ReactJS is used for building web applications, and it works with the DOM (Document Object Model) for rendering components.
• React Native is for building mobile applications using native APIs for iOS and Android. It uses native components like View, Text, and Image instead of HTML elements.

4. What is the role of “Props” in React Native?

Answer:
Props (short for properties) are used to pass data from a parent component to a child component in React Native. They are immutable and cannot be modified by the child component.

5. What are state and props in React Native?

Answer:

• Props: Used to pass data from parent to child components, are read-only.
• State: Represents the internal data of a component and can be changed by the component itself using setState.

6. What is the Virtual DOM?

Answer:
The Virtual DOM is a lightweight in-memory representation of the actual DOM. React Native uses it to optimize the process of updating the real DOM by performing a diffing algorithm and applying only the changes to the actual DOM, improving performance.

7. What is the difference between React Native and Flutter?

Answer:

• React Native uses JavaScript and React, allowing developers to use existing JavaScript code and libraries.
• Flutter uses Dart programming language and provides its own set of UI components, which may result in a larger app size.

8. Explain the concept of “Hot Reloading” in React Native.

Answer:
Hot reloading allows developers to immediately see the changes in the app without losing the current state. It speeds up the development process by providing instant feedback on code modifications.

9. How do you handle navigation in React Native?

Answer:
Navigation in React Native can be managed using libraries like:

• React Navigation: A popular library to handle different types of navigation like stack, tab, and drawer.
• React Native Navigation: A native navigation solution providing better performance but more complex setup.

10. What is the difference between “Stateful” and “Stateless” components?

Answer:

• Stateful components manage their own state and can change the UI based on user interaction or other events.
• Stateless components only receive props and do not maintain any internal state, making them simpler.

11. What is the role of setState in React Native?

Answer:
setState is used to update the state of a component. When the state changes, React Native re-renders the component to reflect the new state.

12. Explain the concept of Flexbox in React Native.

Answer:
Flexbox is a layout model used in React Native for arranging components in rows or columns. It provides powerful controls like alignment, distribution, and responsiveness to design the UI.

13. What is the difference between “componentDidMount” and “componentWillMount”?

Answer:

• componentWillMount: Called before the component is mounted (deprecated in new versions of React).
• componentDidMount: Called immediately after the component is mounted, commonly used for API calls or initialization.

14. What is the significance of keyExtractor in FlatList?

Answer:
The keyExtractor function in a FlatList is used to provide a unique key for each list item. This helps React Native to efficiently update and render only the necessary items in the list.

15. What are controlled and uncontrolled components in React Native?

Answer:

• Controlled Components: The component’s value is controlled by React state and updated using setState.
• Uncontrolled Components: The component’s value is handled by the DOM itself, using refs instead of state.

16. What is the useEffect hook in React Native?

Answer:
useEffect is a hook that allows you to perform side effects in functional components. It is similar to lifecycle methods like componentDidMount and componentWillUnmount.

17. What are the different ways to style components in React Native?

Answer:

• Inline Styles: Using the style prop directly on the component.
• StyleSheet: Using StyleSheet.create() to define styles separately.
• Third-Party Libraries: Libraries like styled-components and tailwind-rn.

18. How do you handle API requests in React Native?

Answer:
API requests can be made using:

• Fetch API: A native JavaScript function for making HTTP requests.
• Axios: A popular promise-based HTTP client.

19. What are the common types of Navigation in React Native?

Answer:

• Stack Navigation: For navigating between different screens with a stack-like behavior (React Navigation).
• Tab Navigation: For bottom tab navigation between views.
• Drawer Navigation: For side-menu style navigation.

20. What is the purpose of the shouldComponentUpdate method?

Answer:
shouldComponentUpdate allows you to optimize performance by preventing unnecessary re-renders. It is used to compare current props and state with the next ones to determine if the component needs to update.

21. Explain “React Native Bridge”.

Answer:
The React Native bridge allows JavaScript code to communicate with native code (iOS and Android). The bridge converts JSON data between JavaScript and native components and ensures performance optimization.

22. What is Redux and how is it used in React Native?

Answer:
Redux is a state management library used for managing and centralizing application state. In React Native, Redux is often used with react-redux to provide a predictable state container, making it easier to manage the application’s state.

23. What is the difference between “React Native” and “Native Development”?

Answer:

• React Native: Cross-platform development with shared code for iOS and Android using JavaScript.
• Native Development: Writing separate codebases for iOS (Swift/Objective-C) and Android (Java/Kotlin), resulting in better performance but higher cost and effort.

24. What are “Native Modules” in React Native?

Answer:
Native Modules allow React Native to communicate with native code, enabling access to features like camera, GPS, or other device APIs that are not available via JavaScript.

25. Explain the difference between useState and useReducer.

Answer:

• useState: Simple hook to manage local state in a component.
• useReducer: Used for more complex state logic, where state changes are dependent on multiple sub-values or actions.

26. What is the significance of useRef in React Native?

Answer:
useRef is used to persist values between renders without causing a re-render. It’s useful for referencing DOM elements or maintaining mutable values that do not trigger a re-render when changed.

27. What are the common performance optimization techniques in React Native?

Answer:

• Using PureComponent or React.memo to prevent unnecessary re-renders.
• Lazy loading components to improve startup time.
• Optimizing FlatList and SectionList to efficiently render large lists.
• Image optimization for fast loading.

28. How do you handle background tasks in React Native?

Answer:
You can use libraries like:

• react-native-background-fetch for periodic tasks.
• react-native-background-task for handling background tasks.

29. What is a “Hermes” engine in React Native?

Answer:
Hermes is a JavaScript engine optimized for running React Native apps. It improves performance by reducing memory usage, decreasing app size, and improving start-up time.

30. What are “Higher Order Components” (HOCs) in React Native?

Answer:
HOCs are functions that take a component and return a new component with additional props or behavior. They are often used for code reuse, like adding authentication or logging.

31. What is a View component in React Native?

Answer:
View is a core component that acts as a container for other components. It is used for layout and styling, similar to a <div> in HTML.

32. What is the purpose of TouchableOpacity?

Answer:
TouchableOpacity is a component that wraps elements to make them touchable and adds a fade effect when pressed.

33. What is the AsyncStorage module?

Answer:
AsyncStorage is a key-value storage system that allows you to persist data locally in React Native apps. It is often used to store user preferences or session data.

34. What are “React Native Debugging Tools”?

Answer:

• Chrome Developer Tools: Use the browser’s dev tools to inspect and debug.
• React Native Debugger: A standalone debugger with React Native support, integrating Redux DevTools.

35. What is “Error Boundaries” in React Native?

Answer:
Error boundaries are React components that catch JavaScript errors in their child components and log the errors, preventing the app from crashing.

36. What is the Platform module in React Native?

Answer:
The Platform module allows you to check the platform (iOS or Android) your app is running on and tailor code accordingly.

37. What is the purpose of react-native link?

Answer:
react-native link was used to link native modules to a React Native project. However, it’s deprecated and now auto-linking is done in React Native 0.60 and higher.

38. How do you handle deep linking in React Native?

Answer:
React Native supports deep linking to navigate to specific parts of your app from external links or notifications. You can configure it using Linking API.

39. What are the lifecycle methods in React Native?

Answer:

• componentDidMount: Invoked after the component is mounted.
• componentWillUnmount: Invoked just before the component is removed from the DOM.
• componentDidUpdate: Invoked after the component updates.

40. What is the difference between useEffect and componentDidMount?

Answer:
useEffect is a hook for handling side effects in functional components, while componentDidMount is a lifecycle method in class components that runs after the component mounts.

41. How do you test a React Native app?

Answer:
You can use tools like:

• Jest for unit and snapshot testing.
• Enzyme or React Testing Library for component testing.
• Detox for end-to-end testing.

42. What are “native dependencies”?

Answer:
Native dependencies are libraries that provide access to native device features (camera, GPS, etc.) and require linking with native code.

43. What is the purpose of react-native run-android?

Answer:
react-native run-android is a command used to build and launch a React Native app on an Android emulator or device.

44. How do you handle push notifications in React Native?

Answer:
Push notifications can be handled using libraries like:

• react-native-push-notification
• Firebase Cloud Messaging (FCM) with react-native-firebase.

45. What is the use of SafeAreaView in React Native?

Answer:
SafeAreaView is a component that ensures content is rendered within the safe area boundaries of a device (i.e., not obstructed by notch or gesture areas).

46. How do you add fonts in React Native?

Answer:
You can add custom fonts in React Native by placing the font files in the assets directory and linking them through react-native link.

47. What are “animated” components in React Native?

Answer:
React Native provides an Animated API to create complex animations by controlling the properties of components.

48. How do you access the device camera in React Native?

Answer:
You can access the camera using third-party libraries like react-native-camera or react-native-image-picker.

49. How do you handle deep linking in React Native?

Answer:
Deep linking can be handled using the Linking API or React Navigation’s deep linking configuration to handle URL schemes and Universal Links.

50. What is the AppRegistry in React Native?

Answer:
AppRegistry is used to register the main component of the app, which is then rendered inside the root view of the mobile app.

These are top 50 react native interview questions