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.

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

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

Works across multiple platforms. Unified development. Faster build and lower cost of development. Easier to make changes and update.

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.

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 , , 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>
);
}
}

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.

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.

Autolinking is a mechanism built into the react-native-cli that allows adding a dependency with native components for React Native to be as simple as:

// install
yarn add react-native-webview
cd ios && pod install && cd ..
// CocoaPods on iOS needs this
extra step
// run
yarn react-native run-ios
yarn react-native run-android
Autolinking is a replacement for react-native link that brings new features (such as ability to easily integrate
native dependencies on iOS) and fixes some of the long-standing issues.

Fast Refresh preserves React local state in function components (and Hooks) by default. Fast Refresh always remounts class components without preserving state. This ensures it works reliably. Fast Refresh automatically retries rendering after a file is saved.

// @refresh reset comment can be used to reset the React state on every edit.

To improve UX, every action should have the following attributes: Feedback/highlighting- show the user what is handling their touch, and what will happen when they release the gesture Cancel-ability- when making an action, the user should be able to abort it mid-touch by dragging their finger away These features make users more comfortable while using an app, because it allows people to experiment and interact without fear of making mistakes.

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.

Fast Refresh will update the code only for that module, and re-render that component. Anything can be edited in that file, including styles, rendering logic, event handlers, or effects.

It is a React Native feature that allows you to get near-instant feedback for changes in your React components. Most edits should be visible within a second or two.

Fast Refresh will fall back to doing a full reload. For a file which renders a React component but also exports a value that is imported by a non-React component, consider migrating the query to a separate file and importing it into both files. This will re- enable Fast Refresh to work.

AppRegistry is the JS entry point to running all React Native apps. App root components should register themselves with AppRegistry.registerComponent , then the native system can load the bundle for the app and then actually run the app when it's ready by invoking AppRegistry.runApplication . AppRegistry should be required early in the require sequence to make sure the JS execution environment is setup before other modules are required.

When several components need to share the same changing data then it is recommended to lift the shared state up to their closest common ancestor. That means if two child components share the same data from its parent, then move the state to parent instead of maintaining local state in both of the child components.

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.

TouchableHighlight darkens or lightens the background of the element when pressed. It is mostly used on iOS for touchable elements or buttons that have a solid shape or background, and on ListView items.

Consider:

The most fundamental user interaction on a mobile app is the touch. React Native provides 4 separate components for handling touch interactions TouchableHighlight TouchableOpacity TouchableNativeFeedback TouchableWithoutFeedback

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'

Use console.log , console.warn etc. Use console.debug("text"); to see the logs inside the terminal. Steps: Run the application: react-native run-ios

For iOS

react-native run-android

For Android

Run the logger: react-native log-ios

For iOS

react-native log-android

For Android

FlatList renders items lazily, when they are about to appear, and removes items that scroll way off screen to save memory and processing time. The FlatList component displays a scrolling list of changing, but similarly structured, data. FlatList works well for long lists of data, where the number of items might change over time. Unlike the more generic ScrollView , the FlatList only renders elements that are currently showing on the screen, not all the elements at once.

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.

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

The flex property styles the component to expand and shrink it dynamically according to available space unlike fixed dimension where a specific height, width is specified. Setting flex: 1 will fill all the available space to the component, and shared evenly among the other components of same as the parent. Higher the flex value, occupy component higher ratio of space compared to its siblings. Example:

import React, { Component } from 'react';
import { View } from 'react-native';
export default class FlexDimensionsBasics extends Component {
  render() {
    return (
    <View style={{flex: 1}}>
    <View style={{flex: 1, backgroundColor: 'powderblue'}} />
    <View style={{flex: 2, backgroundColor: 'skyblue'}} />
    <View style={{flex: 3, backgroundColor: 'steelblue'}} />
    </View>
  );
}
}

Output:

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

const styles = StyleSheet.create({
  container: {
    borderRadius: 4,
    borderWidth: 0.5,
    borderColor: '#d6d7da',
  },
title: {
  fontSize: 19,
  fontWeight: 'bold',
},
activeTitle: {
  color: 'red',
},
});
Use a StyleSheet:
<View style={styles.container}>
<Text style={[styles.title, this.props.isActive && styles.activeTitle]} />
</View>

