React Native Interview Questions

What is React Native Apps?

Ans: These are the apps which run on mobile devices but are not loaded over the browsers as they are not web applications. The react native apps are also not the hybrid apps that are built over Ionic, Phonegap which run on WebView component. It is a real native app which is built only in JavaScript with the native components to run on mobile devices.

What is the difference between React and React Native?

Ans: The differences between React and React Native are:

• React Native is a JavaScript framework which is based on React while React is a javascript library.
• The usage of tags is different on both platforms.
• React Native is used in creating cross-platform mobile apps while React is used for developing UI and Web applications.

List the essential components of React Native?

Ans: The core components include.

• View: It is the basic built-in component which is used to build UI of Mobile apps. The view is similar to the
  in HTML. A view is a content area where the content is displayed.
• States: It is used to control the components. A state stores the variable data. A state can change the value at any time and so it is mutable.
• Props: Props are used to pass data to the different components. The props cannot change the value and so it is immutable. Props provide a connection between the container component and a presentation component.
• Style: The attractive applications are developed using this style component in the web or mobile. React Native does not require any language or syntax for styling. It can style the application using the JavaScript object.
• Text: The text in an app is displayed using this component. It uses the basic component “textInput” to collect 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.

List some benefits of using React Native for building mobile apps?

Ans: The benefits of using React Native are.

• It is well known for Optimal Performance.
• The codes can be reused and contain Pre-Developed Components.
• It has a large community of Developers.
• Advantage of having Live and Hot Reloading.
• Provides a Cost-Effective Solution.
• Offers a Simple User Interface.
• Provides the support for Third-Party Plugins.
• Design of Modular Architecture.
• Providing Handy Solutions and Libraries.

How many threads will run in React Native?

Ans: The React Native applications run the following threads.

• React Native UI Thread (Main Thread): The layout of the mobile apps are built using this thread.
• React Native JavaScript Thread: The business logic will run the usage of this thread. It is a JS thread where the JavaScript code is executed.
• React Native Modules Thread: This thread is used for accessing the API platform API when there is an actual need.
• React Native Render Thread: The actual OpenGL commands are generated using this thread. These commands are used to draw the app UI.

What is API in React Native?

Ans: An API is a software interface in which any two applications can be communicated with each other without knowing how they are implemented. React Native uses the Fetch networking API which simply calls the URL through Fetch and then it makes requests to server as needed. The React Native implements mainly three lifecycle methods which are constructor, componentDidMount and Render.

Related Article, React Slider Component

What happens when you call

Ans: By calling “setState” the react will merge the object that is passed into setState into the current state of the component. It then kicks off the reconciliation process. The goal of reconciliation is to update the UI based on this new state in the most efficient possible way. 

To perform this, React will construct a new tree which contains the React elements. The tree is an object representation of your UI. This tree is developed for finding out how UI should change in response to the new state, React will diff this new tree against the previous element tree.

What is JSX?

Ans: The JSX stands for JavaScript XML. It is a syntax notation for JavaScript XML. JSX provides expressiveness of JavaScript with HTML like template syntax. 

Example: The below text inside the

tag return as javascript function to the render function.

render(){

        return(

         

        );

     }

What are React Hooks?

Ans: Hooks let your use state and other React features without writing a class. It is a new addition released in React 16.8. Hooks extracts stateful logic from a component that can be tested independently and will be reused. It resues stateful logic without changing the component hierarchy which makes it easy to share Hooks among many components or with the community.

React JS Training

• Master Your Craft
• Lifetime LMS & Faculty Access
• 24/7 online expert support
• Real-world & Project Based Learning

Explore Curriculum

 

. When would you use ScrollView over FlatList or vice-versa?

Ans: 

• FlatList is used when there is a need to render a list of similar items from an array or if the data is very big.
• ScrollView is used when there is a need to render generic content in a scrollable container and if the data is small. 

. How to fetch data from a local JSON file on React Native?

Ans: 

