React Native Interview Questions and answer

React Native Interview Questions and answer

React Native Interview Questions and answer

React Native is a cross-platform mobile application development framework that lets you build native iOS and Android mobile applications. It is basically a JavaScript framework used to build a mobile application. React Native is similar to React, but it uses native component instead of using web components as it’s building blocks.

Being an important UI development tool for building mobile applications React Native is very popular these days. So if you’re preparing for giving an interview on the same, we have prepared a few questions that are frequently asked.

React Native Interview Questions and answer

So here are some important React Native Interview Questions and answers:

1.) What is React Native?

React Native is an open source framework developed by Facebook which enables developers to build cross-platform mobile applications using Javascript. Also with React Native, one can develop a mobile application by using the same design principles used to develop a web application with ReactJs framework. It allows the developer to build mobile application UI by composing multiple components in a declarative way. 

These applications were written using web technology but the hybrid app was not a native application and lacks performance issue. React native solves those performance issues that is why it quickly became popular in React community. Under the hood, React native bridge invokes the native rendering APIs in Objective-C (for IOS) and Java (for Android). That is why they perform better than hybrid application development frameworks.

2.) What are some of the major advantages of using React Native for developing mobile application?

There are following benefits of using React Native in mobile application development

  • React Native enables a web developer to build mobile apps with Javascript.
  • The developer doesn’t need to learn complete new programming language java/ Kotlin to develop Android App. Similarly, the developer doesn’t need to be an expert in objective C or swift to develop IOS app anymore. Javascript is more than sufficient to build a mobile app for both Android and IOS. However, knowing java or swift helps the developer to write performance robust mobile app.
  • Using React Native, most of the code base can be shared between the Android app and the IOS app.
  • With a single code base, effort in maintenance is reduced by many folds.
  • With a single code base, features can be shipped much faster on both major mobile platform
  • Developer having experience with ReactJs can quickly learn React Native. The learning curve for a developer is very low.

3.) What are the prerequisites for developing a mobile app in Reactive Native?

Developer experience is one of the most important attributes of a framework. If getting started step with any framework is very difficult and very complex then the community will take lots of time to accept that framework. That is why React native has tried their best to simplify the getting started step for app development. To build a mobile app with React Native, one should have a good understanding of Javascript concepts and understanding of CSS helps in styling React Native app. Also React Native provide CLI (command line interface) which is used to bootstrap the mobile application. 

For IOS development Xcode and for Android app development, Android studio is required. Understanding of component driven development with ReactJs is also very beneficial in React Native app development. However there is one more open source project named Expo CLI which provides a command line utility to easily start development of React native. It also provides barcode based approach to share the app within the team. Developer experience is pretty good for React native that is also one of the reasons for its huge popularity in the developer community.

4.) What is JSX?

JSX is shorthand for JavaScript XML. This is a type of file used by React which utilizes the expressiveness of JavaScript along with HTML like template syntax. This makes the HTML file really easy to understand. JSX enables conditional rendering of React components. React includes building step which converts JSX into Javascript code which is ultimately executed by browser in case of a web app or react Native in case of React Native. JSX is added to improve the developer experience. Moreover ReactJS provides few APIs which make the HTML structure in a browser. Those APIs were a little cumbersome to frequently used. That is why React JS introduced JSX and added a tooling step to convert JSX into platform understandable code. Thus, with the help of JSX, we can execute javascript to build HTML tags very easily. 

5.) What are Props in React Native?

Props is the shorthand for Properties in React. They are read-only components which must be kept pure i.e. immutable. Also note that they are always passed down from the parent to the child components throughout the application.
For example, Image is a very basic component provided by React Native library to display an image. It accepts a prop called source which is used to control what image it shows. Thus by passing different values of props, one component can show different UI and different functionality

6.) What is state in React Components?

A state is an object privately maintained inside a component. It can influence what is rendered in the browser. They can also be changed in a component. States are the heart of React components. Evidently States are the source of data and must be kept as simple as possible. React component’s state value changes in the life cycle of component, unlike props. However we should not directly change state value of react component. In addition React framework gives the setState method by which state of a component should be changed.

7.) How are the element size handled in React Native?

React native follows the box-model concept of CSS. The size of the element is calculated based on the size of content, padding, border, margin. Moreover the simplest way to set the size of an element is to set width and height CSS property for an element. All dimensions in React Native is unitless and represent density-independent pixels. So by setting fixed height and width, the element will look exactly the same size on different screen sizes. However there is an instance where you want to give the width and height of an element in percentage. 

Directly use of percentage is not supported in React native but React native does give a dimension module which can be used to give width in percentage. Dimension module gives the width and height of the mobile device. Moreover this information can be used to set the style of an element in runtime. Below is the example of how to use Dimension module from React native:

Importing module from React Native:

import { Dimension } from ‘react-native’;

Figure out width and height of the device:

const deviceWidth = Dimension.get(“window”).width;

const deviceHeight = Dimension.get(“window”).height;

Calculate the style value:

Width: deviceWidth*<percentageValue>/100

8.) What are the differences between ReactJS and React Native?

It is used for developing web applications.It is used for developing mobile applications.
It uses React-router for navigating web pages.It has a built-in navigator library for navigating mobile applications.
It uses HTML tags.It does not use HTML tags.
It provides high security.It provides low security in comparison to ReactJS.
In this, the virtual DOM renders the browser code.In this, Native uses its API to render code for mobile applications.

9.) How is the entire React Native code processed to show the final output on a mobile screen

  • At the first start of the app, the main thread starts execution and starts loading JS bundles.
  • When JavaScript code loads successfully, the main thread sends it to another JS thread because when JS does some heavy calculations stuff the thread for a while, the UI thread will not suffer at all times.
  • When React starts rendering, Reconciler starts “diffing”, and when it generates a new virtual DOM(layout) it sends changes to another thread(Shadow thread).
  • Shadow thread calculates layout and then sends layout parameters/objects to the main(UI) thread. ( Here you may wonder why we call it “shadow”? It’s because it generates shadow nodes )
  • Since only the main thread is able to render something on the screen, the shadow thread should send the generated layout to the main thread, and only then UI renders.

10.) What are the different types of threads used in React Native?

React Native right now uses 3 threads:

  • MAIN/UI  Thread — This is the main application thread on which your Android/iOS app is running. Changes can take place in the UI of the application by the Main thread and it has access to it .
  • Shadow Thread — layout created using React library in React Native can be calculated by this and it is a background thread.
  • JavaScript Thread — The main Javascript code executes by this thread.

So these were some of the frequently asked React Native Interview Questions and answers

Similar articles – React Native Interview Questions and answers

Leave a Comment

Your email address will not be published.