React Native interview questions for fresher

Hello Guys, In this article we are going to discuss React Native interview questions. As you know React Native is widely used in the industry for cross-platform mobile application development. and there are multiple job opportunities available all over the world. this article will help you to crack React Native interviews. let’s start with one by one.

1. What is React Native?

React Native is an open-source framework developed by Facebook in 2015 that allows you to build native mobile applications using JavaScript and React. you can create mobile apps for both iOS and Android platforms using a single codebase. It uses native components, such as buttons, text inputs, and images, to render the UI, providing a native look and feel to the app.

2. What are the key features of React Native?

1. Cross-platform development: React Native allows you to write code once and deploy it on both iOS and Android platforms. This saves development time and effort by eliminating the need to write separate codebases for each platform.
2. Code reusability: React Native promotes code reusability by allowing you to share a significant portion of your codebase across different platforms. Although platform-specific code is sometimes required, the core logic and UI components can be shared, reducing duplication of effort.
3. Native-like performance: React Native uses native components and optimizes performance by running JavaScript code on a separate thread, resulting in smooth and responsive app performance.
4. Hot reloading: React Native provides a developer-friendly feature called hot reloading. It allows you to see the changes you make in the code immediately reflected in the app without requiring a full app restart. This significantly speeds up the development process.
5. Rich ecosystem: React Native has a vibrant and growing ecosystem with a wide range of libraries, tools, and community support. This ecosystem provides solutions for various app functionalities, such as navigation, state management, and API integrations.

3. What is React Native CLI?

React Native CLI (Command Line Interface) is a command-line tool used for creating, building, and managing React Native projects. It provides a set of commands that allow you to perform various tasks related to React Native development.

When you install React Native using the command npm install -g react-native-cli, it installs the React Native CLI globally on your system. Once installed, you can use the react-native command to interact with your React Native projects.

4. What are the key commands available in React Native CLI?

1. react-native init: Creates a new React Native project by generating the initial project structure and configuration files.
2. react-native start: Starts the React Native development server, which bundles and serves your JavaScript code to the running app. This allows you to see your changes immediately as you develop the app.
3. react-native run-android or react-native run-ios: Builds and deploys your React Native app to an Android or iOS emulator or device for testing and development.
4. react-native link: Links native dependencies and libraries to your React Native project. This command is used when integrating third-party native modules that require additional configuration or setup.
5. react-native bundle: Bundles your JavaScript code and assets into a distributable form. This is useful for creating production-ready builds or building an app that can be run in an offline environment.
6. react-native upgrade: Upgrade your React Native project to a newer version of React Native, applying the necessary changes to project files and dependencies.
7. react-native eject: Ejects your project from the default React Native configuration and generates the necessary configuration files and scripts for building and running the app independently.

5. What is Virtual DOM?

Virtual DOM is a concept used in frameworks like React, which provides an efficient way to update and render user interfaces. It is a lightweight copy of the actual DOM and acts as a bridge between the application and the browser. Instead of directly manipulating the DOM, changes are made to the Virtual DOM, which then calculates the minimal updates needed and efficiently applies them to the actual DOM. This approach improves performance by reducing unnecessary DOM operations and provides a declarative programming model for UI development.

6. What is Flexbox?

Flexbox is a layout system that is similar to the CSS Flexbox but specifically designed for building user interfaces in mobile applications. It provides a flexible and responsive way to arrange and align components within a container. With Flexbox in React Native, you can easily control the layout, size, and positioning of UI elements, enabling you to create dynamic and adaptive designs that work across different screen sizes and orientations.

7. What are the properties of Flexbox?

1. flex: Specifies the flex grow factor of a component, which determines how much it expands relative to other components. It accepts a numeric value.
2. flexDirection: Specifies the direction of the main axis along which the components are laid out. It can be set to row (horizontal), column (vertical), row-reverse, or column-reverse.
3. justifyContent: Determines how the components are aligned along the main axis. It can be set to flex-start, flex-end, center, space-between, space-around, or space-evenly.
4. alignItems: Defines how the components are aligned along the cross axis. It can be set to flex-start, flex-end, center, stretch, or baseline.
5. alignSelf: Overrides the alignItems value for an individual component. It can be set to auto, flex-start, flex-end, center, stretch, or baseline.
6. flexWrap: Controls whether the components should wrap to the next line when they exceed the container’s width. It can be set to nowrap or wrap.
7. alignContent: Defines how multiple lines of components are aligned along the cross axis. It can be set to flex-start, flex-end, center, stretch, space-between, or space-around.

