This Article Part of React Native Tutorial Series want to start from scrach follow below link
https://infinitbility.com/react-native/table-of-contents
Today, we setup react native environment in ubuntu for run react native app.
For setup react native environment in ubuntu you have to install some dependencies written below
dependencies
- Install node and npm
- Install Android Studio
- Install react-native
Install node and npm
Node.js is an open-source cross-platform JavaScript run-time environment that allows server-side execution of JavaScript code.
for start installing dependencies first update your package manager.
1sudo apt-get update
install c++ compiler. It may already exists, but just in case.
1sudo apt-get install build-essential libssl-dev
install nvm
1curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.34.0/install.sh | bash
reload bash
1source ~/.bashrc
after installation close and reopen terminal and check nvm version
1nvm --version
Install node
1sudo nvm install node
set default node version for nvm
1nvm alias default node
Verify that the node & npm were successfully installed by printing their versions
1node -v
1npm -v
Install Android Studio
before install android studio install java
1sudo apt install openjdk-8-jre openjdk-8-jdk
Install android studio
In ubuntu 18.04, snap command is provided which is containerised software packages that are simple to create and install on all linux distributions https://snapcraft.io/
1sudo snap install android-studio
Configure build path in your .bash_profile or .zshrc
1export ANDROID_HOME=$HOME/Android/Sdk2export PATH=$PATH:$ANDROID_HOME/tools3export PATH=$PATH:$ANDROID_HOME/tools/bin4export PATH=$PATH:$ANDROID_HOME/platform-tools5export PATH=$PATH:$ANDROID_HOME/emulator
Set alias to shorten command to run emulator
1alias run-emu="$ANDROID_HOME/tools/emulator @pixel2"
Reload bash_profile or .zshrc
1source ~/.bash_profile // or source ~/.zshrc
Generate emulator & run emulator
Note:
- In order to make
avdmanager
command to work, you should start android-studio and complete installation first. - Also system-images should be installed Type below command to install the system image.
1sdkmanager --install "system-images;android-27;google_apis;x86"
Create avd device
1avdmanager create avd -n doo1 -k "system-images;android-27;google_apis_playstore;x86" --device 'Nexus 5X
run emulator
1emu -avd doo1
List emulators. You will see doo1 as a result.
1emu -avd -list-avds
To install pixel device, you can do following.
- install missing module
1sudo apt-get install libcanberra-gtk-module:i386
1avdmanager create avd -n doo1 -k "system-images;android-28;google_apis;x86" --device 'pixel'
- Trouble shooting with permission
Sometimes there is permission issue running device telling to grant permisson on /dev/kvm
.
1sudo apt install qemu-kvm
1sudo adduser <your username> kvm
1sudo chown <your username> /dev/kvm
Install react-native
React Native is distributed as two npm packages, react-native-cli and react-native. The first one is a lightweight package that should be installed globally (npm install -g react-native-cli).
install React Native CLI globally
1npm install -g react-native-cli
- Create react-native project via react-native-cli.
1react-native init Infinitbility
Finally run your react-native project.
Move to created project dir.
1cd Infinitbility
Start react-native packager
1npm start
open up another terminal and run android
1react-native run-android
More From React Native Tutorial
Basics
- Introduction To React Native
- React Native Environment Setup using expo
- React Native Environment Setup for windows
- React Native Environment setup on Mac OS
- React Native Environment setup on linux
- React Native Project Structure
- React Native State
- React Native Props
- React Native Styling
- React Native Flexbox
- React Native Text
- React Native Textinput
- React Native Commands
- React Native ScrollView
Advances
- React Native Dark Mode
- React Native Fonts
- React Native SQLite
- React Native DatepickerAndroid
- React native ScrollView scroll to position
- How to align icon with text in react native
- React Native Image
- React Native Firebase Crashlytics
- React Native Async Storage
- React Native Share
Error & Issue Solution
- Task :app:transformDexArchiveWithDexMergerForDebug FAILED In React Native
- Expiring Daemon because JVM heap space is exhausted In React Native
- Task :app:transformNativeLibsWithMergeJniLibsForDebug FAILED In React Native
- Unable to determine the current character, it is not a string, number, array, or object in react native
- App crashed immediately after install react native video or track player
- how to delete SQLite database in android react native
- React native material dropdown twice click issue
- How to get the current route in react-navigation?
- how to disable drawer on the drawer navigation screen?
- Image not showing in ios 14 react native