StyleSheet are useful because: By moving styles away from the render function, you're making the code easier to understand. Naming the styles is a good way to add meaning to the low level components in the render function.

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>

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.

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>
  );
}
}

Higher Order Component (HOC) is useful when you want to inject additional behaviours to the existing Component . You can use HOC to inject: React Lifecycle (eg. execute code in componentWillMount )

State (eg. react-redux’s connect)
Component (Parent Component, Child Component, Sibling Component)
Style

Languages that compile to JavaScript are generally compatible with React Native. React Native uses Babel to transform JavaScript into a form that is consumable by the native OS’s JavaScript runtime, using the react-native Babel plugin. As long as Babel can compile your JavaScript, and your code does not rely on web- or Node.js-specific dependencies, it will run in React Native.

React Native uses two engines. JavaScriptCore engine is used primarily, which Safari browser runs on. V8 engine is used when using Chrome debugging. All JavaScript code runs within Chrome itself, communicating with native code via WebSockets.

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

Needs Android Studio and/or XCode to run the projects You can't develop for iOS without having a mac. Device has to be connected via USB to use it for testing. Fonts need to be imported manually in XCode. If you want to share the app you need to send the whole .apk / .ipa file Does not provide JS APIs out of the box, e.g. Push-Notifications, Asset Manager, they need to be manually installed and linked with npm for example Setting up a working project properly (inlcuding device configuration) is rather complicated and can take time.