1.By using the below statement
const customData = require('./customData.json');

and then access customData like a normal JS object.

2.For ES6/ES2015 you can import directly like:

// app.js

import * as data from './example.json';

const word = data.name;

console.log(word); // 

output 'testing'

. How are Hot Reloading and Live Reloading are different in React Native?

Ans: 

• When file changes, Live reloading will reload or refreshes the entire app. 

Example: If four links are used deep into your navigation and saved a change, live reloading would restart the app and load the app back to the initial route.

• The Hot reloading only refreshes the files that were changed without losing the state of the app. 

Example: If four links are used deep into your navigation and saved a change to some styling, the state would not change but the new styles would appear on the page without having to navigate back to the page you are on because you would still be on the same page.

. What does React Native Packager do in the React Native?

Ans: The React Native Packager performs the following functionalities:

• It combines all the JavaScript code in an application into a single file and then translates the JavaScript code which the devices don't understand. Example: JSX.
• It also converts the assets such as PNG file used in the project into objects, which can be displayed by an Image component.

. What are the new features in React Native 0.61?

Ans: React Native 0.61 is the latest version which can optimize the features of the version 0.60. The latest release of React Native comes with the following improvements. It has incorporated four advanced level features as below.

• It is provided with improved CocoaPods Support.
• A new useWindowDimensions Hook feature is provided for dimension updates.
• High-speed processing and application refresh.
• It is upgraded to 16.9 as it opposes old names for unsafe methods.

. What is View and how important is it?

Ans:  

• The view is a fundamental component for building a UI in react native.
• It is a container which supports layout features with flexbox, style, some touch handling and accessibility controls.
• It maps directly to the native view equivalent to any platform which React Native is running on, whether that is a UIView,
  , android.view, etc.
• The views are designed by nesting the view inside other views and it can have 0 to many children of any type.

Example: The below code creates a View that wraps two coloured boxes and a text component in a row with padding.

class ViewColoredBoxesWithText extends Component {

  render() {

    return (

      
        style={{

          flexDirection: 'row',

          height: 100,

          padding: 20,

        }}>

        

        

        Hello World!

      

    );

  }

}

. How do you style a component in React Native?

Ans: 

• React Natives can be used to style your applications by using JavaScript.
• The core components in react native accept a prop named “style“.  The style names and values work exactly as CSS which works on the web, except names that are written using camel casing. 
  Example: “backgroundColor” rather than “background-color”.
• The style prop can be a plain old JavaScript object.
  Able to pass an array of styles, the last style in the array has precedence which can be used for inheriting styles.
• As a component grows in complexity, it is better to use “StyleSheet.create” for defining several styles at one place.

Example:

const styles = StyleSheet.create({

    container:  {

        borderRadius:  4,

        borderWidth:  0.5,

        borderColor:  '#d6d7da',

    }, 

    title:  {

        fontSize:  19,

        fontWeight:  'bold',

    }, 

    activeTitle:  {

        color:  'red',

    },

});

 



     

. What are the best UI Components for React Native?

Ans: The best UI Components for React Native are.

1. Material UI
2. Semantic UI
3. React Bootstrap
4. React Toolbox
5. Ant Design

Subscribe to our YouTube channel to get new updates..!

Subscribe

 

. Write a program to display “Hello World” in React Native?

Ans: Create a simple "Hello World" app by using modifying “App.js” file of FirstApp. Save the utility and reload by way of in reality pressing twice "R" or Ctrl+M (Reload).

Example:

import React, {Component} from 'react';  

import {Platform, StyleSheet, Text, View} from 'react-native';  

type Props = {};  

export default class App extends Component {  

render() {  

return (  

      

        Hello World  

    

    );  

  }  

}  

. What is the difference between a component and an element in React?

Ans: 

• React Component is a class or a function which optionally accepts inputs and returns a React element via JSX.
• React Element describes what the user wants to display over the screen and simplifying it. The react element is an object representation for some UI.

. What are animations in React Native?

