41 React Native Interview Questions (ANSWERED) Developers Must Know

Some benefits of React Native are:

• Known for Optimal Performance
• Can Reuse the Codes and Pre-Developed Components
• Large Community of Developers
• Advantage of Live and Hot Reloading
• Cost Effective Solution
• Offers Simple User Interface
• Support for Third-Party Plugins
• Modular Architecture
• Providing Handy Solutions and Libraries

Hooks are a new addition in React 16.8. They let you use state and other React features without writing a class. With Hooks, you can extract stateful logic from a component so it can be tested independently and reused. Hooks allow you to reuse stateful logic without changing your component hierarchy. This makes it easy to share Hooks among many components or with the community.

• 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).

• 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

• 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. With this setup react native supports new JavaScript (ES6+) features, e.g. arrow functions, async/await etc.
• This famous framework for mobile app development started in the summer of 2013 as Facebook’s internal hackathon project.
• Its first public preview was released in January of 2015 at Reactjs Conference and in March of 2015, Facebook made React Native open and available on GitHub.

ReactJS React has as its main focus Web Development.

• React’s virtual DOM is faster than the conventional full refresh model, since the virtual DOM refreshes only parts of the page.
• We use div, p, span, etc. HTML tags to build the UI of the web application.
• You can reuse code components in React, saving you a lot of time. (You can in React Native too.)
• As a business: The rendering of your pages completely, from the server to the browser will improve the SEO of your web app.
• It improves the debugging speed making your developer’s life easier.
• You can use hybrid mobile app development, like Cordova or Ionic, to build mobile apps with React, but is more efficiently building mobile apps with React Native from many points.

React Native An extension of React, niched on Mobile Development.

• Its main focus is all about Mobile User Interfaces.
• iOS & Android are covered.
• Reusable React Native UI components & modules allow hybrid apps to render natively.
• We use View, Text imported from React Native library.
• No need to overhaul your old app. All you have to do is add React Native UI components into your existing app’s code, without having to rewrite.
• Doesn't use HTML to render the app. Provides alternative components that work in a similar way, so it wouldn't be hard to understand them.
• Because your code doesn’t get rendered in an HTML page, this also means you won’t be able to reuse any libraries you previously used with React that renders any kind of HTML, SVG or Canvas.
• React Native is not made from web elements and can’t be styled in the same way.

Primarily, hooks in general enable the extraction and reuse of stateful logic that is common across multiple components without the burden of higher order components or render props. Hooks allow to easily manipulate the state of our functional component without needing to convert them into class components.

Hooks don’t work inside classes (because they let you use React without classes). By using them, we can totally avoid using lifecycle methods, such as componentDidMount, componentDidUpdate, componentWillUnmount. Instead, we will use built-in hooks like useEffect .

• The properties of React Native components are simply pronounced as props.
• In React Native, most of the components can be customized at the time of their creation with different parameters. These parameters are known as props.
• They are immutable, and they cannot be changed.

import React, { Component } from 'react';  
import {  
  Platform,  
  StyleSheet,  
  Image,  
  Text,  
  View  
} from 'react-native';  
  
export default class App extends Component<{}> {  
  render() {  
    let imagePath = { uri: 'https://facebook.github.io/react-native/img/header_logo.png'};  
    return (  
        <View style={styles.container}>  
          <Text style={styles.welcome}>Welcome to React Native!</Text>  
          <Image source={imagePath} style={{width: 250, height: 250}} />  
        </View>  
    );  
  }  
}  
  
const styles = StyleSheet.create({  
  container: {  
    flex: 1,  
    justifyContent: 'center',  
    alignItems: 'center',  
    backgroundColor: '#a7a6a9',  
  },  
  welcome: {  
    fontSize: 30,  
    textAlign: 'center',  
    margin: 20,  
  }  
});  

Output

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

The first thing React will do when setState is called is merge the object you passed into setState into the current state of the component. This will kick off a process called reconciliation. The end goal of reconciliation is to, in the most efficient way possible, update the UI based on this new state.

To do this, React will construct a new tree of React elements (which you can think of as an object representation of your UI). Once it has this tree, in order to figure out how the UI should change in response to the new state, React will diff this new tree against the previous element tree.

By doing this, React will then know the exact changes which occurred, and by knowing exactly what changes occurred, will able to minimize its footprint on the UI by only making updates where absolutely necessary.

JSX is a syntax notation for JavaScript XML (XML-like syntax extension to ECMAScript). It stands for JavaScript XML. It provides expressiveness of JavaScript along with HTML like template syntax. For example, the below text inside h1 tag return as javascript function to the render function,

   render(){
    	return(
         <div>
            <h1> Welcome to React world!!</h1>
         </div>
    	);
     }

• The state is a data structure that starts with a default value when a Component mounts. It may be mutated across time, mostly as a result of user events.

• Props (short for properties) are a Component's configuration. They are received from above and immutable as far as the Component receiving them is concerned. A Component cannot change its props, but it is responsible for putting together the props of its child Components. Props do not have to just be data - callback functions may be passed in as props.

• 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

• To accommodate different screen sizes, React Native offers Flexbox support.
• To achieve the desired layout, flexbox offers three main properties − flexDirection, justifyContent and alignItems.