Basically, Javascript communicates with native components (Java on Android, Objective C on iOS, C# on Windows). The communication occurs through the so-called "bridge". If at any time you feel that this communication slows things down too much, you can choose to implement the Javascript functionality in Java, Objective C or C# respectively in order to run purely native. In this case, you are writing directly in native code, so there's no Javascript to native compilation.

React Native comes with the Animated API built in. This API is declarative: We define specific animations, using Animated.timing , Animated.spring , etc., and provide the exact parameters needed for the animation to run. This technique falls apart when we need lots of subtle and delicate animations on the fly; it’s not performant, and maintaining all that code would be a nightmare. Instead, we look to the LayoutAnimation module, which is an interpolative API. We can invoke predefined LayoutAnimation s, or define our own. LayoutAnimation watches changes in the positions of elements between cycles of the render loop, and computes the positional differences between elements at different cycles. Then, it interpolates those changes and produces a smooth, natively driven animation.

Components whose only job is to render a view according to the styling and data passed to them. They do not contain any business logic They don't have direct access to data stores. Data is passed to them via props . Example of a dumb component.

import React, {Component} from 'react';
import {View} from 'react-native';
import styles from './Header.component.style';
class Header extends Component {
  render () {
    const {title, subtitle} = this.props;
    return (
    <View style={styles.container}>
    <View style={styles.titleHeading}>{title}</View>
    <View style={styles.subtitle}>{subtitle}</View>
    </View>
  );
}
}
export default Header;

React components which have access to the store. These components make API calls, do processing and contain the business logic of the app. The job of container components is to compute the values and pass them as props to the presentational components Consider:

import React, {Component} from 'react';
import Header from '../component/Header.component';
class Home extends Component {
  calculateSomething = () => {
    ...some calculation / api calls....
  }
render () {
  const {title, subtitle, goToLogin} = this.props;
  return (
  <Header title={title} subtitle={subtitle} goToLogin={goToLogin} calculateSomething=
  {this.calculateSomething}/>
);
}
}
const mapStateToProps = (state)=>{
  return {
    title: state.title,

    subtitle: state.subtitle
  };
};
const mapDispatchToProps = (dispatch) => {
  goToLogin: () => dispatch({action:'GO_TO_LOGIN'})
};
export default connect(mapStateToProps, mapDispatchToProps)(Home);

Contaner components are: 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.

React Native UI Thread (Main Thread): Used for the layout of the mobile app. React Native JavaScript Thread: Thread where business logic will run. It is where the JavaScript code is executed. React Native Modules Thread: Sometimes, the app may need to access the 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.

It performs the following functionalities: Transpile and bundle all the JavaScript code into a single file. Convert the assets (e.g., PNG file) used in the project into objects, which can be displayed by an Image component.

A touch event has three phases: start, move and release.

1. Request A view can request to become the touch responder in the: start phase by returning true from onStartShouldSetResponder move phase by returning true from onMoveShouldSetResponder
2. Bubbling Similar to the web, these negotiation functions are called in a bubbling pattern. Therefore, the deepest component will become the responder.
3. Override However, a parent can choose to override and claim responsibility. This is done by returning true from either onStartShouldSetResponderCapture or onMoveShouldSetResponderCapture .
4. Granted or Rejected If a view's request is granted or rejected onResponderGrant or onResponderReject is invoked appropriately.
5. Respond Finally the view can then respond using one of the following handlers: onResponderMove onResponderRelease onResponderTerminationRequest onResponderTerminate After a view has successfully claimed touch responder status, its relevant event handlers may be called.

AsyncStorage is a simple, asynchronous key-value pair used in React Native applications. It is a local only storage. It comes in two parts: core and storage backend. Core is a consumer of the storage, provides you a unified API to save and read data. Storage backend implements an interface that core API understands and uses. Its functionality depends on storage itself. Usage:

import AsyncStorage from '@react-native-community/async-storage';// Store data
storeData = async () => {
  try {
    await AsyncStorage.setItem('@storage_Key', 'stored value')
  } catch (e) {
    // saving error
  }
}// Read data
getData = async () => {
  try {
    const value = await AsyncStorage.getItem('@storage_Key')
    if(value !== null) {
      // value previously stored
    }
} catch(e) {
  // error reading value
}
}

ScrollView renders all its react child components at once, but this has a performance downside while FlatList renders items lazily, when they are about to appear, and removes items that scroll way off screen to save memory and processing time. FlatList is built to render a large list of items. ScrollView is built to render a generic content in a way that it scrolls when the content is bigger than the ScrollView itself. FlatList is optimized to have very good performances with very large arrays because it actually only renders the items that need to be displayed at the moment while ScrollView does not provide the same optimization of the flat list for very long content. Component state is not maintained with the FlatList component but component state is maintained with ScrollView This is due to the fact that ScrollView renders all the children in one go and maintains them. Meanwhile, FlatList unmounts components once they are way off the screen and recreates them from scratch once the item comes back from screen (thus state is lost).

Faster development: Separating development into components lets you build modular parts with narrowly- focused APIs. Simpler maintenance: When you need to modify or update a part of your application, you can extend or update the component instead of having to refactor larger parts of your application. Better reusability: Through the separation of concerns components can be reused and extended to build multiple application instead of having to rewrite them over and over again Better TDD: Larger systems can be more easily tested as it’s easier to understand and separate the responsibilities of every part of the system. Shorter learning curves: It’s much easier to learn and understand the structure of a defined component than dive into an entire application. Better modeling of the system: When a system is composed out of modular components, it’s easier to grasp, understand and operate on.

A component is a well-defined and independent piece of our app’s UI. A chat window, a button, a slider are all components. Components can also be composed out of smaller components and fragments. Each is a building block. Modern frameworks such as React, Vue, React Native, etc. let us build our applications through modular components, providing the patterns and tools needed to develop each component in separation and compose them together. Component-driven development means designing your software applications by building loosely-coupled independent components. Each component has an interface to communicate with the rest of the system, and multiple components are composed together into a modular application.

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 React Native Props

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 React Native Props

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

We can use: Inline styling StyleSheet Styled Components

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

The gesture responder system manages the lifecycle of gestures in an app.

Some popular options are: Async Storage ("built-in" to React Native) SQLite Realm Firebase MongoDB

Using Keyboard.dismiss()

import { Keyboard } from 'react-native'// Hiding the keyboard
Keyboard.dismiss()

You can use this command

if (__DEV__) {
  console.log('I am in debug');
}

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

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

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 .

Components are the building blocks of any React application. Components let you split the UI into independent, reusable pieces, and think about each piece in isolation. React Native provides a number of built-in components. Some are:- Basic Components User Interface List Views iOS-specific Android-specific

JSX is an XML/HTML-like syntax used by React that extends ECMAScript so that XML/HTML-like text can co- exist with JavaScript/React code. The syntax is intended to be used by preprocessors (i.e., transpilers like Babel) to transform HTML-like text found in JavaScript files into standard JavaScript objects that a JavaScript engine will parse.

const nav = (
<ul id="nav">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Clients</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
);

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.

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.

Yes, just like Virtual DOM in React, React Native creates a tree hierarchy to define the initial layout and creates a diff of that tree on each layout change to optimize the renderings. Except React Native manages the UI updates through couple of architecture layers that in the end translate how views should be rendered while trying to optimize the changes to a minimum in order to deliver the fastest rendering possible.

The key tradeoff with StyleSheet.create method is that recomputing styles based on external criteria (like screen rotation or even a user-selected viewing mode) needs some infrastructure built to determine which styles to use. If objects were passed in “raw” they could be recomputed on the fly every time, based on arbitrary criteria. You cannot make a comparison like this styles.myNiceComponent.backgroundColor === 'blue' . (Need to flatten

it first.)

The InteractionManager is a native module that allows long-running work to be scheduled after any interactions/animations have completed. In particular, this allows JavaScript animations to run smoothly. To schedule the tasks

InteractionManager.runAfterInteractions(() => {
  // ...long-running synchronous task...
});

InteractionManager also allows applications to register animations by creating an interaction 'handle' on animation start, and clearing it upon completion

InteractionManager is very important because React Native has two threads. There is a JavaScript UI thread which handles drawing updates to the screen, and another thread used for all tasks not on the UI thread. Since there is only one thread for making UI updates, it can get overloaded and drop frames, especially during things like navigation screen animations. We use the InteractionManager to ensure that our function is executed after these animations occur so that we do not drop frames on the UI thread. Trying to draw a new screen while it is being animated is often too much for the thread to handle.

Yes, just like Virtual DOM in React, React Native creates a tree hierarchy to define the initial layout and creates a diff of that tree on each layout change to optimize the renderings. Except React Native manages the UI updates through couple of architecture layers that in the end translate how views should be rendered while trying to optimize the changes to a minimum in order to deliver the fastest rendering possible.

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. Fabric is based on dividing the tasks into sync and async tasks which would be handled by the immutable shadow thread followed by the memory refinements. There are basically three main principles of Fabric : Prioritizing the Tasks : JavaScript treats all async events as the same and all of the events/processes are treated equally in terms of resource allocation With Fabric, the user interactions such as scrolling, touch, hold, gestures etc will be prioritized and will be executed synchronously in the main thread or native thread. Other tasks such as API requests will be executed asynchronously. Immutable Shadow Tree This is a very important concept which would ensure that there would not be any deadlock condition independent of a synchronous or asynchronous request. With this, it won’t matter where the changes are coming from as long as our tree is consistent with all other thread that it is being shared with. Reducing Memory Consumption A new concept is introduced to keep a single copy of DOM nodes, instead of 2, in the memory while the other threads such as JavaScript would only have a reference of it to perform any operations.

In the new Fabric architecture, there are still three threads but designed in a way to make them as performant and efficient as possible. The first main concept that is used is, now the tasks are divided into sync and async instead of only async. It enables us to perform the important UI operations first and in sync with the frame rate of the mobile screen. In this way, absolute no frame is dropped as the tasks are executed in sync with the user interactions (high priority). Also as any thread can bring out the changes in the Shadow thread (synced with the main thread for priority tasks), it would have to be made immutable to have the consistency and avoid deadlocks.

The other important concept which would greatly reduce the memory consumption is using references instead of a whole new copy of the DOM nodes. This is very helpful in having consistent and efficient DOM nodes. Also with the reference, we can perform any operation that we would have done with its copy but in a much quicker way.

Less code duplication. Because you are forced to move all the layout components out as separate presentational components, you can directly reuse them instead of copy-pasting the code in every page. Presentational components are essentially your app’s View layer. Hence, you can change the styling without touching the app's logic. Better separation of concerns. You understand your app and your UI better by writing components this way. Better reusability. You can use the same presentational component with completely different state sources, and turn those into separate container components that can be further reused.