React Native Interview questions

React Native Interview Questions

  • Sharad Jaiswal
  • 05th May, 2021

About React Native

React Native is a framework we know well which is developed by Facebook. React Native aren't building a "mobile web app" or even a "hybrid app." The same fundamental UI building blocks used by iOS and Android are used by React Native. These building blocks are just put jointly using JavaScript and React. The primary difference between React and React Native as react is used for the web application development whereas react native is used for mobile application development. React native also provides the best features called Hot Reloading which rapidly show the changes in Android and iOS when we made any changes in coding. This definitely reduces the time and its time helpful in further development process.

React Native Interview questions

1) What is React Native?

React Native is an open-source mobile application framework created by Facebook. It is used to develop applications for Android, iOS, Web, and UWP by enabling developers to use React along with native platform capabilities.

2) List some advantages of React Native?

Below are few advantages of React Native

  • Open-source
  • Optimal Performance
  • Code Reusability and Pre-Developed Components
  • Large community
  • Support for Live and Hot Reloading
  • Simple User Interface
  • Support of third party plugins
  • Offers More Stable Apps

3) What is difference between ReactJs and React Native?

The main difference is that ReactJs is used to make websites, whereas React Native is used to make mobile applications. ReactJS is a tool you add to your website, whereas React Native is used to building your mobile apps from the ground up.

Usually, ReactJS is a tool that you can add to your website, to write code in the form of reusable components. This component can be integrated with other technologies, or used with other React components to make your whole page. Usually, you don’t use just react to make a website, as a hierarchy of components passing down information to other components can soon become an entangled mess. You pair it with redux, mobX or whatever other technology you might like to structure your site.

React Native is not a tool that you add to an existing project. React Native is the tool you use to build your mobile phone from the ground up. What React Native does is that allows you to write javascript that calls native code. This allows you to write most of your app in javascript, using components written in javascript (that you can eventually reuse even in your website with minor changes), and components that use native code. React Native also provides you with a lot of components that you can use right away to make your app.

4) In which language React Native is written?

React Native is written in JavaScript, Java, C++, Objective-C, and Python programming language

5) Can we combine native ios or android code in React Native.

Yes, we can. React Native smoothly combines the components written in Objective-C, Java, or Swift.

6) Who uses React Native?

Thousands of apps are created using React Native. Here is the list of some popular companies that are using React Native.

  • Facebook
  • Facebook Ads Manager
  • Instagram
  • F8
  • Airbnb
  • Skype
  • Tesla

You know more from https://facebook.github.io/react-native/showcase.html

7) What is HOC in React Native?

A higher-order component (HOC) is an advanced technique in React Native for reusing component logic. HOCs are not part of the React API. They are a pattern that emerges from React’s compositional nature.

8) What are Components in React Native?

A component in React Native is a very basic element. It is a portion or part of an application that performs a specific functionality. We can divide our large React Native application into many small Components.

The major components in React Native are mentioned below:

  • View: It is in-built and used to display content.
  • State: It is a mutable data type.
  • Props: This is an immutable type of data. This is used to pass data among different components.
  • Style: Styling is one of the most important things in web or mobile application development. It makes the application attractive.
  • Flex Layout: This component is provided to render a clean layout. Flexbox is used to specify the children of the component layout.

9) Which language is used to develop apps in React Native?

Javascript with ES6 syntax and TypeScript is used to develop app in React native.

10) List some basic components of React Native.

Basic components of React Native

  • View: It is the most fundamental component for building a UI. The view is a container that supports layout with flexbox, style, some touch handling, and accessibility controls.
  • Text: A React component for displaying text. It supports nesting, styling, and touch handling.
  • Image: Component to display different types of images, including network images, static resources, temporary local images, and images from local disk, such as the camera roll.
  • TextInput: A foundational component for inputting text into the app via a keyboard.
  • ScrollView: Provides a scrolling container that can host multiple components and views.
  • StyleSheet: It provides an abstraction similar to CSS StyleSheets

