Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

100+ Best React Native Interview Questions and Answers (2020)

In this post, we created a guide on essential React Native interview questions with answers. The questions are organized into different sections for easy browsing - Easy for beginners, Intermediate for 1-2 year experienced candidates and Advanced for 2+ years experience. You can also search and filter the questions by topic.

If you are recruiter, you can use our React Native Online Test for screening candidates before taking them to second round interviews.
What are Pure Components?

Pure components are the simplest and fastest components which can be written. They can replace any component which only has a render(). These components enhance the simplicity of the code and performance of the application.

What is List View?

List view is a core component of React Native which displays vertically scrolling lists.

What is Virtual DOM?

Virtual dom is an in-memory tree representation of the real DOM with lightweight elements. It provides a declarative way of DOM representation for an app and allows to update UI whenever the state changes.

What are some ways of styling a react native component?
  • Inline styling
  • StyleSheet
  • Styled Components
What is the difference between RCT & RNT?
  • RNTLet’s say you want to use your own custom code written in iOS or Android. You have to prefix your native files with RNT.

  • RCTThe native React libraries provided by Facebook are prefixed with RCT.

List 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.
What is JSX?

JSX is a way for writing xml code along with javascript, known as javascript extension. It is used most of the time to create react native user interfaces.

What are native apps?
  • Native mobile apps are the most common type of app.
  • They are built for specific platforms and are written in languages that the platform accepts. For example, Swift and Objective-C for native iOS apps and Java or Kotlin for native Android apps.
  • Native apps are also built using the specific Integrated Development Environment (IDE) for the selected operating systems
What is Render () in React Native?

It is mandatory for every react native component to have a render (). One single react element is returned by Render that is representation of native DOM component.

What is networking?

It provides Fetch Functions to request Http Requests to another server.

What are the advantages of native apps over hybrid apps?
  • They work efficiently as they are built for that specific platforms.
  • Native apps are responsive on all the platform-specific devices.
  • They are very fast and the best in the app performance.
  • Native apps better integrate with mobile hardware.
  • They have interactive and intuitive User Interface (UI) and User Experience (UX) as per the user expectations based on specific platforms.
  • Some of the Native mobile apps work even without the Internet connection.
  • Native apps are secured and reliable.
  • They can easily access or utilize the other device-specific capabilities like GPS, Camera, Contacts, etc.
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.

Name at least one style property that can increase tappable area around an element.
  • Padding (and also paddingVertical, ...Horizontal, ...Left, ...Right, ...Top, ...Bottom).
  • minHeight and minWidth.
  • hitSlop.
  • Make Tappleble areas larger.
What are components of Redux?
  • Action
  • Reducer
  • View
  • Store
Name a few companies that are built using React Native.

Facebook, Airbnb, Instagram, Pinterest, Tesla, Uber, etc.

What is difference between React Component and React Element?

React Component is either a class or a function which accepts input data, and returns React element. On the other hand, react element does not create react component, but instead it only displays its look.

How to test if a node_modules would run on React Native? do you know which will run fine?

All node_modules, as any real javascript library, would run fine if they don’t rely upon Node.js run-time modules or web-specific intentions. There is no defined way to test the compatibility of any node_modules.

What are best UI Components for React Native?
  • Material UI
  • React Bootstrap
  • Semantic UI
  • React Toolbox
  • Ant Design
What is the difference between React Js and React Native?

React Js:ReactJs is a JavaScript Library used for developing apps in HTML5 using JavaScript as the developing language.React Native:React Native is used to develop native mobile apps using JavaScript as the development language.

What is the storage system in React Native?

React Native uses AsyncStorage class to store data in key-value pair which is global to all app.

What are navigators?

These are used to change from one scene to another scene.

What is React Native?
  • React Native is a mobile app development framework that enables the development of multi-platform Android and iOS apps using native UI elements.
  • It is based on the JavaScriptCore runtime and Babel transformers.
  • This famous framework for mobile app development started in the summer of 2013 as Facebook’s internal hackathon project.
Tell us some options of storing persisting data in a react native app.
  • Async Storage (""built-in"" to React Native)
  • SQLite
  • Realm
  • Firebase
  • MongoDB
What is Scrollview?

It helps in viewing the large content using a scrollbar.

What is props in React Native?

Props are parameters which are used to customise a component at the time of creation and on re-render. Props are like arguments passed to a React component.

Can we combine native ios or android code in React Native?

Yes. iOS and Android can be combined in React Native.

What is the use of XHR module in React Native?

XHR HttpRequest is an API, which is utilized for implementation of HttpRequest in order to post data on a server.

