React Native The complete guide online(in progress)

7 min readSep 18, 2024

Master react native with an experience developer

Join in my discord community and stay tuned for new article , find help there,I provide a weekly mentorship for free
Join now https://discord.gg/WwKSmYpAP2
Find me on Youtube clique here
Youtube channel @devhipster

You can find this turtorial on youtube too

link for the video: @devhipster

Table of content

React native ecosystem | Setting up the environment for Android | Setting upo the environment for iOS.
How react native convert the code build with .JSx or .TSx into a native one.
Building your first interface using JSX or TSX.
Understanding React-native Box model.
Understanding Reac-native Flexbox.
Building complex interface.
Can I use react hooks in React native?.
Using Session,local storage-like for React native.
Using Axios and writing Asynchronous code.
Le'ts use Promise | Callbaback.
React-native using native components (Built-in components).
Creating your own components.
Styling React-native components.
Different ways of applying styles to your components.
Properly strucutre your React native code.
Using Device resources.

— Camera API

— Message API

17. React native Alerts.

18.Building your React native application.

19.Generate APK.

20. Exploring ADB ,Gradlew for android development.

21. React Native, platform-specific

React native ecosystem (Architecture)| Setting up the environment for Android | Setting upo the environment for iOS.

React Native is a framework developed by Facebook that allows developers to build mobile applications for iOS and Android using JavaScript and React. The key feature of React Native is that it enables developers to write a single codebase that runs on multiple platforms, with components that render as native UI elements.

how React Native works behind the scenes

At this stage we'll see how React Native works behind the scenes, including the core concepts and processes that make this possible.

React Native Architecture

React Native operates on a three-layer architecture:

JavaScript Thread (JS Layer): This is where your React code lives. It’s the main thread responsible for running JavaScript code, managing application logic, and defining the app’s UI using React components.
Native Thread (UI Layer): This layer communicates with the underlying platform (iOS or Android). It’s responsible for rendering native components like buttons, text inputs, and images using native APIs (Objective-C/Swift for iOS, Java/Kotlin for Android).
Bridge: The bridge is the core mechanism that connects the JavaScript thread and the Native thread. It allows asynchronous communication between the two, enabling JavaScript to instruct the native layer to render UI elements or handle other tasks like device APIs.

JSX and Bundling

JSX (or TSX): React Native uses JSX (JavaScript XML) to define the structure of your components. JSX is a syntax extension that looks similar to HTML, but under the hood, it gets transformed into regular JavaScript code.
Metro Bundler: React Native uses Metro, a JavaScript bundler, to transform your JavaScript and JSX code into a single JavaScript bundle. The bundler optimizes and delivers the code to the app in a way that the JavaScript runtime can interpret.

How React Native Converts JSX to Native Code

When you write a component in React Native using JSX, it gets translated into a corresponding native component behind the scenes. For example, a <Text> component in JSX gets rendered as a UILabel on iOS and a TextView on Android. This conversion happens through the following steps:

<View>
  <Text>Hello, World!</Text>
</View>

React Rendering: The JSX code is parsed by React and turned into a tree of virtual DOM elements (called the Virtual DOM).
Virtual DOM: React Native uses the reconciliation process to compute the difference between the previous and current Virtual DOM and decides what needs to be updated.
Communication via Bridge: The updated UI instructions are sent to the Native thread via the Bridge. The native code understands these instructions and converts them to native UI components (i.e., UILabel or TextView).
Native Rendering: The platform-specific components are rendered on the device screen, maintaining a native feel while being controlled by JavaScript.

How React Native Manages Asynchronous Work

Since JavaScript runs on its own thread and doesn’t directly block the main UI thread, React Native leverages this separation to perform heavy tasks like network requests or image processing asynchronously. The key tools for managing asynchronous tasks are:

Promises: JavaScript’s promise-based architecture helps in managing async operations like API calls or animations.
Callbacks: Sometimes, React Native uses callback functions to handle tasks like geolocation or camera APIs.
Bridge Communication: Asynchronous operations like fetching data from APIs or accessing device resources happen through the bridge. Native modules perform tasks and then communicate back to JavaScript via the bridge, providing updates asynchronously.

Handling Platform-Specific Code

While React Native allows for cross-platform development, there are scenarios where platform-specific code is required. React Native provides tools like Platform Module and Native Modules for this.

