[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

cheatsheet react-native-examples