What Is React Native


React Native is a framework for building mobile applications using JavaScript and React. It allows developers to create native mobile apps for iOS and Android platforms using a single codebase. React Native uses components similar to React, and it provides access to native APIs and device features through JavaScript. This makes it easier for web developers to transition to mobile app development and build cross-platform apps efficiently.



React Native Vs ReactJs

ReactJS:

  • ReactJS, also known as React or React.js, is a JavaScript library for building user interfaces for web applications.
  • It's primarily used for developing web applications that run in web browsers.
  • ReactJS allows developers to create reusable UI components that manage their own state, making it easier to build complex UIs.
  • It uses a virtual DOM to efficiently update the UI by only rendering the components that have changed, improving performance.
  • ReactJS applications are typically written in JavaScript and JSX (a syntax extension for JavaScript).

React Native:

  • React Native is a framework for building native mobile applications using React and JavaScript.
  • It allows developers to use React and JavaScript to build mobile apps for iOS and Android platforms.
  • React Native provides a set of components and APIs that are specific to mobile development, allowing developers to create native UI components and access device features.
  • Unlike ReactJS, React Native does not use HTML for rendering UI. Instead, it uses native UI components provided by the platform (e.g., View, Text, Button for iOS and Android).
  • React Native apps are compiled to native code, which allows them to achieve performance comparable to apps developed using native languages like Swift (for iOS) and Java/Kotlin (for Android).



React Native Architecture:

JavaScript Thread:

  • React Native applications are primarily written in JavaScript.
  • JavaScript code runs on a dedicated JavaScript thread, separate from the UI thread.
  • This thread handles business logic, state management, and communication with the native modules.

Bridge:

  • React Native uses a bridge to communicate between JavaScript and native code.
  • The bridge enables JavaScript code to interact with native platform APIs and components.
  • It allows JavaScript to call native modules written in Java (for Android) or Objective-C/Swift (for iOS), and vice versa.

Native Modules:

  • Native modules are reusable pieces of native code that expose functionality to JavaScript.
  • They provide access to device features and native APIs that are not available in JavaScript.
  • Developers can create custom native modules to extend the functionality of React Native applications.

UI Thread:

  • The UI thread is responsible for rendering the user interface and handling user interactions.
  • React Native uses native UI components provided by the platform (iOS or Android) to render the user interface.
  • These components are mapped to corresponding JavaScript components using a reconciliation process.

Virtual DOM:

  • React Native uses a virtual DOM similar to ReactJS for managing UI updates.
  • Changes to the UI are first applied to the virtual DOM, which then calculates the minimal set of changes needed to update the actual UI.
  • This helps improve performance by reducing the number of UI updates and minimizing the work done by the UI thread.

Packager:

  • The React Native packager bundles JavaScript code and assets into a single package that can be deployed to the device.
  • It provides tools for bundling, transforming, and optimizing JavaScript code, as well as managing assets like images and fonts.


Styling In React Native

Styling in React Native is similar to styling in web development but uses a subset of CSS properties. You can apply styles using inline styles or stylesheets. Here's a short demo:


import React from 'react';

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


export default function App() {

 return (

  <View style={styles.container}>

   <Text style={styles.text}>Hello, React Native!</Text>

  </View>

 );

}


const styles = StyleSheet.create({

 container: {

  flex: 1,

  justifyContent: 'center',

  alignItems: 'center',

  backgroundColor: '#fff',

 },

 text: {

  fontSize: 24,

  fontWeight: 'bold',

  color: '#333',

 },

});


What is ListView and describe its use in React Native ?

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


import React, { useState } from 'react';

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

const MyListComponent = () => {

 const [dataSource, setDataSource] = useState(

  new ListView.DataSource({ rowHasChanged: (r1, r2) => r1 !== r2 }).cloneWithRows([

   'Android', 'iOS', 'Java', 'Php', 'Hadoop', 'Sap', 'Python', 'Ajax', 'C++'

  ])

 );


 return (

  <ListView

   dataSource={dataSource}

   renderRow={(rowData) => <Text style={{ fontSize: 30 }}>{rowData}</Text>}

  />

 );

};


export default MyListComponent;


 How can you write different code for IOS and Android in the same code base ? Is there any module available for this ?

import { Platform, Stylesheet } from 'react-native';

const styles = Stylesheet.create({

height: Platform.OS === 'IOS' ? 200 : 400

})


Explain FlatList components, what are its key features along with a code sample ?

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.

This improves memory efficiency, scrolling performance, and overall user experience. 

`FlatList` also provides built-in support for accessibility, keyboard navigation, and customization. 

It's an essential component for building responsive and performant user interfaces in React Native applications.


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.


React Native Intermediate Interview Questions

 How is the entire React Native code processed to show the final output on a mobile screen


  • 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



What is a bridge and why is it used in React Native ? Explain for both android and IOS ?

Bridge in ReactNative is a layer or simply a connection that is responsible for gluing 

together Native and JavaScript environments.



Name core Components in React Native and the analogy of those components when compared with the web .

The core components used in React Native are <View> , <Text> , <Image> , <ScrollView> , <TextInput>


Explain Async Storage in React Native and also define when to use it and when to not?

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