Platform Module: You can conditionally render or write platform-specific code using the Platform module.

import { Platform } from 'react-native';

if (Platform.OS === 'ios') {
  // iOS-specific code
} else {
  // Android-specific code
}

Native Modules: You can also write native code (Java/Kotlin for Android, Objective-C/Swift for iOS) for features not supported out of the box by React Native. This custom native code can then be exposed to the JavaScript layer via Native Modules.

How React native knows what to change? thanks to Reconciliation and Rendering Updates

React Native uses React’s core algorithm, Reconciliation, to handle UI updates. When a component’s state or props change, React Native compares the Virtual DOM with the real DOM (or Native components) and calculates the minimal set of updates required. The Diffing Algorithm helps determine which elements need to be re-rendered and sends those specific changes through the bridge to the Native layer.

For example, if only a single <Text> component changes in your app, React Native will update only that component in the native view hierarchy rather than re-rendering the entire UI.

Native modules(Accessing Device Features)

React Native provides APIs to interact with the device’s features such as the camera, geolocation, accelerometer, etc. These device APIs are generally native modules that you interact with through JavaScript.

Device APIs: For example, you can access the camera using React Native’s Camera module or use libraries like react-native-camera.
Permissions: You’ll need to manage device permissions using React Native’s permission API for accessing features like the camera, microphone, location, etc.

Setting up the environment for Android | Setting upo the environment for iOS.

Setting Up the Environment for Android

Install Java Development Kit (JDK): React Native for Android requires JDK. Make sure you have JDK 8,11 or later installed.

Download from here.
Set environment variables:
Mac/Linux:

export JAVA_HOME=$(/usr/libexec/java_home)
export PATH=$JAVA_HOME/bin:$PATH

Windows: Set the JAVA_HOME variable in the system properties.
Install Android Studio:
Download and install Android Studio.
During installation, select the following components:
Android SDK
Android SDK Platform
Android NDK
Android Virtual Device (AVD)
Configure Android SDK:
Open Android Studio and go to SDK Manager (found under “Configure” in the welcome screen).
Install the latest SDK Tools, SDK Platform,Android NDK and Android Emulator.
Set Android Environment Variables:
Find your Android SDK location (e.g., /Users/YourUser/Library/Android/sdk).
Add these lines to your ~/.bash_profile, ~/.bashrc, or ~/.zshrc (depending on your shell):

export ANDROID_HOME=~/Library/Android/sdk
export PATH=$ANDROID_HOME/emulator:$ANDROID_HOME/tools:$ANDROID_HOME/tools/bin:$ANDROID_HOME/platform-tools:$PATH

Install Node.js: Install the latest version of Node.js by downloading from Node.js or using a package manager.

brew install node

Install Watchman (macOS): Watchman is used for better file watching, and it can be installed using Homebrew:

brew install watchman

Install react-native cli;

npm install -g react-native-cli

Create Android Virtual Device (AVD):

Open Android Studio, go to AVD Manager, and create a new virtual device.
Choose your preferred device configuration and start the emulator.

Setting Up the Environment for iOS

Install Xcode:

Download and install Xcode from the Mac App Store.
Open Xcode and install any required components (e.g., Command Line Tools).

Install CocoaPods: CocoaPods is a dependency manager for iOS projects. Install it via Homebrew:

Pay attention to the version of xcode compatible with your mac from Xcode 13 you can only work with React-native 0.73.x versions , if your using xcode 14 you can use a version greater than 0.73.x,avoid issues !

sudo gem install cocoapods

Set up Xcode Command Line Tools: Open the terminal and run:

sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer
sudo xcodebuild -runFirstLaunch

Install Node.js: Install Node.js via Homebrew:

brew install node

Install Watchman (if not done previously):

brew install watchman

Create iOS Project: After setting up React Native CLI, create a new project and navigate to the iOS folder:

npx react-native init --version 0.73.2 my_first_ios_app

or 

react-native init MyNewProject

cd ios

pod install

Run Your Project:

In the project directory, run

npx react-native run-ios

or 

react-native run-ios

Join in my discord community and stay tuned for new article , find help there,I provide a weekly mentorship for free

Join now https://discord.gg/WwKSmYpAP2

If you like my work and want to support me, you can:

Buy me a coffee by scanning the QR code below:
Buy me a coffee