React Native Interview Questions – Set 02

by

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.

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.

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.

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.

$ 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.

How is data loaded on the server by React Native?

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

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.

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.

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.

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.

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.

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