survival8: React Native

Showing posts with label React Native. Show all posts

Saturday, December 20, 2025

Project Setup For "Reading App Using React Native" (Dec 2025)

To See All React Native Articles: Index of Lessons in Technology

1. Clone the repository.

https://github.com/ashishjain1547/pvt_reading_mobile_app_using_react_native

2. Create a local working copy.

/home/jain/Desktop/ws/react_native_apps/Reading_App_For_Bright_Orange

3. Connect test device (phone/tablet) with the laptop

How I enabled "Wireless Debugging" on my Samsung phone

4. Trial launch of the app on the test device (phone/tablet)

5. Check whether the backend API is operational.

https://ashishjain1545.pythonanywhere.com/



6. Setup the local database (MySQL)

DB Details (local and remote) can be found here: 
/home/jain/Desktop/ws/react_native_apps/Reading_App_For_Bright_Orange/design_documents/flask_app.py


db_details = {
    "host": "localhost",
    "user": "ashish",
    "password": "pass",
    "database": "reading_app_v2"
}

Testing in MySQL Workbench (local)




Checking if remote DB also has this one table: reading_artifacts



Query: show tables;

Well: the mobile app on the device won't be able to connect to local DB so we would need to work with the hosted (remote) DB.

7: Getting 'create' statement for a table

Query: SHOW CREATE TABLE reading_artifacts;

