How to install React Native cli on Red Hat Enterprise Linux 8
Hello Medium World! This is my first post on Medium.com.
And in this post, I will try to explain “how to install react native cli on Red Hat Enterprise Linux 8.x(often abbreviated to RHEL)”.
RHEL is a Linux distribution developed by Red Hat for the commercial market. Fedora is the upstream source of the commercial RHEL distribution, and subsequently CentOS as well. All three of these distros use rpm packages.
React Native is an open-source mobile application framework created by Facebook, It is used to develop applications for Android, Android TV, iOS, macOS, tvOS, Web, Windows and UWP by enabling developers to use React’s framework along with native platform capabilities(Wikipedia).
I managed to create a working setup using the instruction on “https://reactnative.dev/docs/environment-setup" page.
Let’s start with Requirements list:
1- Nodejs
2- Java Development Kit
3- Android Development Environment
. Android SDK
. Android SDK Platform
. Android Virtual Device
4- Watchman
5- Visual Studio Code or any editor
1- Nodejs installation
Yes, time to action. An easy way to install nodejs check version first.
Enter this command from your terminal : nodejs --version
This command will show nodejs version if installed
$ node --version
v10.21.0or return this if nodejs is not found on your system,
When you answer the question as “y”, yum package manager will automatically install nodejs and npm (Node package manager)You can check nodejs and npm versions after installation completed.
If you want to install nodejs manually you can visit nodejs official download page. You can download and install nodejs manually, from https://nodejs.org/en/download/ You can access the installation instructions at https://github.com/nodejs/help/wiki/Installation#how-to-install-nodejs-via-binary-archive-on-linux.
2- Java Development Kit
Click JDK download from above link. When the page open select Download Linux x64 RPM Package option. After completed, go to Download folder and run the sudo yum install jdk-15.0.1_linux-x64_bin.rpm(Please check your downloaded file’s version number.It may be different)command from terminal. Check the version with java -version command,after installation.
$ java -version
java version "15.0.1" 2020-10-20
Java(TM) SE Runtime Environment (build 15.0.1+9-18)
Java Hotspot(TM) 64-Bit Server VM (build 15.0.1+9-18, mixed mode, sharing)3- Android Development Environment
This is the most important and complex section of the installation.
a. Download and install Android Studio from https://developer.android.com/studio/index.html
Android studio install package is about 900Mb. Go to your download location after download complete. Extract zip file to a folder, where to install Android Studio. Open terminal on your folder and run commands below.
This commands will start Android Studio.
cd android-studio-ide-XXX.XXX-linux/
cd android-studio/bin/
. studio.shb. Install the Android SDK
When we start the android studio with the above command, the (left) first screen below will greet us. We press next on the middle screen and when the operations are completed, we press the finish on the right screen.
Android Studio installs the latest Android SDK by default. Building a React Native app with native code, however, requires the Android 10 (Q) SDK in particular. Additional Android SDKs can be installed through the SDK Manager in Android Studio. You can follow the steps on the images below.
c. Install the Android Virtual Device
You can use your real android devices (with developer options enabled) while coding your app or you can install the Android Virtual Device(s). Let’s see how to install a virtual device. To open the AVD Manager, click
settings > AVD Manager. You can select any device. While doing this, if you choose a model with google play support, it will be more useful for you while developing the applications. (One of those marked in the play store column)
Select Android Q from next screen and start download. Set your device name when the installation completed.
d. Almost done. Now we will configure the ANDROID_HOME environment variable. Edit .bashrc file and add belows;
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-toolsThen trigger the .bashrc file with source ~/.bashrc command and continue to installation setup.
d. Create Desktop Entry
First, click on settings on homepage and select “Create Desktop Entry”. This is add a shortcut to your applications /programming menu. After that, you can easily launch Android Studio.
4. Watchman
Watchman is a tool by Facebook for watching changes in the filesystem. It is highly recommended you install it for better performance and increased compatibility in certain edge cases (translation: you may be able to get by without installing this, but your mileage may vary; installing this now may save you from a headache later). (From react native documentation).
How to install Watchman?
- Open download page url https://facebook.github.io/watchman/docs/install.html or https://github.com/facebook/watchman/releases/tag/v2020.12.14.00
- Download zip file for linux and extract it.
watchman-v202X.XX.XX.XX-linux.zip - Open a terminal on extacting folder and run the commands below
sudo mkdir -p /usr/local/{bin,lib} /usr/local/var/run/watchman
sudo cp bin/* /usr/local/bin
sudo cp lib/* /usr/local/lib
sudo chmod 755 /usr/local/bin/watchman
sudo chmod 2777 /usr/local/var/run/watchman5. Visual Studio Code
I prefer VS Code as the code editor. Here, I will explain the related downloads. But you can use any editor you prefer. You can install it from terminal.
sudo yum install codeor downloads the package from url https://code.visualstudio.com/download and install it manually.
Now all set. Let’s start the first React-Native project.
Start a new React Native project
- First, we open a terminal and run the command
emulator -list-avdsfor learn the name of the android emulators we installed with the android studio. Then, we start our virtual device with theemulator -avd avdName &command.
2. Open VS Code Terminal and type
npx react-native init <project_name>You can see the following screen when initiation completed.
3. First, you will need to start Metro, the JavaScript bundler that ships with React Native. Metro “takes in an entry file and various options, and returns a single JavaScript file that includes all your code and its dependencies.”
To start Metro, run npx react-native start inside your React Native project folder.
If you get an error with watchman, type “watchman” command from terminal and restart the metro server.
Another possible watchman error is :
“Please consider increasing the maximum amount of inotify user watches (fs.inotify.max_user_watches) in WSL2. The current limit (8192) is too low for most projects.”
In this condition you can increase the current limit via code below,
sudo sysctl -w fs.inotify.max_user_watches=122884. Build and start your app.
npx react-native run-android command will start your app.
You will probably get a Gradle error after this command. For this, you need to replace version the file shown in the picture below and save the file.
To fix this error, go to your project folder> android> gradle> wrapper. Open the gradle-wrapper.properties file. Change the gradle-6.2-all.zip in the value of the distributionURL to gradle-6.7.1-all.zip. Save the file. Restart your project. This is all. Congratulations, your project is ready to edit.
Thank you for reading.
My enabled repos during installation:
codeready-builder-for-rhel-8-x86_64-rpms
epel
epel-modular
google-chrome
rhel-8-for-x86_64-appstream-rpms
rhel-8-for-x86_64-baseos-rpms
rpmfusion-free-updatesThanks for reading. You might want to check the blog posts in the Clarusway website as well. See you in the next story.
Linkedin at -> https://www.linkedin.com/posts/mark-madison_how-to-install-react-native-cli-on-red-hat-activity-6746505060177506304-Xsi7
