• At the first start of the app, the main thread starts execution and starts loading JS bundles.
• When JavaScript code has been loaded 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.

Bridge in ReactNative is a layer or simply a connection that is responsible for gluing 
together Native and JavaScript environments.

• The layer which is closest to the device on which the application runs is the Native Layer.

The bridge is basically a transport layer which acts as a connection between Javascript and Native modules, it does the work of transporting asynchronous serialized batched response messages from JavaScript to Native modules.

Now for an example, there is some state change that happens, because of which React Native will batch Update UI and send it to the Bridge. The bridge will pass this Serialized batched response to the Native layer, which will process all commands that it can distinguish from a serialized batched response and will update the User Interface accordingly.

We can create basic buttons using the following syntax: <import { View, Button, StyleSheet } from “react-native”>. Basic buttons support a minimal level of customization and can be modified using TouchableOpacity or TouchableWithoutFeedback.

React Native ListView is a view component that contains the list of items and displays it in a vertically scrollable list.

export default class MyListComponent extends Component {  
constructor() {  
super();  
const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});  
this.state = {  
dataSource: ds.cloneWithRows(['Android','iOS', 'Java','Php', 'Hadoop', 'Sap', 'Python','Ajax', 'C++']), 
};
}  
render() {  
return ( 
<ListView 
dataSource={this.state.dataSource}  
renderRow={  
(rowData) =>  
<Text style={{fontSize: 30}}>{rowData}</Text>} />  
); }  
}

The platform module detects the platform in which the app is running.

import { Platform, Stylesheet } from 'react-native';
const styles = Stylesheet.create({
height: Platform.OS === 'IOS' ? 200 : 400
})

Additionally Platform.select method available that takes an object containing Platform.OS as keys and returns the value for the platform you are currently on.

import { Platform, StyleSheet } from 'react-native';
const styles = StyleSheet.create({
 container: {
flex: 1,
   ...Platform.select({
     ios: {
       backgroundColor: 'red',
     },
     android: {
       backgroundColor: 'green',
     },
     default: {
       // other platforms, web for example
       backgroundColor: 'blue',
     },    }),
},
});

Tapping gestures can be captured by Touchable components and can display feedback when a gesture is recognized.

Depending on what kind of feedback you want to provide we choose Touchable Components.

Generally, we use TouchableHighlight anywhere you would use a button or link on the web. The background of the view will be darkened when the user presses down on the button.

We can use TouchableNativeFeedback on Android to display ink surface reaction ripples that respond to the user’s touch.

TouchableOpacity can be used to provide feedback by reducing the opacity of the button, allowing the background to be seen through while the user is pressing down.

If we need to handle a tap gesture but you don’t want any feedback to be displayed, use TouchableWithoutFeedback.

import React, { Component } from 'react';
import { Platform, StyleSheet, Text, TouchableHighlight, TouchableOpacity, TouchableNativeFeedback, TouchableWithoutFeedback, View } from 'react-native';
export default class Touchables extends Component {
_onPressButton() {
   alert('You tapped the button!')  }
 _onLongPressButton() {
   alert('You long-pressed the button!')
 }
render() {
return (
<View style={styles.container}>
<TouchableHighlight onPress={this._onPressButton} underlayColor="white">
<View style={styles.button}>
<Text style={styles.buttonText}>TouchableHighlight</Text>
</View>
</TouchableHighlight>
);}
}

The FlatList component displays similarly structured data in a scrollable list. It works well for large lists of data where the number of list items might change over time.

Key Feature:

The FlatList shows only those rendered elements which are currently displaying on the screen, not all the elements of the list at once.

import React, { Component } from 'react';  
import { AppRegistry, FlatList,  
   StyleSheet, Text, View,Alert } from 'react-native';  

export default class FlatListBasics extends Component {  
 
   renderSeparator = () => {  
       return (  
           <View  
               style={{  
                   height: 1,  
                   width: "100%",  
                   backgroundColor: "#000",  
               }}  
           />  
       );  
   };  
   //handling onPress action  
   getListViewItem = (item) => {  
       Alert.alert(item.key);  
   }  
 
