ReactNative Interview Questions and Answers

What is React Native?
  • React Native is an open-source framework developed by Facebook for building mobile applications using JavaScript and React. It allows developers to create mobile apps for iOS and Android platforms using the same codebase.
What are the main differences between React and React Native?
  • React is used for building web applications, whereas React Native is used for building mobile applications. In React, you work with HTML and CSS, while in React Native, you work with native components such as View, Text, and Image.
What is JSX in React Native?
  • JSX (JavaScript XML) is a syntax extension for JavaScript that allows you to write HTML-like code within JavaScript. React Native uses JSX to define UI components and manage the structure of the UI.
What are props in React Native?
  • Props (short for properties) are read-only attributes that are passed from a parent component to a child component. They allow data to flow from one component to another in React Native.
What is state in React Native?
  • State is a local data storage that is mutable and specific to a component. It can be modified by the component itself to trigger re-renders when the data changes.
What is the difference between state and props?
  • Props are immutable and passed from parent to child components, while state is mutable and managed within a component. State changes can trigger re-renders, while props cannot.
What are the main components of React Native?
  • Some of the main components in React Native include:
    • View: A container component for layouts.
    • Text: Used to display text on the screen.
    • Image: Used for displaying images.
    • TextInput: For user input.
    • TouchableOpacity: Used for handling touch events.
What is the role of React Navigation in React Native?
  • React Navigation is a library used for handling navigation between screens in a React Native app. It allows for stack-based, tab-based, and drawer navigation patterns.
What is a Native Module in React Native?
  • A Native Module in React Native allows developers to write native code (Java, Swift, Objective-C) and access it from JavaScript. This is useful when you need functionality not provided by React Native itself.
What are the advantages of using React Native?
  • Some of the advantages of React Native include:
    • Code sharing between iOS and Android platforms.
    • Faster development cycle using hot reloading.
    • Access to native components and performance similar to native apps.
    • Large community and ecosystem for support.
What is Hot Reloading in React Native?
  • Hot reloading allows you to see changes made to the code instantly without reloading the entire application. It preserves the app’s state and speeds up development.
What are Hooks in React Native?
  • Hooks are functions introduced in React 16.8 that allow you to use state and other React features in functional components. Examples include useState, useEffect, and useContext.
What is the difference between `useState` and `useEffect` in React Native?
  • useState is used to manage the state of a component, while useEffect is used to perform side effects such as fetching data, subscribing to services, or manipulating the DOM.
What is the purpose of the `key` prop in React Native?
  • The `key` prop is used to uniquely identify elements in a list or an array of components. It helps React efficiently update and render only the items that have changed in the UI.
How can you optimize performance in React Native?
  • Some ways to optimize performance in React Native include:
    • Using shouldComponentUpdate for avoiding unnecessary re-renders.
    • Using FlatList for rendering large lists of data efficiently.
    • Reducing the size of images and assets.
    • Avoiding inline functions inside render methods.
What is a FlatList in React Native?
  • FlatList is a React Native component used to render large lists of data efficiently. It optimizes performance by rendering only the visible items on the screen, rather than all items in the list at once.
What is the purpose of the `StyleSheet` in React Native?
  • StyleSheet is used in React Native to define the styles of components. It helps improve performance by creating a separate object for styles that can be reused.
What are the common lifecycle methods in React Native?
  • Some of the common lifecycle methods in React Native include:
    • componentDidMount: Invoked once the component has been rendered.
    • shouldComponentUpdate: Determines if the component should re-render.
    • componentWillUnmount: Invoked before the component is removed from the UI.
What is Redux in React Native?
  • Redux is a state management library used in React Native for managing application state. It uses a unidirectional data flow and centralizes the state in a store, making it easier to manage and debug large applications.
What is the difference between `useRef` and `useState` in React Native?
  • useState is used to store and update state in a component, triggering re-renders when updated. On the other hand, useRef is used to persist values across renders without causing re-renders.
How do you handle gestures in React Native?
  • Gestures in React Native can be handled using libraries such as react-native-gesture-handler, which provides a comprehensive set of gesture handlers like tap, pan, pinch, and swipe.
What is the purpose of `React.memo`?
  • React.memo is a higher-order component used to optimize functional components by memoizing the result. It prevents re-renders if the props have not changed.
What are the steps to set up React Native development environment?
  • Setting up the React Native environment typically involves:
    • Installing Node.js and npm.
    • Installing React Native CLI using npm.
    • Setting up Android Studio for Android development.
    • Setting up Xcode for iOS development (macOS only).
What are the key differences between React Native and Flutter?
  • React Native uses JavaScript and React, while Flutter uses Dart. React Native has a larger community and ecosystem, whereas Flutter provides a rich set of pre-designed widgets.
What is the purpose of `View` in React Native?
  • View is a basic building block in React Native used for layout and rendering UI components. It is similar to a div in HTML.
How can you debug React Native applications?
  • You can debug React Native applications using Chrome Developer Tools, React Native Debugger, and Flipper. You can also use console.log for logging information during development.
What is Expo in React Native?
  • Expo is a framework and platform for React Native development that provides tools and services for building, deploying, and testing React Native apps. It simplifies the setup process and provides a set of pre-built components.
What are the limitations of React Native?
  • Some limitations of React Native include:
    • Performance issues for complex applications compared to native apps.
    • Limited support for some native modules.
    • Dependency on third-party libraries for some features.
How does React Native handle platform-specific code?
  • React Native allows you to write platform-specific code using extensions like .ios.js and .android.js or using the Platform module to conditionally render components based on the platform.