[React Native Examples] Setup Working Place for React Native Developer

Post Date : 2024-03-28T08:51:55+07:00

Modified Date : 2024-03-28T08:51:55+07:00

Category: cheatsheet react-native-examples

Tags: react-native

Forewords

What is React Native?

Technical View

Views

JSX Components are compiled to Native Views, not the javascript logic code.

Components are compiled

What about JS Logic Code?

Expo CLI vs React Native CLI

Conclusion:

You can start with expo cli because of easy working flow and less setup
With expo, you can test with native functions like camera with devices more easier.
You can always switch from expo cli to react native cli just by using “eject”
With React Native CLI setup, you can mix between js code and platform native code, such as: kotline or swift
React Natve CLI required more setup

Setup working environment

Install Android Studio
Create new React Native project with expo
VSCode Extension and setup Debug
Setup Android Studio To publish your app for testing
Setup Android Studio To publish your app for production

Install Android Studio

Download the latest Android Studio version at official link
Then you can create a new virtual device(which will be used to run for testing your React Native app)

And you get this virtual device on your screen

Create new React Native project with expo

npx create-expo-app rn2024
cd rn2024
npm i
npm run start

As you can see, if you wanna run on your virtual devices, just press “a”. Make sure you start your virtual device first. You can check list of your android devices like this

adb list
# You may see something like this
# List of devices attached
# emulator-5554   device

And this is how your app display in virtual device

Start your android emulator via command line

To start an Android emulator on Windows using the command line, you first need to make sure that the Android SDK and the emulator are correctly installed and that the emulator command is properly set up in your system’s PATH

C:\Users[Your-Username]\AppData\Local\Android\Sdk\emulator

# list device
emulator -list-avds
# start device
emulator -avd Pixel_3a_API_34_extension_level_7_x86_64
# start with non-interactive mode/deamon mode
start /min emulator -avd Pixel_3a_API_34_extension_level_7_x86_64 > output.txt

Feel free to find details at https://developer.android.com/studio/run/emulator-commandline

Connect localhost API with android emulator

1st Option

Android emulators use the special IP address 10.0.2.2 to refer to the localhost of the host machine.

So instead of using http://localhost:8000, you shoud change it to http://10.0.2.2:8000 when accessing from emulator.

If you are developing with Android 9 (API level 28) or higher, you must also configure the network security settings to allow clear text (non-HTTPS) communication, as 10.0.2.2 might not have an SSL certificate.

Create or edit the network_security_config.xml in the res/xml folder of your project:

<?xml version="1.0" encoding="utf-8"?>
<network-security-config>
    <domain-config cleartextTrafficPermitted="true">
        <domain includeSubdomains="true">10.0.2.2</domain>
    </domain-config>
</network-security-config>

Reference this file in your manifest inside the tag:

<application
    ...
    android:networkSecurityConfig="@xml/network_security_config"
    ...
>
    ...
</application>

2nd Option

adb forward tcp:EMULATOR_PORT tcp:PC_PORT

Eg: your api is at http://127.0.0.1:8000

adb forward tcp:8000 tcp:8000

cheatsheet react-native-examples