React Native Interview Questions

A list of frequently asked React Native Interview Questions and Answers are given below.

1) Explain React Native?

React Native is an open-source JavaScript framework introduced by Facebook. It is used for developing a real, native mobile application for iOS and Android platforms. It uses only JavaScript to build a mobile app. It is like React, which uses native components rather than using web components as building blocks. It is cross-platform, which allows you to write code once and can run on any platform.

React Native application is based on React, a JavaScript library developed by Facebook and XML-Esque markup (JSX) for creating the user interface. It targets the mobile platform rather than the browser. It saves your development time as it allows you to build apps by using a single language JavaScript for both Android and iOS platforms.

2) What are the advantages of React Native?

React Native provides many advantages for building mobile applications. Some of the essential benefits of using React Native are given below:

Cross-Platform: It offers the facility to "Write once and run everywhere." It is used to create apps for Android, iOS, and Windows platforms.
Performance: The code written in React Native is compiled into native code, which enables it for all operating systems to provide closer native appearance and functions in the same way on all platforms.
Community: React Native provides a large community of passionate developers who are always ready to help us to fix bugs, and issues occur at any instant.
Hot Reloading: Making a few changes in your app's code immediately visible during development. If the business logic is changed, its reflection is live reloaded on screen.
Faster Development: React Native helps to develop apps fast. It uses a common language to build an app for Android, iOS, and Windows platforms, which gives speedier app deployment, delivery, and quicker time-to-market.
JavaScript: JavaScript knowledge is used to build native mobile apps.

3) What are the disadvantages of React Native?

Some of the big disadvantages of React Native for building mobile applications are given below:

React Native is still new and immature: React Native is a new framework in Windows, Android, and iOS programming languages. It is still in the improvement stage, which can have a negative impact on the apps.
Learning is tough: React Native cannot learn quickly, especially for a fresher in the app development field.
It Lacks the Security Robustness: React Native is an open-source JavaScript framework, which is fragile and creates a gap in the security robustness. When you are creating banking and financial apps where data is highly confidential, experts advise not to choose React Native.
It Takes More Time to Initialize: React Native takes a lot of time for initializing the runtime even if you are using the hi-tech gadgets and devices.
Existence is Uncertain: As Facebook develop this framework, its presence is uncertain since it keeps all the rights to kill off the project anytime. As the popularity of React Native rises, it is unlikely to happen.

4) List the essential components of React Native.

These are the core components of React Native:

View: It is the basic built-in component used to build UI of Mobile apps. The view is similar to the div in HTML. It is a content area where you can display your content.
States: It is used to control the components. The variable data can be stored in the state. It is mutable means a state can change the value at any time.
Props: Props are used to pass data to the different components. It is immutable means props cannot change the value. It provides a connection between the container component and a presentation component.
Style: It is an essential component in the web or mobile, which makes the application attractive. React Native does not require any special language or syntax for styling. It can style the application using the JavaScript object.
Text: This component displays text in the app. It uses the basic component textInput to take text input from the user.
ScrollView: It is a scrolling container used to host multiple views. It can be used to render the large list or content in view with a scroll bar.

5) How many threads run in React Native?

The React Native app contains the following thread:

React Native UI Thread (Main Thread): This thread is used for the layout of the mobile app.
React Native JavaScript Thread: It is a thread where our business logic will run. It means JS thread is a place where our JavaScript code is executed.
React Native Modules Thread: Sometimes, our app needs access to platform API, which happens as a part of native module thread.
React Native Render Thread: This thread is used to generate actual OpenGL commands used to draw the app UI.

6) What is React Native Apps?

React Native Apps are not web applications. These types of apps are running on mobile devices, and cannot load over the browser. Also, they are not hybrid apps that build over Ionic, Phonegap, etc. which can run over WebView component. They are the real native apps built in a single language JavaScript with the native components to run on mobile devices.

7) List Step to Create and start a React Native App?

The following steps are necessary to create and start a React Native app:

Step-1: Install Node.js

Step-2: Install react-native environments by using the following command.

Step-3: Create a project by using the following command.

Step-4: Next, navigate in your project by using the following command.