Ans: The animation is a method which manipulates the images to appear it as moving objects. React Native animations allows to add extra effects that can provide good user experience in the app. It can be used with React Native API, Animated.parallel, Animated.decay, and Animated.stagger.

There are two types of animation in react native, which are given below.

• Animated: The specific values are controlled by using this API. It has a start and stops methods for controlling the time-based animation execution.
• LayoutAnimated: The global layout transactions are animated by using this layout.

. How to create an SQLite database in react native?

Ans: The following steps are used in creating the SQLite database in react native.

1. Create a folder as “www” through the finder in the project folder.
2. Create a database file.
3. Add the created file to the project.
4. Choose a file to add.
5. Verify the structure of the project.

. Why React Native use Redux?

Ans: Redux is a state management tool. It is a state container for JavaScript applications. It helps to write applications which can consistently run on a different environment and are easy to test.

React Native use Redux to allow the 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.

. How to update React Native with the latest version?

Ans: Upgrading React Native with the latest version gives access to more APIs, views, developer tools and other features. The following steps are implemented for upgrading.

1. Upgrade the expo projects in “package.json” by updating react native, react and Expo package versions.
2. Install the latest SDK version which is compatible with the latest version of react-native in the “app.json” file.
3. Apply “react-native upgrade” command for upgrading React Native CLI.
4. Upgrade the applications by installing the upgrade helper web tool.
5. Apply “react-native init” command to upgrade the existing file.
6. Perform troubleshoot activity to upgrade with react native CLI.

. How to call web service in React Native?

Ans: This is an example to call the web service in React Native.

fetch('http://**someurl**', {

method: 'POST',

headers: {

   'Accept': 'application/json',

   'Content-Type': 'application/json',

},

body: JSON.stringify({

   username : "admin123",

   password: "password123",

})

})

. How to install React Native?

Ans: The following steps should be followed to install React Native.

1. Begin the process by installing the node and watchman.
2. Install React Native CLI with npm.
3. Install Xcode and its Command-line tools.
4. Apply the following command for creating a React Native project

react-native init MyNewProject

cd MyNewProject

react-native run-ios

. How to handle multiple platforms in React Native?

Ans: Handling multiple platforms is easy for React Native. The majority of React Native APIs are based on cross-platform, this makes the app developers write one React Native component, that can work on both iOS and Android seamlessly. It also allows users to specify platform-specific versions of each component that can integrate into the rest of the React Native application.

. What do you mean by the interaction manager and why is it important?

Ans: It is a native module of React Native which works by deferring the execution of a function until an “interaction” has finished. The interactive manager is a crucial module because React Native has only one thread for making UI updates which can be overloaded and result in drop frames. Developers use the interaction manager to ensure that the function is only executed after the animations occurred so that any frame drops may not result.

. What is the difference between React Native and Ionic?

. How to use Axios in react native?

Ans: 

The Axios helps the user to send GET, POST, PUT, and DELETE requests to the REST API and render a response to the application. Axios will make the users interact with the REST API. It is a promised HTTP client used by the react-native.

Axios has a number of features.

• It makes XMLHttpRequests from the browse.
• It can also make Http requests from the react native framework.
• It gives support for react-native API’s.
• It provides a client-side feature that protects the application from XSRF.
• It automatically transforms the response and the request data.

. What is the difference between React Native and Xamarin?

Ans: The main differences between React Native and Xamarin are.

React Native:

It is an open-source JavaScript framework developed by Facebook to build a cross-platform mobile app. React Native is used for developing a mobile application for iOS, Android, and Windows. React Native is the equivalent to React but differs in using the native components instead of web components as building blocks. Its purpose is to learn once and write anywhere and targets mobile platforms rather than the browser.
Xamarin:

It is an open-source, cross-platform development framework used in building the android, iOS, Windows, and Mac apps using C#. It was first launched in May 2011 by Xamarin Company. In 2016, Microsoft had signed an agreement to acquire Xamarin.