8. What is the difference between FlatList & ListView?

FlatList and ListView are both components used for rendering lists of data. However, there are some key differences between them as follows.

1. Performance: FlatList is more efficient and performs better than ListView, especially for large lists. It only renders the items that are currently visible on the screen, while ListView renders all the items in the list, which can lead to performance issues.
2. Flexibility: FlatList offers more customization options and control over the list rendering and behavior. It provides props to define how to extract keys, render each item, and handle scroll behavior. ListView has limited customization options compared to FlatList.
3. Scrollability: FlatList automatically handles scrolling behavior, including performance optimizations and scroll-to-index functionality. ListView requires manual configuration and handling for these features.
4. Support: ListView has been deprecated in newer versions of React Native and is no longer actively maintained. FlatList is the recommended component for rendering lists in recent versions and has ongoing support and updates.

9. What are props in React Native?

In React Native props are immutable properties of compenents. It’s like parameters that you can pass to a component. They allow you to customize and configure the behavior and appearance of a component.

<Button text="Click me!" color="blue" onPress={handleButtonPress} />

In this example, the “text”, “color”, and “onPress” are props. The Button component can access these props and use them to render the button with the specified text, color, and action.

10. What is state in React Native?

State in React Native is a JavaScript object that stores and manages the dynamic data of a component. It can be mutable which means data can change over time, such as user input, fetched data, or the current state of a UI element. The component can update its state and trigger a re-render to update the user interface accordingly. State allows components to remember and reflect changes in their data, making them interactive and responsive to user actions.

11. Explain the Life cycle of React Native

Life cycle stages are represented by specific methods that can be defined in the component’s class or functional component. Here’s an overview of the life cycle in React Native:

1. Mounting Phase:
   • constructor(): is the first method called when the component is created. It is used for initializing the component’s state and binding event handlers.
   • render(): method is responsible for rendering the component’s UI, usually returning JSX elements.
   • componentDidMount(): method is called immediately after the component is rendered and added to the screen. It’s commonly used to perform initial data fetching or setup subscriptions.
2. Updating Phase:
   • render(): Whenever the component’s state or props change, the render() method is called again to update the UI.
   • componentDidUpdate(prevProps, prevState): method is invoked after an update is applied to the component. It allows you to perform additional actions based on the updated state or props.
3. Unmounting Phase:
   • componentWillUnmount(): This method is called just before the component is removed from the screen. It’s used for cleanup tasks like canceling subscriptions or timers.

12. What are Hooks in React Native?

Hooks in React Native are functions that allow you to add state and other React features to functional components. They provide a way to manage state and handle side effects without using class components.

13. Explain more about React Native Hooks

Here are some key points about Hooks in React Native:

1. useState: The useState hook is used to add state to functional components. It allows you to define and manage state variables, and it returns an array with two elements: the current state value and a function to update the state.
2. useEffect: The useEffect hook is used to handle side effects in functional components, such as fetching data, subscribing to events, or manipulating the DOM. It replaces lifecycle methods like componentDidMount, componentDidUpdate, and componentWillUnmount.
3. Other Hooks: React provides several other built-in hooks, such as useContext for accessing context values, useReducer for managing state with a reducer function, and useCallback and useMemo for optimizing performance by memoizing values and functions.
4. Custom Hooks: You can create custom hooks to encapsulate reusable stateful logic and share it between multiple components. Custom hooks can be composed of built-in hooks or other custom hooks.
5. Benefits: Hooks simplify the code structure and make it more readable and maintainable. They promote the reuse of logic, reduce the need for class components, and enable functional components to have state and side effects.

In the next article, we will learn about part 2 of React Native Interview Question for Experience Person. Thank you 🙂 and All the best