React Native Interview Questions | Eklavya Online

React Native Interview Questions

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.

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.

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 (

{this.state.myState}

);
}
}

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

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.

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.

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

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.

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.

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.

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.

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

const NewComponent = higherOrderComponent(WrappedComponent);

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

The best UI component for React Native are:

  • Material UI
  • Semantic UI
  • React Bootstrap
  • React Toolbox
  • Ant Design

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.

$ npm install -g create-react-native-app
Step-3: Create a project by using the following command.

$ create-react-native-app MyProject
Step-4: Next, navigate in your project by using the following command.

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

$ npm start

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.

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.

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.

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.

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

The most common similarities between React and React Native are:

  • React Lifecycle Methods
  • React Components
  • React States and Props
  • Redux Libraries

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.

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

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.

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.

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

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.

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.

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.

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.

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

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.

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.

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.

$ react-native upgrade
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.

$ react-native init
6. Last, you need to perform the troubleshoot activity to upgrade with React Native CLI.

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

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.

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.

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.

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.

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.

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

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.