11) What does StyleSheet.create do?

A StyleSheet is an abstraction similar to CSS StyleSheets. StyleSheet.create method creates a StyleSheet style reference from the given object.


static create(obj: object): object

12) What is use of XHR Module in React Native?

XHR Module in react Native is used for the implementation of XMLHttpRequest to post data on the server.

13) List some core components of React Native?

Core components of the React Native are as follows

  • View
  • Text
  • ScrollView
  • Image
  • TextInput
  • State
  • props
  • Style
  • layouts
  • Navigators
  • ListView

14) What is Hermes in React Native?

Hermes is an open-source JavaScript engine optimized for running React Native apps on Android. For many apps, enabling Hermes will result in improved start-up time, decreased memory usage, and smaller app size.

15) What is redux?

Redux is an open-source JavaScript library for managing application state. It is most commonly used with libraries such as React or Angular for building user interfaces. Similar to Facebook's Flux architecture, it was created by Dan Abramov and Andrew Clark.

16) What is TypeScript? How to use TypeScript with React native?

TypeScript is a language that extends JavaScript by adding type definitions, much like Flow. While React Native is built-in Flow, it supports both TypeScript and Flow by default.

Run below command to enable Typescript in React Native

npx react-native init MyApp --template react-native-template-typescript

17) What are prop in React Native?

The properties of the React Native components are called props. The props are the parameters that are used to customize different components of the React Native at the time of the creation. These parameters are immutable as they cannot be changed.

You can use the props in your own components. A good example of a prop is the source property of the Image component in the React Native.

18) What is FlexBox in React Native?

React native uses Flexbox to handle the layout. Flexbox makes it easy to distribute the UI elements in the container. It is designed to provide a consistent layout on different screen sizes and works the same way in React Native as it does in CSS on the web, with a few exceptions.

19) What types of mobile apps we can create with React Native?

React Native fits best for creating apps based on

  • Working prototypes
  • Apps with streamlined UI
  • Basic cross-platform apps
  • Apps without heavy use of native APIs

20) What is use of FlatList in React Native?

React Native FlatList is an inbuilt component that is used to make an efficient scrolling list of data. This component displays similar structured data in a scrollable list. It works well for large lists of data where the number of list items might change over time. The FlatList shows only those renders elements which are currently displaying on the screen, not all the elements of the list at once.

21) How to get Geolocation in React Native?

The geolocation API extends the web spec of the geolocation. In android, the Geolocation uses android.location.API.

The following alternative libraries are used to include new Location Services API with the React Native.

  • React-native-geolocation-service
  • React-native-location

To request location access, the following code needs to be included inside the application’s AndroidManifest.xml file.

<uses-permission android:name=”android.permission.ACCESS_FINE_LOCATION”/>

22) Which function is used to pass value between screen in React Native?

props.navigation.navigate() is function is used to pass value between screen in React Native.

23) What are prop and state in React Native?

In a React component, props are variables passed to it by its parent component. State, on the other hand, is still variables, but directly initialized and managed by the component. The state can be initialized by props.

24) What is Gesture Responder System?

The Gesture responder system is an internal system of React Native that manages the lifecycle of gestures in the system.

25) What is webView in React Native?

WebView in React Native is a component that used to load webpages in your app. It was formerly available out of the box in React Native, but it will now be removed from React Native core and added as a component of the React Native Community libraries.

26) How many threads run in React Native?

In a typical react native app, there are either 3/4 main threads running they are UI thread, JS thread, native module thread, and render thread.

27) Enlist few native events available in React Native?

Below is the list of some native events supported by React Native

  • Clipboard Events
  • Composition Events
  • Keyboard Events
  • Focus Events
  • Form Events
  • Mouse Events
  • Pointer Events
  • Selection Events
  • Touch Events
  • UI Events
  • Wheel Events
  • Media Events
  • Image Events
  • Animation Events
  • Transition Events

28) What is use of platform module in React Native?

