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

[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


What is React Native?


Technical View


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



  • 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

  • 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


# 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 to refer to the localhost of the host machine.

So instead of using http://localhost:8000, you shoud change it to 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 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"?>
    <domain-config cleartextTrafficPermitted="true">
        <domain includeSubdomains="true"></domain>

Reference this file in your manifest inside the tag:


2nd Option

adb forward tcp:EMULATOR_PORT tcp:PC_PORT

Eg: your api is at

adb forward tcp:8000 tcp:8000