CREATE TABLE `reading_artifacts` (
  `id` int NOT NULL AUTO_INCREMENT,
  `book_title` varchar(255) DEFAULT NULL,
  `sequence_number_as_per_book` int DEFAULT NULL,
  `reading_artifact_type` varchar(150) NOT NULL,
  `reading_artifact_title` varchar(4000) DEFAULT NULL,
  `reading_artifact_text` varchar(4000) DEFAULT NULL,
  `reading_artifact_metadata` longtext,
  `image_base64` mediumtext,
  `description_hindi` text CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci,
  `soft_delete_flag` tinyint(1) NOT NULL DEFAULT '0',
  `date_created` timestamp NULL DEFAULT CURRENT_TIMESTAMP,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=31 DEFAULT CHARSET=utf8mb3;

8: Basic Report From 'reading_artifacts'

select id, book_title, sequence_number_as_per_book, reading_artifact_type, reading_artifact_title from reading_artifacts order by book_title, reading_artifact_type, sequence_number_as_per_book;

9: How to launch the app

$ pwd
/home/jain/Desktop/ws/private/pvt_reading_mobile_app_using_react_native

TO START THE METRO SERVER:
$ npx react-native start


TO CHECK IF YOUR DEVICE IS CONNECTED:
(base) jain@jain-ThinkPad-T440s:~/Desktop/ws/private/pvt_reading_mobile_app_using_react_native$ adb devices
List of devices attached
adb-R9ZY3098GYX-8MEOzx._adb-tls-connect._tcp	device


TO RUN THE APP ON THE DEVICE:
$ npx react-native run-android


Addendum

Repository for design documents / supporting code / meeting notes and presentations related to this app:
https://github.com/ashishjain1547/reading_app_design_docs_for_bright_orange_school

Tags: Technology,React Native,

How I enabled "Wireless Debugging" on my Samsung phone

To See All React Native Articles: Index of Lessons in Technology

1 - Settings

2 - About Phone

3 - Software Information

Tap 'Build Number' 7 times to enable 'Developer Options'

4 - Settings with Developer Options Enabled

5 - Wireless Debugging Settings in Developer Options

6 - Wireless Debugging Settings

7 - Pairing Development Laptop and Test Device (Phone)

(base) jain@jain-ThinkPad-T440s:~/Desktop/ws/react_native_apps/Reading_App_For_Bright_Orange$ adb version Android Debug Bridge version 1.0.41 Version 36.0.0-13206524 Installed as /home/jain/Android/Sdk/platform-tools/adb Running on Linux 6.14.0-37-generic (x86_64) 'Pair Device With Pairing Code' Screen on my phone

(base) jain@jain-ThinkPad-T440s:~/Desktop/ws/react_native_apps/Reading_App_For_Bright_Orange$ adb pair 192.168.1.3:38407 Enter pairing code: 698705 Successfully paired to 192.168.1.3:38407 [guid=adb-R9ZY3098GYX-8MEOzx]

One Cause For Connection Refused Error With "adb connect" Command...

✅ adb pair 192.168.1.3:39931 → SUCCESS
❌ adb connect 192.168.1.3:46419 → Connection refused

This happens because pairing port ≠ connection port.

Get the correct IP:PORT Re-open Wireless Debugging info on phone On your Android phone: Settings → Developer options → Wireless debugging You will see two things: IP address & Port (this is the port you must use with adb connect) Pair with pairing code (you already did this) 👉 Note the IP:PORT shown under “Wireless debugging”, NOT the pairing dialog. Code (base) jain@jain-ThinkPad-T440s:~/Desktop/ws/react_native_apps/Reading_App_For_Bright_Orange$ adb connect 192.168.1.3:46419 (base) jain@jain-ThinkPad-T440s:~/Desktop/ws/react_native_apps/Reading_App_For_Bright_Orange$ adb devices List of devices attached adb-R9ZY3098GYX-8MEOzx._adb-tls-connect._tcp device

Tags: Technology,React Native,

Saturday, August 30, 2025

How to start 'metro' (React Native)

To See All React Native Articles: Index of Lessons in Technology

Good question 👍
The Metro bundler is the JavaScript packager that React Native uses. It must be running in the background for your app to load JS code.

🚀 How to start Metro bundler

Go to your React Native project root (where package.json is).
```
bash
cd ~/Desktop/your_project_name
```
Start Metro:
```
bash
npx react-native start
```
- By default, Metro will run on port 8081.
- Leave this terminal window open.

In another terminal, build & install the app:

bash
npx react-native run-android

bash
npx react-native run-ios

🌐 For wireless debugging

If you’re not using USB, run Metro with your laptop’s IP address:

bash
npx react-native start --host <your-laptop-ip>

Then configure your phone (Dev Settings → Debug server host & port) with:

makefile
<your-laptop-ip>:8081

⚡ Pro tip: If you already ran npx react-native run-android, Metro usually auto-starts in another tab. But if you closed it, just re-run npx react-native start.

Do you want me to also show you how to make Metro auto-restart whenever you run run-android, so you don’t have to open it manually each time?

Steps for Wireless Debugging

To See All React Native Articles: Index of Lessons in Technology

Yes 👍 wireless debugging is very handy in React Native, especially when your USB is unreliable. Here’s a step-by-step guide to set up wireless debugging with Android (ADB):

📱 1. Prerequisites

Android device (e.g., your Redmi A2 or Galaxy A06 5G)
Android 11+ (Wireless debugging is built into Developer Options)
Laptop with ADB installed (platform-tools package)
Both laptop and phone must be on the same Wi-Fi network

⚙️ 2. Enable Developer Options & Wireless Debugging

On your phone:

Go to Settings → About phone → Tap Build number 7 times (to enable Developer Options).
Go to Settings → Developer options.
Turn on:
- USB debugging (first time setup)
- Wireless debugging

💻 3. First Pairing (via QR or Code)

Run ADB on your laptop:
```
bash
adb pair ip:port
```
On your phone → Developer options → Wireless debugging → Pair device with pairing code
- It will show an IP:Port (like 192.168.0.105:37099)
- And a 6-digit pairing code
Enter it in terminal:
```
bash
adb pair 192.168.0.105:37099
```
→ If successful: Successfully paired to 192.168.0.105:37099

🔗 4. Connect ADB Over Wi-Fi

Now actually connect the device (different port from pairing one):

Still in Wireless debugging, find IP address & Port for debugging (like 192.168.0.105:5555).
Connect:
```
bash
adb connect 192.168.0.105:5555
```
→ You should see: connected to 192.168.0.105:5555

Verify:

bash
adb devices

Output should show:

nginx
List of devices attached
192.168.0.105:5555   device

🚀 5. Run React Native App Wirelessly

Now just run your app as usual:

bash
npx react-native run-android

It will install and debug over Wi-Fi without USB. 🎉

⚡ Troubleshooting

If adb connect fails → make sure phone & laptop are on same Wi-Fi.
If it disconnects after restart → you’ll need to re-pair.
Sometimes adb kill-server && adb start-server helps reset.

👉 Do you want me to also give you steps for QR pairing inside Android Studio (so you don’t need terminal at all), or you prefer ADB command-line only?

TESTING

(base) jain@jain-ThinkPad-T440s:~/Desktop/ws/react_native_apps$ adb devices
* daemon not running; starting now at tcp:5037
* daemon started successfully
List of devices attached

(base) jain@jain-ThinkPad-T440s:~/Desktop/ws/react_native_apps$ adb connect
adb: usage: adb connect HOST[:PORT]

(base) jain@jain-ThinkPad-T440s:~/Desktop/ws/react_native_apps$ adb pair 192.168.1.2:44501
Enter pairing code: 652936
Successfully paired to 192.168.1.2:44501 [guid=adb-R9ZY3098GYX-8MEOzx]

(base) jain@jain-ThinkPad-T440s:~/Desktop/ws/react_native_apps$ adb connect 192.168.1.2:36161
connected to 192.168.1.2:36161

(base) jain@jain-ThinkPad-T440s:~/Desktop/ws/react_native_apps$ adb devices
List of devices attached
192.168.1.2:36161	device
adb-R9ZY3098GYX-8MEOzx._adb-tls-connect._tcp	device

React Native "init" command is deprecated

To See All React Native Articles: Index of Lessons in Technology

(base) jain@jain-ThinkPad-T440s:~/Desktop/ws/react_native_apps$ npx react-native init ReadingAppForBrightOrange
Need to install the following packages:
react-native@0.81.1
Ok to proceed? (y) y


🚨️ The `init` command is deprecated.

- Switch to npx @react-native-community/cli init for the identical behavior.
- Refer to the documentation for information about alternative tools: https://reactnative.dev/docs/getting-started
Exiting...

FIX

(base) jain@jain-ThinkPad-T440s:~/Desktop/ws/react_native_apps$ npx @react-native-community/cli init Reading_App_For_Bright_Orange
                                                          
               ######                ######               
             ###     ####        ####     ###             
            ##          ###    ###          ##            
            ##             ####             ##            
            ##             ####             ##            
            ##           ##    ##           ##            
            ##         ###      ###         ##            
             ##  ########################  ##             
          ######    ###            ###    ######          
      ###     ##    ##              ##    ##     ###      
   ###         ## ###      ####      ### ##         ###   
  ##           ####      ########      ####           ##  
 ##             ###     ##########     ###             ## 
  ##           ####      ########      ####           ##  
   ###         ## ###      ####      ### ##         ###   
      ###     ##    ##              ##    ##     ###      
          ######    ###            ###    ######          
             ##  ########################  ##             
            ##         ###      ###         ##            
            ##           ##    ##           ##            
            ##             ####             ##            
            ##             ####             ##            
            ##          ###    ###          ##            
             ###     ####        ####     ###             
               ######                ######               
                                                          

              Welcome to React Native 0.81.1!                
                 Learn once, write anywhere               

✔ Downloading template
✔ Copying template
✔ Processing template
✔ Installing dependencies
✔ Initializing Git repository

  
  Run instructions for Android:
    • Have an Android emulator running (quickest way to get started), or a device connected.
    • cd "/home/jain/Desktop/ws/react_native_apps/Reading_App_For_Bright_Orange" && npx react-native run-android

Pages

Saturday, December 20, 2025

Project Setup For "Reading App Using React Native" (Dec 2025)

7: Getting 'create' statement for a table

8: Basic Report From 'reading_artifacts'

9: How to launch the app

How I enabled "Wireless Debugging" on my Samsung phone

1 - Settings

2 - About Phone

3 - Software Information

4 - Settings with Developer Options Enabled

5 - Wireless Debugging Settings in Developer Options

6 - Wireless Debugging Settings

7 - Pairing Development Laptop and Test Device (Phone)

One Cause For Connection Refused Error With "adb connect" Command...

Saturday, August 30, 2025

How to start 'metro' (React Native)

🚀 How to start Metro bundler

🌐 For wireless debugging

Steps for Wireless Debugging

📱 1. Prerequisites

⚙️ 2. Enable Developer Options & Wireless Debugging

💻 3. First Pairing (via QR or Code)

🔗 4. Connect ADB Over Wi-Fi

🚀 5. Run React Native App Wirelessly

⚡ Troubleshooting

TESTING

React Native "init" command is deprecated

FIX