How does React Native deals with a variety of screen sizes?
  • Flexbox provides uniform layout on screen with different sizes using its three properties: justify-content, flex-direction, alignItems.
  • Dimensions can style the page accurately on screen with different sizes.
  • Pixel ratio class can be utilized to access the pixel density of the device and render the image accordingly.
  • The aspect ratio sets the height.
  • Scrollview, a scrolling container that contains multiple components and can be scrolled both vertically and horizontally.
What are animations? How will they work in React Native?

Animations are manipulative images or objects that appear as moving objects. We can use animations with React Native API, Animated.decay, Animated.parallel and Animated.stagger.

How is React Native different from other frameworks for developing a mobile application?
  • React Native app is a real mobile app, not a web app running inside a mobile app shell. Other alternative like Cordova, ionic run a web app in a web view.
  • React Native app is converted into machine code which runs on mobile that is why it gives better performance than other alternatives.
  • React Native mobile apps are more close to Native app development in comparison to other Javascript frameworks
  • Mobile application built with React native has small bundle size in comparison to older hybrid application development framework.
Is there browser IDE for react native?

Yes, there are Browser IDE for React Native.

What is Flex?

Flex or flex boxing is a technique to distribute different components in react native apps. You can distributes react native views horizontally, vertically, provide space in between or space around.

What determines the size of a component and what are the ways?

The height and width determine the size of component on the screen.Two different ways to set height and width.

  • Fixed Dimensions
  • Flex Dimensions
What is Render?

Render Props is a technique in which react components are transformed into DOM nodes which are understood by the browser.

Will react native support html?

React Native does not support HTML.

What are the disadvantages of using React Native?
  • 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.
What is Cross platform application development?

Cross Platform Application Development is a platform for creating different software which are supported by multiple mobile operating systems.

Why does React Native use Redux?

Redux is a standalone state management library that React Native use to simplify data flow within an app.

How does React Native load data on Server?

React Native consumes Fetch API to load data on the Server when needed.

How can you improve the performance (load speed, rendering quality) of images?
  • Server-side compression
  • Third-party tools such as Cloudinary
  • Image caching
What are the advantages of using React Native?
  • 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.
What are hybrid apps?
  • Hybrid mobile apps are applications that are installed on a device, just like any other app.
  • Hybrid apps are deployed in a native container that uses a mobile WebView object. When the app is used, this object displays web content thanks to the use of web technologies (CSS, JavaScript, HTML).
How do you run a React Native app on Android?
  • First, enable the USB Debugging option inside the Developer Options.
  • Plug the device via USB to the development machine.
  • Run adb devices command to check that the device is correctly connected to ADB
  • Now install and launch your app by using the below-given command: $ react-native run-android
What is the difference between controlled and uncontrolled components?

If the value displayed on UI by the Component is determined by form input, then it is called a controlled component. On the other side, if the State determines the value, then it is called an uncontrolled component.

What is Style?

Style is a core component used in React Native. To make an app look stylish, we use Style Core Component to decorate it.

Why do we use curly brace while importing some library?

Curly braces are used to import small pieces of library.

What is Flexbox?

Flexbox is used to give a consistent layout on different screen sizes.

What are the other modules need for react native navigation?
  • react-native-gesture-handler
  • react-native-reanimated
  • react-native-screens
  • react-native-safe-area-context
  • react-navigation-stack
What are the similarities between React and React Native?

Both, React and React Native uses

  • React Lifecycle Methods
  • Recat State and Props
  • Recat Components
  • Redux Library
Who is Founder of React Native?

Jordan Walke (Facebook) is founder of React Native.

What were the major problems with MVC framework?
  • Applications were slow and inefficient.
  • There was huge memory wastage
  • Because of circular dependencies, a complicated model was created around models and views.
How can you pick up camera images in React Native?

React Native Image Picker is a module, which helps you in picking images from your library or directly from camera.

What are the types of data that control a component?
  • There are two types of data that control a component: props and state.
  • props are set by the parent and they are fixed throughout the lifetime of a component. For data that is going to change, we have to use state.
What are keys used for in React Native?

Keys are used for making a component unique after a change.

What is view?

It is defined as a container, which supports layouts such as some touch handling, flexbox and more.

What does NPM stand for?

NPM stands for Node Package Manager.

How does Virtual DOM work in React Native?
  • Diffing: Virtual DOM tree is updated, and React Native compares previous and present version of Virtual DOM. This is called diffing.
  • Updating Real DOM: When diffing has been done, react native updates those changes only in real DOM.
What is the point of StyleSheet.create() in React Native?

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

are React components usable in React Native?

Yes, React components are used in React Native.

How many threads run in React Native?
  • 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.
What are Refs used for in React Native?