Step-5: Now, run the following command to start the project.

To read more information, click here.

8) What are states in React Native?

It is used to control the components. The variable data can be stored in the state. It is mutable means a state can change the value at any time.

Example

Here, we are going to create a Text component with state data. The content of the Text component will be updated whenever we click on it. The event onPress calls the setState function, which updates the state with "myState" text.

import React, {Component} from 'react';  
import { Text, View } from 'react-native';  
  
export default class App extends Component {  
    state = {  
        myState: 'This is a text component, created using state data. It will change or updated on clicking it.'  
    }  
    updateState = () => this.setState({myState: 'The state is updated'})  
    render() {  
        return (  
            <View>  
                <Text onPress={this.updateState}> {this.state.myState} </Text>  
            </View>  
        );  
    }  
}  

To read more information, click here.

9) What are props in React Native?

The properties of React Native components are pronounced as props. They are used to pass data to the different components. In React Native, several components are customized at the time of creation with different parameters, and these parameters are known as props. It is immutable means props cannot change the value. It provides a connection between the container component and a presentation component.

Example

Here, we have created a Heading component, with a message prop. The parent class App sends the prop to the child component Heading.

// Parent Component
export default class App extends Component {
  render () {
    return (
     <View style={{alignItems: 'center' >
     	 <Heading message={'Custom Heading for Parent class?}/>
     </View>
    )
  }
}

// Child component
export default class Heading extends Component {
  render () {
    return (
      <View style={{alignItems: 'center' >
        <Text>{this.props.message}</Text>
      </View>
    )
  }
}
const styles = StyleSheet.create({  
   welcome: {  
    fontSize: 30,  
  }  
});
Heading.propTypes = {
  message: PropTypes.string
}
Heading.defaultProps = {
  message: 'Heading One'
}

To read more information, click here.

10) List the users of React Native?

Today, thousands of React Native built-in apps are available in the market. Here is the list of users who uses React Native apps:

Facebook
Facebook Ads Manager
Instagram
F8
Airbnb
Skype
Tesla
Bloomberg
Gyroscope
Myntra
UberEats

11) Are all React components usable in React Native?

React web components use DOM elements (ex. div, h1, table, etc.) to display on UI. But, these components are not supported in React Native. You will need to find libraries or components which is made specifically for React Native. It is very hard to find that there are components available, which support both. But, it should be easy to figure out that the given components are made for React Native or not. Thus, it makes clear that all components are not usable in the React Native.

12) How Virtual DOM works in React Native?

Virtual DOM is a lightweight JavaScript object, which is an in-memory representation of a real DOM. It is an intermediary step between the render function being called and the displaying of elements on the screen. It is similar to a node tree, which lists the elements, their attributes, and content as objects and their properties. The render function creates a node tree of the React components and then updates this node tree in response to the mutations in the data model caused by various actions done by the user or by the system.

Virtual DOM works in three steps:

Whenever any data changes in the React App, the entire UI is re-rendered in Virtual DOM representation.
Now, the difference between the previous DOM representation and the new DOM is calculated.
Once the calculations are completed, the real DOM updated with only those things which are changed.

13) Can we combine native iOS or Android code in React Native?

Yes, we can combine the native iOS or Android code with React Native. It can combine the components written in Objective-C, Java, and Shift.

14) Do we use the same code base for Android and iOS?

Yes, we can use the same codebase for Android and iOS, and React takes care of all the native component translations. For example, a React Native ScrollView use ScrollView on Android and UiScrollView on iOS.

15) What is the difference between an Element and a Component in React Native?

The difference between an Element and a Component in React Native are:

React Element	React Component
The React Element is a simple object, which describes a DOM node and its attributes or properties. It is an immutable object where you cannot apply any methods.	The React Component is a function or class that takes inputs and returns a React element. It contains references to its DOM nodes and the instances of the child components.
For Example: <button className = "green"></button>	For Example: const SignIn = () => ( <div> <p>Sign In</p> <button>Continue</button> <button color='green'>Cancel</button> </div> );

16) What is the difference between React and React Native?

The essential differences between React and React Native are:

React is a JavaScript library, whereas React Native is a JavaScript framework based on React.
Tags can be used differently in both platforms.
React is used for developing UI and Web applications, whereas React Native can be used to create cross-platform mobile apps.

To read more information, click here.

17) What is the difference between React Native and Ionic?

The essential differences between React Native and Ionic are:

Ionic is a typical hybrid development framework. It mainly focuses on front-end user experience or UI interaction, which handles all the look and feel of your app. It is easy to learn and can integrate with other libraries or frameworks such as Angular, React, Cordova, etc. Its purpose is to write once and runs everywhere.
React Native is an open-source JavaScript framework developed by Facebook to build a cross-platform mobile app. It is used for developing a mobile application for iOS, Android, and Windows. React Native is the same as React, but it uses native components instead of using web components as building blocks. It targets mobile platforms rather than the browser. Its purpose is to learn once and write anywhere.

To read more information, click here.

18) What are the differences between React Native and Native (Android and iOS)?

React Native allows you to write once and runs everywhere. It means we can reuse the React Native code on both Android and iOS platforms. Since we can reuse most of the React Native code between both platforms, but Android and iOS are different systems. Here, we are going to see these differences.

Operating System

You can build applications for both Android and iOS with React Native, but it is not an easy task to check that the app works on both systems if you are working on Windows systems. Windows do not allow to run XCode and its simulator, which is a macOS app. There are other tools available, but they are not official.

Native elements

The elements perform different actions for the React Native and Native apps. React Native apps uses elements from React Native library, whereas Native apps do not use elements of React native libraries.

Specific Styles-Shadows

Shadows style is an essential term of differences between iOS and Android while working on cross-platform apps. Android does not support shadow; instead of this, it uses elevation property.

Linking libraries

Sometimes we want to use third-party libraries in our app. Most of the time, we add it as a dependency, but sometimes it requires manual linking for adding libraries. Linking libraries manually is not an easy task for developers, either web or native applications. Since the React Native is in the improvement stage, the libraries docs are not updated according to the latest framework.

React Native vs. Native (Android and iOS)

	React Native	Android	iOS
Language	JavaScript JSX	Java	Objective-C/Swift
Debugger	Text Editor, Chrome Debugger	Android Studio	XCode
Used By	Facebook, AirBnB	Airdroid, Chromer	GarageBand, iMovie

19) What is the difference between React Native and Xamarin?

The essential differences between React Native and Ionic are:

React Native is an open-source JavaScript framework developed by Facebook to build a cross-platform mobile app for iOS, Android, and Windows. React Native is the same as React, but it uses native components instead of using web components as building blocks. It targets mobile platforms rather than the browser. Its purpose is to learn once and write anywhere.
Xamarin is an open-source, cross-platform development framework, which offers you to build android, iOS, Windows, and Mac apps by using the C# language. It is first launched in May 2011 by Xamarin Company. In 2016, Microsoft had signed an agreement to acquire Xamarin.

To read more information, click here.

20) What does a StyleSheet.create do?

In React native, the StyleSheet.create() ensures that the values are immutable and opaque. They are used to send the style only once through the bridge to avoid passing a new style object.

21) For what XHR Module is used in the React Native?

In React Native, the XHR module is used to implement the XMLHttpRequest. It is an object for interacting with remote services. This object is consists of two parts, front-end and back-end, where the front-end allows interacting within JavaScript. It sends the request to the XHR back-end, which is responsible for a processing network request. The back-end part is called Networking.

22) Is React Native a Native mobile app?

Yes, React Native is a native mobile app, which compiles a native mobile app using native app components. It is neither a Hybrid mobile app that uses WebView to run the HTML5 app nor a mobile web app. The React Native framework builds a real mobile app, which is indistinguishable from an app built using Objective-C/Swift or Java.

23) Which language is used in React Native?

The language used in React Native is Java for Android applications and Objective-C/Swift for iOS apps.

24) What is style in React Native?

It is an essential component in the web or mobile, which makes the application attractive. React Native does not require any special language or syntax for styling. It can style the application using the JavaScript object.

To read more information, click here.

