What is React Native?

React Native is an open source framework for building Android and iOS applications using React and the app platform’s native capabilities

React Native vs Web

Components

React vs React Native

Create 1st app and see in Andriod

$ mkdir react; cd react

// Node Package eXecute. NPM package runner. It allows developers to execute any Javascript Package available on the NPM registry
$ npx create-expo-app@latest
package-name: test

$ cd test

// Node Package Manager, a free, open-source registry and command-line tool for JavaScript software packages
$ npm install @expo/ngrok

// Reset your project. You can remove the boilerplate code and start fresh with a new project
// This will move all earlier code to app-example
$ npm run reset-project

$ npx expo start 
// OR Start app in tunnel mode
$ npx expo start --tunnel
        

Open app on Andriod phone

ByPass Traffic from Windows to WSL(if you are running backend on WSL)

ipconfig    //get laptop Wifi IP
ifconfig    //(Inside WSL), get WSL IP

Powershell in administrative mode
> netsh interface portproxy show all
Listen on ipv4:             Connect to ipv4:

Address         Port        Address         Port
--------------- ----------  --------------- ----------
192.168.1.36    9132        172.22.133.170  9132
> netsh interface portproxy delete v4tov4 listenaddress=192.168.x.x listenport=8080
> netsh interface portproxy add v4tov4 listenaddress=<laptop's Wi-Fi IP> listenport=9132 connectaddress=<WSL_IP> connectport=9132
        

Run python server inside WSL (Testing)

python3 -m http.server 9132 --bind 172.33.133.170
        

Run server inside WSL

let app = move || {
    App::new()
        .app_data(web::Data::new(pool.clone()))
        .route("/crm/login", web::post().to(login::teacher_login))
};

HttpServer::new(app).bind("0.0.0.0:9132")?.run().await
        

Enable developer option on your andriod phone

            Disconnect device, and ensure to turn off developer options on the android device (if was previously turned on).
            Connect the device via USB.
            Turn on developer options on the android device.    //Tap 5 times on settings>version number
            Enable check box for USB/Wireless debugging.
        

Install expo Go App on Phone, Scan QR code which appears on vscode screen after running npx expo start

Create apk file using expo

goto project containing react-native code

$  npm install -g eas-cli
$  eas login
$  eas whoami
$  eas build:configure
eas.json
{
    "build": {
    "preview": {
        "android": {
        "buildType": "apk"
        },
        "distribution": "internal"
    }
    }
}

$ eas build -p android --profile preview
- This will show scanner from which apk file will be downloaded from expo UI