This time we'll be setting up the environment to develop for React Native. At first, I was going to use expo - a tool that uses wifi to reproduce changes on the app directly into the smartphone - however I figured out I'll need to develop when no wireless network is avaliable as well, so we'll go on the "hard" path.
I'm using Ubuntu 18.04 with Node 10.16.2 and npm 6.10.3
React Native
Install Node 8.3 or Newer
https://nodejs.org/en/download/package-manager/
Install React Native CLI
npm install -g react-native-cli
Download & Install OpenJDK
tar -zxvf openjdk...tar.gz
Download & Install Android Studio
tar -zxvf android...tar.gz
cd android-studio
cd bin
./studio.sh
check Android SDK, Android SDK Platform and Android Virtual Device
install them
If you happen to encounter an error with required packages, finish the failed installation, go to Settings -> Appearance & Behavior -> System Settings -> Updates and change the Update Channel to Canary Channel.
Install AndroidSDK
Settings -> Appearance & Behavior -> System Settings -> AndroidSDK
check Show Package Details and expand Android 9 (Pie)
check Android SDK Platform 28
check Intel x86 Atom_64 System Image or Google APIs Intel x86 Atom System Image
select SDK Tools tab, Show Package Details and check 28.0.03
Click Apply and install
Configure the ANDROID_HOME environment variable
Add the following lines in the $HOME/.bashrc_profile file
export ANDROID_HOME=$HOME/Android/Sdk
export PATH=$PATH:$ANDROID_HOME/emulator
export PATH=$PATH:$ANDROID_HOME/tools
export PATH=$PATH:$ANDROID_HOME/tools/bin
export PATH=$PATH:$ANDROID_HOME/platform-tools
(If you're using another shell like zsh, you'll have to add them to it's profile file like ~/.zshrc)
run echo $PATH and check if $ANDROID_HOME is there
Install WatchMan
git clone https://github.com/facebook/watchman.git
cd watchman
git checkout v4.9.0 # the latest stable release
./autogen.sh
./configure
make
sudo make install
You may need to
Install libtoolize: sudo apt install libtool
Install automake (aclocal) sudo apt install automake
Install pkg-config sudo apt install pkg-config
Add export M4=/usr/bin/m4 as was done with ANDROID_HOME
Create new React Native app
react-native init AwesomeProject
Run Virtual Android Device
Open Android Studio (studio.sh) then open /AwesomeProject/android project folder
Open AVD Managerby clicking on its icon
Select Create Virtual Device..., then pick any Phone from the list and click Next, then select the Pie API Level 28 image.
Finish it and press the green trianle button
Run react-nactive project in the emulated device
Open erminal and run react-native start
Open another terminal and inside the project folder, run react-native run-android
But if your computer almost explodes as mine, try running it directly into your Android smartphone
Enable Debuggin USB in your smartphone
Find your device after running lsusb
Get the 4 first digits from its ID (ex. 22b8)
echo 'SUBSYSTEM=="usb", ATTR{idVendor}=="22b8", MODE="0666", GROUP="plugdev"' | sudo tee /etc/udev/rules.d/51-android-usb.rules
(don't forget to change 22b8 in the line above)
Check if your device appears on adb devices
react-native start
react-native run-android
Now your application should appear in your smartphone.
You may turn on Live Reloading by adb -s <device name> reverse tcp:8081 tcp:8081 with device name being in adb devices
If you get an error while Reloading like this, try running the following commands
adb reverse tcp:8081 tcp:8081
adb -d reverse tcp:8081 tcp:8081
adb -e reverse tcp:8081 tcp:8081
Now we can are ready to work on React Native. However, we still have to set up NodeJS and KoaJS.
Top comments (0)