   render() {  
       return (  
           <View style={styles.container}>  
               <FlatList  
                   data={[  
                       {key: 'Android'},{key: 'iOS'}, {key: 'Java'},{key: 'Swift'},  
                       {key: 'Php'},{key: 'Hadoop'},{key: 'Sap'},  
                   ]}  
                   renderItem={({item}) =>  
                       <Text style={styles.item}  
                             onPress={this.getListViewItem.bind(this, item)}>{item.key}</Text>}  
                   ItemSeparatorComponent={this.renderSeparator}  
               />  
           </View>  
       );  
   }  
}  
AppRegistry.registerComponent('AwesomeProject', () => FlatListBasics);  

One of the popular libraries for routing and navigation in a React Native application is React Navigation.

This library helps solve the problem of navigating between multiple screens and sharing data between them.

import * as React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';

const Stack = createStackNavigator();

const MyStack = () => {
 return (
   <NavigationContainer>
     <Stack.Navigator>
       <Stack.Screen
         name="Home"
         component={HomeScreen}
         options={{ title: 'Welcome' }}
       />
       <Stack.Screen name="Profile" component={ProfileScreen} />
     </Stack.Navigator>
   </NavigationContainer>
 );
};

React Native give us two powerful ways by default to style our application :

1 ) Style props

You can add styling to your component using style props. You simply add style props to your element and it accepts an object of properties.

import React, {Component} from 'react';
import {Platform, StyleSheet, Text, View} from 'react-native';
export default class App extends Component<Props> {
render() {
return (
<View style={{flex:1,justifyContent:"center",backgroundColor:"#fff", alignItems:"center"}}>
<View style={{width:200,height:150,backgroundColor:"red",padding:10}}>
<Text style={{fontSize:20, color:"#666"}}>Styled with style props</Text>
</View>
</View>
);
}
}

 2 )  Using StyleSheet

For an extremely  large codebase or you want to set many properties to your elements, writing our styling rules directly inside style props will make our code more complex that’s why React Native give us another way that let us write a concise code using the StyleSheet method:

import { StyleSheet} from 'react-native';
const styles = StyleSheet.create({
container: {
flex:1,
justifyContent:"center",
backgroundColor:"#fff",
alignItems:"stretch"
},
title: {
fontSize:20,
color:"#fff"
},
item1: {
backgroundColor:"orange",
flex:1
},
item2: {
backgroundColor:"purple",
flex:1
},
item3: {
backgroundColor:"yellow",
flex:1
},

});

 We then  pass the styles object to our component via the style props:

<View style={styles.container}>
<View style={styles.item1}>
<Text style={{fontSize:20, color:"#fff"}}>Item number 1</Text>
</View>
<View style={styles.item2}>
<Text style={{fontSize:20, color:"#fff"}}>Item number 1</Text>
</View>
<View style={styles.item3}>
<Text style={{fontSize:20, color:"#fff"}}>Item number 1</Text>
</View>
<View style={styles.item4}>
<Text style={{fontSize:20, color:"#fff"}}>Item number 1</Text>
</View>
</View>

3 ) styled-components in React Native

We can also use styled-components with React native so you can write your styles in React Native as you write normal CSS. It is very easy to include it in your project and it doesn’t need any linking just run this following command inside the root directory of your app to install it:

yarn add styled-components

import React, {Component} from 'react';
import { StyleSheet,Text, View} from 'react-native';
import styled from 'styled-components'
const Container=styled.View`
   flex:1;
   padding:50px 0;
   justify-content:center;
   background-color:#f4f4f4;
   align-items:center
`
const Title=styled.Text`
font-size:20px;
text-align:center;
color:red;
`
const Item=styled.View`
flex:1;
border:1px solid #ccc;
margin:2px 0;
border-radius:10px;
box-shadow:0 0 10px #ccc;
background-color:#fff;
width:80%;
padding:10px;

`