Refs provide you direct access to a DOM element or a components instance.

What does NPM do?

npm is a line interface program. It installs command line interface in React Native.

What are the steps to create your first React Native Apps?
  • First, to create native app:npm install -g create-react-native-app

  • Create your first React Native App:create-react-native-app myFirstProject

  • Now, navigate to the project directory:cd myFirstProject

  • Run the following command:npm start

What is state in a React component?

State is another way apart from props by which we can modify a React component. React component’s state value changes in the life cycle of component, unlike props. We should not directly change state value of react component. React framework gives the setState method by which state of a component should be changed.

How do you tell React to build in production mode and what will that do?

Typically you’d use Webpack’s DefinePlugin method to set NODE_ENV to production. This will strip out things like propType validation and extra warnings. It is also a good idea to minify your code because React uses Uglify’s dead-code elimination to strip out development only code and comments, which will drastically reduce the size of your bundle.

When would you prefer a class component over functional component?

A Class component is used when a component has state and lifecycle, otherwise a functional component is used.

Is React Native Open Source?

Yes. React Native is Open-Source Mobile Network Application Framework.

What strategy would you use to optimize a large list of items on FlatList?
  • Use PureComponent on renderItem with bind methods.
  • Add keyExtractor property.
  • Add pagination.
  • Define getItemLayout.
  • Define removeClippedSubviews true.
When do you use a TouchableHighlight?

The TouchableHighlight can be used where you would use a button or link on the web. The background of this component becomes dark on pressing it.

How do you re-render a FlatList?

By using extraData property on the FlatList component. By passing extraData={this.state} to FlatList we make sure FlatList will re-render itself when the state.selected changes.

do you know about FlatList in React Native and its advantage over scrollview?

FlatList is a component used to display a line of data. FlatList is often used to display long lost of data where the number of items could fluctuate. It renders only the element in focus on the screen, not the whole list, thus it is better to use FlatList rather than scrollview.

Have you heard of Listview?

It comprises of a list of items that are displayed in a scrollable vertical list. It is a core React native Component.

What is Axios in React Native?

With the help of Axios, the user can send GET, POST, PUT, and DELETE requests to the REST API and render a response to the application.

Why animations very clear and important in React Native?

The animated API of Native React is designed to be serialized. That means users can send animation to native without having to go through the bridge on every frame. Once the animation gets started, the JS thread will be blocked, and the animation will run smooth. Due to the code is converted to native views before rendering, the animation will run smoothly in React native

How can you keep animations from being blocked on the JavaScript thread? Describe how this works and explain some of the limitations.
  • By adding useNativeDriver: true to the animation options.
  • It works by passing the animation to the native thread where it will not be blocked by the JavaScript thread.
  • This will work on non-layout properties like opacity and transform, but will not work on things like flex, or position.
What is a Fragment and why would you use one?
  • A fragment is a way of grouping JSX elements together without adding to the render tree by wrapping them in an additional view.
  • A good example of where to use a fragment is in a dedicated component of a screen where no additional container styling is needed.
  • The benefits of using a fragment is less complex styling in some cases and less complex rendering.
What is the use of ScrollView component?
  • The ScrollView is a generic scrolling container that can contain multiple components and views. The scrollable items need not be homogeneous, and you can scroll both vertically and horizontally.
  • ScrollView renders all its react child components at once, but this has a performance downside.
Can you provide some ideas on how to prevent memory leaks in your app?
  • Release timers/listeners added in componentDidMount.
  • Handle closure scope.
List the difference between React Native and Xamarin.

Using Xamarin, you can build iOS, Android Windows, and Mac apps. That means it is a cross-platform framework, but it uses c# for development rather than javascript, unlike React native.

What is Style Vs Stylesheet in React Native?
  • Style is a set of attributes used to design the UI part of the application. It consists of colors, strings, layouts, etc. The style in React Native is similar to CSS in HTML.
  • A stylesheet is a group of styles. The stylesheet is used when grows in size then its cleaner approach put all styles in a single place.
When would you use ScrollView over FlatList or vice-versa?
  • do you need to render a list of similar items from an array or the data is very big? Use FlatList.
  • do you need to render generic content in a scrollable container and the data is small? Use ScrollView.
What does TouchableHighlight do?

TouchableHighlighy is a wrapper for making views respond properly to touches. On press down, the opacity of the wrapped view is decreased, which allows the underlay color to show through, darkening or tinting the view. TouchableHighlight must have one child.

How are Hot Reloading and Live Reloading in React Native different?
  • Live reloading reloads or refreshes the entire app when a file changes.
  • Hot reloading only refreshes the files that were changed without losing the state of the app.