• Live reloading reloads or refreshes the entire app when a file changes. For example, if you were four links deep into your navigation and saved a change, live reloading would restart the app and load the app back to the initial route.
• Hot reloading only refreshes the files that were changed without losing the state of the app. For example, if you were four links 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.

• props : are immutable and are set by the parent and they are fixed throughout the lifetime of a component.
• state : is mutable. This means that state can be updated in the future while props can’t. we can initialize state in the constructor, and then call setState when we want to change it.

Some other things to consider:

• Use props to pass data and settings through the component tree.
• Never modify this.props inside of a component; consider props immutable.
• Use props to for event handlers to communicate with child components.
• Use state for storing simple view state like wether or not drop-down options are visible.
• Never modify this.state directly, use this.setstate instead.

By using extraData property on the FlatList component.

 <FlatList
	data={data }
	style={FlatListstyles}
	extraData={this.state}
	renderItem={this._renderItem}
/>

By passing extraData={this.state} to FlatList we make sure FlatList will re-render itself when the state.selected changes. Without setting this prop, FlatList would not know it needs to re-render any items because it is also a PureComponent and the prop comparison will not show any changes.

• With React Native, you style your application using JavaScript.
• All of the core components accept a prop named style. The style names and values usually match how CSS works on the web, except names are written using camel casing, e.g. backgroundColor rather than background-color.
• The style prop can be a plain old JavaScript object. That's the simplest and what we usually use for example code.
• You can also pass an array of styles - the last style in the array has precedence, so you can use this to inherit styles.

As a component grows in complexity, it is often cleaner to use StyleSheet.create to define several styles in one place. Here's an example:

const styles = StyleSheet.create({
	container:  {
		borderRadius:  4,
		borderWidth:  0.5,
		borderColor:  '#d6d7da',
	}, 
	title:  {
		fontSize:  19,
		fontWeight:  'bold',
	}, 
	activeTitle:  {
		color:  'red',
	},
});

<View style={styles.container}>
	<Text style={[styles.title, this.props.isActive && styles.activeTitle]} /> 
</View>

Flexbox works the same way in React Native as it does in CSS on the web, with a few exceptions. The defaults are different, with flexDirection defaulting to column instead of row, and the flex parameter only supporting a single number.

Option 1:

const customData = require('./customData.json');

and then access customData like a normal JS object.

Option 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'

• React components has a built-in state object.
• The state object is where you store property values that belongs to the component.
• When the state object changes, the component re-renders.

Example:

import React, { Component } from 'react';
import { Text, View } from 'react-native';

class Blink extends Component {

  componentDidMount(){
    // Toggle the state every second
    setInterval(() => (
      this.setState(previousState => (
        { isShowingText: !previousState.isShowingText }
      ))
    ), 1000);
  }

  //state object
  state = { isShowingText: true };

  render() {
    if (!this.state.isShowingText) {
      return null;
    }

    return (
      <Text>{this.props.text}</Text>
    );
  }
}

export default class BlinkApp extends Component {
  render() {
    return (
      <View>
        <Blink text='I love to blink' />
        <Blink text='Yes blinking is so great' />
        <Blink text='Why did they ever take this out of HTML' />
        <Blink text='Look at me look at me look at me' />
      </View>
    );
  }
}

• View is the most fundamental component for building a UI in react native.
• View is a container that supports layout with flexbox, style, some touch handling, and accessibility controls.
• View maps directly to the native view equivalent on whatever platform React Native is running on, whether that is a UIView, <div>, android.view, etc.
• View is designed to be nested inside other views and can have 0 to many children of any type.
• This example creates a View that wraps two colored boxes and a text component in a row with padding.

class ViewColoredBoxesWithText extends Component {
  render() {
    return (
      <View
        style={{
          flexDirection: 'row',
          height: 100,
          padding: 20,
        }}>
        <View style={{backgroundColor: 'blue', flex: 0.3}} />
        <View style={{backgroundColor: 'red', flex: 0.5}} />
        <Text>Hello World!</Text>
      </View>
    );
  }
}

Virtual DOM

Virtual DOM is about avoiding unnecessary changes to the DOM, which are expensive performance-wise, because changes to the DOM usually cause re-rendering of the page. Virtual DOM also allows to collect several changes to be applied at once, so not every single change causes a re-render, but instead re-rendering only happens once after a set of changes was applied to the DOM.

Shadow DOM

Shadow dom is mostly about encapsulation of the implementation. A single custom element can implement more-or-less complex logic combined with more-or-less complex DOM. An entire web application of arbitrary complexity can be added to a page by an import and <body><my-app></my-app> but also simpler reusable and composable components can be implemented as custom elements where the internal representation is hidden in the shadow DOM like <date-picker></date-picker>.

Keys help React identify which items have changed, are added, or are removed. Keys should be given to the elements inside the array to give the elements a stable identity:

Example:

const numbers = [1, 2, 3, 4, 5];
const listItems = numbers.map((number) =>
  <li key={number.toString()}>
    {number}
  </li>
);

When React reconciles the keyed children, it will ensure that any child with key will be reordered (instead of clobbered) or destroyed (instead of reused).

• 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 (by setting the horizontal property).
• ScrollView renders all its react child components at once, but this has a performance downside.