export default class App extends Component {
 render() {
   return (
     <Container>
            <Item >
            <Title >Item number 1</Title>
            </Item>
            <Item >
            <Title >Item number 2</Title>
            </Item>
            <Item >
            <Title >Item number 3</Title>
            </Item>
            <Item >
            <Title >Item number  4</Title>
            </Item>
     </Container>
   );
 }

• Async Storage is the React Native equivalent of Local Storage from the web.
• Async Storage is a community-maintained module for React Native that provides an asynchronous, unencrypted, key-value store. Async Storage is not shared between apps: every app has its own sandbox environment and has no access to data from other apps.

The core React components include:

• Props: You can use props to pass data to different React components. Props are immutable, which means props can’t change their values.
• ScrollView: ScrollView is a scrolling container that’s used to host multiple views. You can use it to render large lists or content.
• States: You use states to control components. The state is mutable in React, meaning that it can change the value at any time.
• Style: React Native doesn’t require any special syntax for styling. It uses the JavaScript object.
• Text: The text components display text in your application. It uses textInput to take input from the user.
• View: View is used to build the UI for mobile applications. It’s a place where you can display your content.

ReactJS and React native, both are developed and open sourced by Facebook Inc. React native framework follows the React JS framework’s basic architecture. React native also promotes a component-based approach to build mobile screens. All the React natives possess similar lifecycle methods which are exposed by React js component. But still, there are a few differences between ReactJS and React Native

1. We use div, span etc. HTML tags to build the UI of the web application but in case of React Native, we use View, Text imported from React Native library.
2. Since React Native is used to developing for Native platform, we can’t access the browser features like window object, local storage etc…
3. React JS and React native are two different open source project on Github.
4. Any new feature related to component architecture first implement by ReactJS and then support is added in React Native framework.
5. Both have different tooling for getting started with development.

React native comes with static type checking tooling enabled by default but you need to perform few steps to enable flow static type checking in React project.

This is one of the most frequently asked React Native interview questions for freshers in recent times. Understand how to bring out their difference in the most concise manner.

JustifyContent property aligns the flexible container’s items when the items do not use all available space on the main axis. By default, the main axis is a vertical axis in case of React native. Which means justifyContent property aligns child elements of flex parent vertically in React native.  We can use this property to layout elements in a flex container. JustifyContent supports the following values: flex-start|flex-end|centre|space-between|space-around|initial|inherit; It also apply some control over the alignment of items when they overflow the line. Let me explain JustifyContent’s values:

• flex-start: this is the default value for justifyContent. It means that flex items will start from the top and evenly distributed vertically.
• Flex-end: this is just the opposite behaviour of flex-start. Elements start rendering from the bottom
• Center: Items will be placed in the middle
• Space-between: elements are evenly distributed along the main axis (vertical axis)
• Space-around: flex items will be evenly distributed with equal space around them

here are two ways of writing a react component

• Functional component
  • It uses a simple function which returns the JSX
• Class-based component
  • It used the class keyword introduced in ES6. it implements render lifecycle method which returns the JSX.

/* Class based component */
import React, { Component } from 'react';
import { Text } from 'react-native';

export default class Greeting extends Component {
    render() {
        return (
            <Text>Hello {this.props.name} !</Text>
        );
    }
}

/* Functional component */
import React, { Component } from 'react';
import { Text } from 'react-native';

export default function Greeting(props) {
        return (
            <Text>Hello {props.name} !</Text>
        );
}

cases are known as a presentational or dumb component. The functional component gets information via props from its parent component and renders the information. You can see that the functional component accepts props as an argument. ES6 arrow function also is used to define a functional component. The functional component doesn’t store any state and also doesn’t override any lifecycle method of React component. The class-based component has the ability to store state within the component and based on its state value behave differently. The latest version of React 16.8 has included a new feature called React hooks by which we can add state in a functional component.

AsyncStorage is React Native’s key-value, unencrypted storage module that allows developers to store data for offline use. Typically, it’s used to store data when an app is not linked to a cloud service, or when specific features require data storage.

The insertion of basic text in React Native apps is handled by the Text and TextInput components. TextInput allows users to type on the app. We can implement it using the following syntax: <import { Text, TextInput, View } from ‘react-native’>.

There are several useful tricks for optimizing the performance of images in React Native. These include:

• Using image caching tools
• Using PNG or WEBP formats rather than JPEG
• Using smaller images
• Reducing the number of renders