Platform Module is a React Native module that provides functionality to detects the platform on which the app is running. You can use the detection logic to implement platform-specific code.

29) List some timer related functions available in React Native?

React Native implements the browser timers functions. Below are few Timers function that can be used

  • setTimeout, clearTimeout
  • setInterval, clearInterval
  • setImmediate, clearImmediate
  • requestAnimationFrame, cancelAnimationFrame

30) What is an API in react native?

An application program interface (API) is a set of routines, protocols, and tools for building software applications. API in React Native is used to communicate with external software and servers.

31) What is Axios?

Axios is a Javascript library used to make HTTP requests from node.js or XMLHttpRequests from the browser that also supports the ES6 Promise API.

32) Which database is best for react native?

RealM, Firebase, SQlite, PouchDB, AsyncStorage class, Watermelon DB, Vasern are some best databases that you can use with React-native.

33) What are Refs in React Native?

Refs are a function provided by React to access the DOM element and the React element that you might have created on your own. They are used in cases where we want to change the value of a child component, without making use of props and all.

34) What do you understand by InteractionManager?

The InteractionManager is the native module responsible for deferring the execution of a function until an "interaction" has finished. We can call InteractionManager.runAfterInteractions(() => {...}) to handle this deferral. We can also register our own interactions.

35) What is ListView in React Native?

ListView is a view that contains the group of items and displays in a scrollable list. In React Native ListView is a view component that contains the list of items and displays in a vertically scrollable list. The minimum API to create a list view is ListView.

36) What is AsyncStorage in React Native?

AsyncStorage is an unencrypted, asynchronous, persistent, key-value storage system that is global to the app. It should be used instead of LocalStorage.

37) What are Hybrid Apps?

Hybrid apps are web applications (or web pages) in the native browser, such as UIWebView in iOS and WebView in Android (not Safari or Chrome). Hybrid apps are developed using HTML, CSS and Javascript, and then wrapped in a native application using platforms like Cordova.

38) What does a react native packager do?

React Native packager combines all your Javascript code into a single file, and translates any Javascript code that your device won't understand (like JSX or some of the newer JS syntax). Converts assets (e.g. PNG files) into objects that can be displayed by an Image component.

39) What is ScrollView?

ScrollView in React Native is a generic scrollable container, which scrolls multiple child components and views inside it. In the ScrollView, we can scroll the components in both directions vertically and horizontally. By default, the ScrollView container scrolls its components and views in vertical.

40) What is Animated API?

The Animated API in React Native is designed to concisely express a wide variety of interesting animation and interaction patterns in a very performant way. It focuses on declarative relationships between inputs and outputs, with configurable transforms in between, and start/stop methods to control time-based animation execution.

Animated exports six animatable component types: View, Text, Image, ScrollView, FlatList, and SectionList

41) What are Native Modules in React Native?

A native module in React Native is a set of javascript functions that are implemented natively for each platform.It is used in cases where native capabilities are needed, that react-native doesn't have a corresponding module yet, or when the native performance is better.

42) What is React Navigation?

React Navigation is one of the core component of react-native app. It provides a straightforward navigation solution, with the ability to present common stack navigation and tabbed navigation patterns on both Android and iOS.

43) Which Runtime environment React Native uses?

React Native uses JavaScriptCore, the JavaScript engine as the runtime environment for executing the JavaScript code.

44) How to enable Fast Refresh in React Native?

The Fast Refresh is used to get near-instant feedback for changes that you make in the React components. This feature is enabled by default. Or you can toggle the "Enable Fast Refresh" in the React Native developer menu to start using this feature to see the edits within a second or two.

45) What is Fetch API?

Fetch API in React Native is an API for for handling HTTP requests. This is the same API used in web applications.

46) What is metro bundler in react-native?

Metro bundler is a JavaScript bundler for react-native takes in options, an entry file, and gives you a JavaScript file including all JavaScript files back.

1 comment(s) :

Leave A Comment :

Valid name is required.

Valid name is required.

Valid email id is required.