25) What are Refs in React Native?

React refs are useful features that allow you to access DOM elements or component's instance directly within React. It comes handy in situations where you want to change the child of a component without using props or re-rendering the whole component.

To read more information, click here.

26) Why React Native app use keys?

Keys are a unique identifier. They are used to identify which items have changed, updated, or deleted from the lists. It should always use inside the array.

To read more information, click here.

27) What is meant by HOC in React Native?

HOC Stands for Higher-Order Component. It is a technique, which allows you to reuse the component logic. It is a function that takes a component and gives back a new component.

Syntax

28) What is meant by InteractionManager, and why it is Important?

The InteractionManager is a native module in React Native, which is responsible for differing the execution of a function until an interaction has finished. To handle this deferral, we need to call InteractionManager.runAfterInteractions(() => {...}).

The InteractionManager is important because React Native has two threads. One is JavaScript UI thread, which handles drawing updates to the screen, and the second thread used for all task, not on the UI thread. Since React Native has only one thread for making UI updates, it can get overloaded and drop frames, especially in navigation screen animations. So, developers use the InteractionManager to ensure that the function is executed after these animations occur. As a result, we do not drop frames on the UI thread.

29) What are the differences between Class and Functional Component?

The essential differences between the class component and functional component are:

Syntax: The declaration of both components is different. A functional component takes props, and returns React element, whereas the class components require to extend from React.

//Functional Component
function WelcomeMessage(props) {  
  return <h1>Welcome to the , {props.name}</h1>;  
} 

//Class Component
class MyComponent extends React.Component {  
  render() {  
    return (  
      <div>This is main component.</div>  
    );  
  }  
}  

State: The class component has a state while the functional component is stateless.

Lifecycle: The class component has a lifecycle, while the functional component does not have a lifecycle.

30) When would you prefer a class component over functional components?

We prefer class component when the component has a state and lifecycle; otherwise, the functional component should be used.

31) How React Native handle different screen sizes?

React Native provides many ways to handle screen sizes. Some of them are given below:

1. Flexbox: It is used to provide a consistent layout on different screen sizes. It has three main properties:

flexDirection
justifyContent
alignItems

2. Pixel Ratio: It is used to get access to the device pixel density by using the PixelRatio class. We will get a higher resolution image if we are on a high pixel density device.

3. Dimensions: It is used to handle different screen sizes and style the page precisely. It needs to write the code only once for working on any device.

4. AspectRatio: It is used to set the height or vice versa. The aspectRatio is present only in React-Native, not a CSS standard.

5. ScrollView: It is a scrolling container which contains multiple components and view. The scrollable items can be scroll both vertically and horizontally.

32) What is ListView?

ListView is a core component of React Native, which contains a list of items and displays in vertical scrollable lists.

To read more information, click here.

33) What are the best UI Components for React Native?

The best UI component for React Native are:

Material UI
Semantic UI
React Bootstrap
React Toolbox
Ant Design

34) What are the similarities between React and React Native?

The most common similarities between React and React Native are:

React Lifecycle Methods
React Components
React States and Props
Redux Libraries

35) What are animations in React Native?

The animation is a method in which images are manipulated to appear as moving objects. React Native animations allows you to add extra effects, which provide great user experience in the app. We can use it with React Native API, Animated.parallel, Animated.decay, and Animated.stagger.

React Native has two types of animation, which are given below.

Animated: This API is used to control specific values. It has a start and stops methods for controlling the time-based animation execution.
LayoutAnimated: This API is used to animate the global layout transactions.

To read more information, click here.

36) How is data loaded on the server by React Native?

React Native uses Fetch API to fetched data for networking needs.

37) What is the storage system in the React Native?

React Native storage is a simple, unencrypted, asynchronous, persistent system, which stores the data globally in the app. It stores data in the form of a key-value pair. React Native provides AsyncStorage class to store data globally. Using the AsyncStorage class, we need to have a data backup and synchronization class. It is because data saved on the device is not permanent and not encrypted.

To read more information, click here.

38) Can you integrate more features in the existing app by React Native?

Yes, we can add new features to existing applications in React Native.