What is the use of a React native packager?
  • Merging all the code into one javascript file.
  • It is capable of translating the js code that your device has trouble understanding.
  • The conversion of an image in an object is done by React native packager.
Which database is best for react native?

SQLite database is best for react native.

Why is the InteractionManager important?

React Native has only one thread for making UI updates which can be overloaded and result in drop frames. Developers use interaction manager to ensure that the function is only executed after the animations occurred so that any frame drops may not result.

What do you mean by component-driven development?

The process of breaking the entire UI into various minor reusable components and developing them alone. Thus building entire UI by adding those independently built reusable components. It leads to faster and robust development of applications. It results in less code, thus less maintenance and fewer bugs to fix.

What is Fabric in React Native?

Fabric is the new React Native architecture proposed by the community to make the mobile application user experience close or even better than the native apps.

What are features of presentational/dumb components?
  • are concerned with how things look.
  • Have markup and styles of their own.
  • Have no dependencies on the rest of the app, such as Redux stores.
  • don’t specify how the data is loaded or mutated.
  • Receive data and callbacks exclusively via props.
  • Rarely have their own state (when they do, it’s UI state rather than data).
What is meant by HOC in React Native?

HOC is a technique in React Native, which allows you to reuse component logic. HOC takes a component, and gives back new component.

What happens if you edit a module that only exports React components in Fast Refresh?

If you edit a module that only exports React component(s), Fast Refresh will update the code only for that module, and re-render your component. You can edit anything in that file, including styles, rendering logic, event handlers, or effects.

What is Render Props Pattern?

Render Props pattern is to share data and functionality between components without repeating code.Besides sharing the data and functionality of the shared component, render props enabled developer to have the full control of the component rendering.

What are the 3 principles of the Fabric Architecture of React Native?
  • Prioritizing the Tasks
  • Immutable Shadow Tree
  • Reducing Memory Consumption
What are Smart/Container components?

Smart component keep track of state and concern with how things work. Container component still receives data or function via props and can pass it to another smart component or dumb component as props.Container component pattern is class-based components and have constructor() functions.

Explain the re-architecture of React Native and the importance of the changes?
  • Facebook is working internally to change the way Javascript interfaces with Native Modules. This is an overhaul of the UI-Layer, it’s codenamed “Fabric”
  • TurboModules will be the next iteration of NativeModules. Importantly this will ensure native modules are loaded eagerly instead of all at once avoiding startup overhead
  • Also, TurboModules can be called synchronously avoiding asynchronous calls across the RN bridge
  • Along with this change the core of React Native is going lean. Which means many libraries such as Async Storage, Geolocation and Device information are moving to separate repositories
What JavaScript engine does React native use?

In most cases, React Native will use JavaScriptCore, the JavaScript engine that powers Safari.

What are the features of Container/Smart components?
  • are concerned with how things work.
  • don’t usually have any markup of their own except for some wrapping Views, and never have any styles.
  • Provide the data and behavior to presentational or other container components.
  • Call Redux actions and provide these as callbacks to the presentational components.
  • are often stateful, as they tend to serve as data sources.
  • are usually generated using higher order components such as connect() from React Redux, createContainer() from Relay, or Container.create() from Flux Utils, rather than written by hand.
In Fast Refresh, what will happen if you edit files imported by modules outside of the React Tree?

If you edit a file that's imported by modules outside of the React tree, Fast Refresh will fall back to doing a full reload.

What is the Gesture Responder System?

Gesture Responder System is a system that manages the lifecycle of the applications which are built in React- Native framework.

What are Presentational/Dumb components?

This component only responsible to present something to DOM. There will be no logic at all inside this component therefore it is called dumb component.Because dumb component only focus on the presentation, it is ideally will the most reusable component.

What is meant by InteractionManager?

InteractionManager is native module in react native, which helps animations run smoothly in reactive native.

do you know how can you detect memory leaks on the app?

Xcode and Android studio provide tools to track the memory used by an app. These tools can be used to test the app on both devices and simulators.

What is "Fast Refresh"?

Fast Refresh is a React Native feature that allows you to get near-instant feedback for changes in your React components. Fast Refresh is enabled by default, and you can toggle ""Enable Fast Refresh"" in the React Native developer menu.

What happens if you edit a module where the exports aren't React components in Fast Refresh?

If you edit a module with exports that aren't React components, Fast Refresh will re-run both that module, and the other modules importing it. So if both Button.js and Modal.js import Theme.js, editing Theme.js will update both components.

This post first appeared on Adaface, please read the originial post: here

Share the post

100+ Best React Native Interview Questions and Answers (2020)


Subscribe to Adaface

Get updates delivered right to your inbox!

Thank you for your subscription