39) What is meant by Gesture Responder System?

It is an internal system of React Native, which is responsible for managing the lifecycle of gestures in the system. React Native provides several different types of gestures to the users, such as tapping, sliding, swiping, and zooming. The responder system negotiates these touch interactions. Usually, it is used with Animated API. Also, it is advised that they never create irreversible gestures.

40) What does React Native Packager do in the React Native?

The React Native Packager performs the following functionalities:

The React Native Packager combines all the JavaScript code of your application into a single file and then translate any of the JavaScript code that your device won't understand like JSX.
It also converts the assets (e.g., PNG file) used in your project into objects, which can be displayed by an Image component.

41) Why React Native use Redux?

Redux is a state container for JavaScript applications. It is a state management tool, which helps you to write applications that behave consistently, can run in a different environment, and are easy to test.

React Native use Redux because it allows developers to use one application state as a global state and interact easily with the state from any React component. It can combine with any framework or library.

42) How to update React Native with the latest version?

It is very important to upgrade the existing React Native with the latest version, which gives you access to more APIs, views, developer tools, and other latest features. The following steps need to be performed for upgrading the React Native with the latest versions.

1. Upgrade your expo project in package.json with the latest version of react-native, react, and expo package.

2. Set the latest version of SDK, which is compatible with the latest react-native in your app.json file.

3. Upgrade the React Native CLI to update the source file by using the following command.

4. Install the upgrade helper web tool that provides you to upgrade your apps between any two versions.

5. Upgrade your project files by running the following command.

6. Last, you need to perform the troubleshoot activity to upgrade with React Native CLI.

43) What is API in React Native?

An API or Application Programming Interface is a software intermediary that lets in two applications to communicate with each other without having to know how they are implemented. Sometimes it is thought of as a contract, with documentation that represents an agreement between two parties. For example, each time when you use an app in the mobile like Facebook, it sends a message, or when you see the weather on your phone, these are the usage of an API.

React Native use the Fetch networking API to suit our needs. It simply calls the URL through Fetch, and then make requests to the server as needed. The React Native API mainly uses three lifecycle methods, which are constructor, componentDidMount, and Render.

44) How to use Axios in the React Native?

Axios is a popular library for making HTTP requests from the browser. It allows us to make GET, POST, PUT, and DELETE requests from the browser. Therefore, React Native uses Axios to make requests to an API, return data from the API, and then perform actions with that data in our React Native app. We can use Axios by adding the Axios plugin to our project using the following command.

# Yarn
$ yarn add axios

# npm
$ npm install axios --save

Axios have several features, which are listed below:

It makes XMLHttpRequests from the browser.
It makes Http requests from the React Native framework.
It supports most of the React Native API.
It offers a client-side feature that protects the application from XSRF.
It automatically transforms response and request data with the browser.

45) Which database is best for React Native?

The most popular database for React Native is an SQLite database.

46) How to use firebase in react native?

Firebase is a popular tool for mobile and web app development platform. It provides many services to help you in building fast and high-quality apps, grow your user base, and earn more money without managing infrastructure. It is a powerful Database as a Service (DBaaS) tool, which provides a scalable cloud database to store and sync data for client and server-side development. Some of the key features of firebase are authentication, Real-time database, cloud messaging, crash reporting, and analytics. Firebase is a type of freemium model, not an open-source model. However, you can use its services free until you don't pass the limits of its free tier.

We can get started with firebase by using following steps:

First, login into the firebase console and then create a project.
Retrieve apikey, authDomian, DatabaseURL, and storage bucket from the console.
Next, you need to create a new React Native project
Install firebase plugin from npm
Add firebase plugin into the React Native project

Interview Tips	Job/HR Interview Questions
Company Interview Questions & Procedure	JavaScript Interview Questions
Java Basics Interview Questions	Java OOPs Interview Questions
Servlet Interview Questions	JSP Interview Questions
Spring Interview Questions	Hibernate Interview Questions
PL/SQL Interview Questions	SQL Interview Questions
Oracle Interview Questions	Android Interview Questions
jQuery Interview Questions	MySQL Interview Questions