We will set up new react native application from scratch in Fedora Linux.
This is a lengthy article. I think it would take around 1-1.5 hr to complete.

If you face any issues with setup. Please contact me on chat – @TesMachino

1. Set up React Native Application
2. Install Global React-Native Devtools
2. Install Debugger
3. Install Reactcon

Step 1:

Install React Native
There are two ways you could start development in React Native
1) React Native CLI
2) Expo

Here is a quick Differentiation between two methodology,

React Native CLI
React native CLI is better suited for developeres who have an on-hands experience in Mobile development before hand due to the slight complex set up structure.
Pros.
React Native gives full power to customize and creates a open path for your creativity with tons of third party library.
Cons.
The major downside for this is that you need to setup build chains for both platforms on your system. For Android you will need Android Studio and for iOS you will need to setup Xcode so that you can build and test on your devices. That is specially cumbersome for someone who is not aware of these tools and build systems, specially when building for production.

EXPO
If you are new to mobile development, the easiest way to get started is with Expo CLI. Expo is a set of tools built around React Native and, while it has many features, the most relevant feature for us right now is that it can get you writing a React Native app within minutes. You will only need a recent version of Node.js and a phone or emulator. If you’d like to try out React Native directly in your web browser before installing any tools, you can try out Snack.
Pros.
Managed workflow. You will never have to worry about setup.
Cons.
The downside to using Expo is that you cannot extend the native functionality while writing your app. Which means, if you wish to integrate a third party native library or extend app functionality with native code, then you simply cannot do it.

The Application Builds are generally slow and dependent on their Servers

General Trivia
Most of the use cases for apps can be covered by Expo and if you feel the need of third party libraries then you can always eject the project to the plain react-native like project. You can also refer this guide written by people behind Expo helping you make the decision.

So if you are a developer just getting started with React Native, Expo is the goto solution for you. Try it.

Environment Setup

We will be using React Native CLI for the setup,
If you have ejected from expo you can use this article for setup.

OS : Fedora 29 and above

You will need Node, the React Native command line interface, a JDK, and Android Studio

Installing Node && Yarn,

sudo dnf install nodejs

sudo dnf install yarnpkg

Installing npm modules

Installing Node.js modules is covered in Node.js modules.

Installing Global Modules

Create a directory for global installations inside your home directory:

mkdir ~/.npm-global

Set the new directory path for npm:

npm config set prefix '~/.npm-global'

Open/create the ~/.profile file and add the following line:

export PATH=~/.npm-global/bin:$PATH

Update your system variables with this command:

source ~/.profile

Setting up Oracle JDK

Download Page
Get the latest Java SE Development Kit “critical patch update” release from oracle.com, and if OpenJDK is already installed then configure these alternatives:

[tesmachino@desktop-tesmachino ~]$ 
sudo yum localinstall ~/Downloads/jdk-16.0.2_linux-aarch64_bin.rpm
sudo alternatives --install /usr/bin/java java /usr/java/latest/jre/bin/java 200000
sudo alternatives --install /usr/bin/javaws javaws /usr/java/latest/jre/bin/javaws 200000
sudo alternatives --install /usr/bin/javac javac /usr/java/latest/bin/javac 200000
sudo alternatives --install /usr/bin/jar jar /usr/java/latest/bin/jar 200000
sudo alternatives --install /usr/lib64/mozilla/plugins/libjavaplugin.so libjavaplugin.so.x86_64 /usr/java/latest/jre/lib/amd64/libnpjp2.so 200000

Check the version to make sure Oracle’s version is running

[tesmachino@desktop-tesmachino ~]$  java -version
openjdk version "1.8.0_302"
OpenJDK Runtime Environment (build 1.8.0_302-b08)
OpenJDK 64-Bit Server VM (build 25.302-b08, mixed mode)
[tesmachino@desktop-tesmachino ~]$  javac -version
javac 1.8.0_302

Set up the JAVA_HOME environment variable to point to Oracle’s Java location in ~/.bash_profile, or possibly an /etc/profile.d/ file.

export JAVA_HOME="/usr/java/latest"

Installing JDK and env path for Android Studio

Android Studio likes to run in Oracle’s runtime, and the cache and config files it stores in the user’s home directory (including virtual device images) start to eat up too much space on our network home mount. Here’s how to set up Oracle JDK and Android Studio on Fedora Workstation, and configure Android Studio to keep its files on a local drive.

Setting up Android Studio

Download Link
Install these 32-bit dev libraries

sudo yum install glibc.i686 glibc-devel.i686 libstdc++.i686 zlib-devel.i686 ncurses-devel.i686 libX11-devel.i686 libXrender.i686 libXrandr.i686

Required libraries for 64-bit machines

If you are running a 64-bit version of Ubuntu, you need to install some 32-bit libraries with the following command:

sudo apt-get install libc6:i386 libncurses5:i386 libstdc++6:i386 lib32z1 libbz2-1.0:i386

If you are running 64-bit Fedora, the command is:

sudo yum install zlib.i686 ncurses-libs.i686 bzip2-libs.i686

Download Android Studio from https://developer.android.com/sdk/installing/studio.html

Download Android SDK (tools only) from https://developer.android.com/sdk/index.html

Run df to figure out which local partition is suitable for installing Android Studio to, and make a directory there. For example,

[tesmachino@desktop-tesmachino ~]$ df -h
Filesystem                    Size  Used Avail Use% Mounted on
...
/dev/sda3                      50G  9.5G   38G  21% /
/dev/sda1                     477M  122M  327M  28% /boot
/dev/sda2                     405G   28G  357G   8% /home

I created a directory under /home: /home/tesmachino. Extract the SDK and IDE to this directory.

Unpack the .zip file you downloaded to an appropriate location for your applications, such as within /usr/local/ for your user profile, or /opt/ for shared users.If you’re using a 64-bit version of Linux, make sure you first install the required libraries for 64-bit machines.
To launch Android Studio, open a terminal, navigate to the android-studio/bin/ directory, and execute studio.sh.
Select whether you want to import previous Android Studio settings or not, then click OK.
The Android Studio Setup Wizard guides you through the rest of the setup, which includes downloading Android SDK components that are required for development.

tar -C /home/jamchamb-local -xzf ~/Downloads/android-sdk_r23.0.2-linux.tgz
tar -C /home/jamchamb-local -xzf ~/Downloads/android-studio-bundle-135.1339820-linux.tgz

Configuring Android Studio

Edit android-studio/bin/idea.properties to configure IDEA to use your local directory for configuration files, etc. Uncomment and alter the lines for idea.config.path and idea.system.path:

idea.config.path=${idea.home.path}/../.AndroidStudio1.2/config
idea.system.path=${idea.home.path}/../.AndroidStudio1.2/system

To keep the local Maven repository on disk, update (or create) ~/.m2/settings.xml:

<?xml version="1.0" encoding="UTF-8"?>
<settings xmlns="http://maven.apache.org/SETTINGS/1.0.0"
          xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
          xsi:schemaLocation="http://maven.apache.org/SETTINGS/1.0.0 http://maven.apache.org/xsd/settings-1.0.0.xsd">

    <localRepository>/home/jamchamb-local/android-sdk-linux/extras/android/m2repository/</localRepository>
    <localRepository>/home/jamchamb-local/android-sdk-linux/extras/google/m2repository/</localRepository>

</settings>

Then run android-studio/bin/studio.sh to start Anroid Studio, and in the settings change the Gradle service directory to be /home/<user-dir>/.gradle.

Configure the ANDROID_HOME environment variable

The React Native tools require some environment variables to be set up in order to build apps with native code.

Add the following lines to your $HOME/.bash_profile or $HOME/.bashrc (if you are using zsh then ~/.zprofile or ~/.zshrc) config 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

Copy

.bash_profile is specific to bash. If you’re using another shell, you will need to edit the appropriate shell-specific config file.

Type source $HOME/.bash_profile for bash or source $HOME/.zprofile to load the config into your current shell. Verify that ANDROID_HOME has been set by running echo $ANDROID_HOME and the appropriate directories have been added to your path by running echo $PATH.

Please make sure you use the correct Android SDK path. You can find the actual location of the SDK in the Android Studio “Preferences” dialog, under Appearance & Behavior → System Settings → Android SDK.

Downloading SDK packages

Now you can open the Android SDK Manager and start downloading required packages.

Normally this includes:

Android SDK Platform-tools
Android SDK Build-tools
An SDK platform, e.g. Android 4.4 (API 19)
Android Support Repository
Android Support Library
Google Play services
Google Repository

Tip: To make Android Studio available in your list of applications, select Tools > Create Desktop Entry from the Android Studio menu bar.

OFFICIAL ARTICLE

Creating a new application

React Native has a built-in command line interface, which you can use to generate a new project. You can access it without installing anything globally using npx, which ships with Node.js. Let’s create a new React Native project called “AwesomeProject”:

npx react-native init TesMachinoTestApp

Copy

This is not necessary if you are integrating React Native into an existing application, if you “ejected” from Expo, or if you’re adding Android support to an existing React Native project (see Integration with Existing Apps). You can also use a third-party CLI to init your React Native app, such as Ignite CLI.

Create and manage virtual devices

An Android Virtual Device (AVD) is a configuration that defines the characteristics of an Android phone, tablet, Wear OS, Android TV, or Automotive OS device that you want to simulate in the Android Emulator. The AVD Manager is an interface you can launch from Android Studio that helps you create and manage AVDs.

To open the AVD Manager, do one of the following:

Select Tools > AVD Manager.
Click AVD Manager in the toolbar.

About AVDs

An AVD contains a hardware profile, system image, storage area, skin, and other properties.

We recommend that you create an AVD for each system image that your app could potentially support based on the <uses-sdk> setting in your manifest.

Hardware profile

The hardware profile defines the characteristics of a device as shipped from the factory. The AVD Manager comes preloaded with certain hardware profiles, such as Pixel devices, and you can define or customize the hardware profiles as needed.

Notice that only some hardware profiles are indicated to include Play Store. This indicates that these profiles are fully CTS compliant and may use system images that include the Play Store app.

System images

A system image labeled with Google APIs includes access to Google Play services. A system image labeled with the Google Play logo in the Play Store column includes the Google Play Store app and access to Google Play services, including a Google Play tab in the Extended controls dialog that provides a convenient button for updating Google Play services on the device.

To ensure app security and a consistent experience with physical devices, system images with the Google Play Store included are signed with a release key, which means that you cannot get elevated privileges (root) with these images. If you require elevated privileges (root) to aid with your app troubleshooting, you can use the Android Open Source Project (AOSP) system images that do not include Google apps or services.

Storage area

The AVD has a dedicated storage area on your development machine. It stores the device user data, such as installed apps and settings, as well as an emulated SD card. If needed, you can use the AVD Manager to wipe user data, so the device has the same data as if it were new.

Skin

An emulator skin specifies the appearance of a device. The AVD Manager provides some predefined skins. You can also define your own, or use skins provided by third parties.

AVD and app features

Be sure your AVD definition includes the device features your app depends on. See Hardware Profile Properties and AVD Properties for lists of features you can define in your AVDs.

Create an AVD

Tip: If you want to launch your app into an emulator, instead run your app from Android Studio and then in the Select Deployment Target dialog that appears, click Create New Virtual Device.

To create a new AVD:

Open the AVD Manager by clicking Tools > AVD Manager.
Click Create Virtual Device, at the bottom of the AVD Manager dialog.The Select Hardware page appears.
Notice that only some hardware profiles are indicated to include Play Store. This indicates that these profiles are fully CTS compliant and may use system images that include the Play Store app.
Select a hardware profile, and then click Next.
Select the system image for a particular API level, and then click Next.
Change AVD properties as needed, and then click Finish.Click Show Advanced Settings to show more settings, such as the skin.

To create an AVD starting with a copy:

From the Your Virtual Devices page of the AVD Manager, right-click an AVD and select Duplicate.
Click Change or Previous if you need to make changes on the System Image and Select Hardware pages.
Make your changes, and then click Finish.

Running your React Native application

Step 1: Start Metro

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.”—Metro Docs

To start Metro, run npx react-native start inside your React Native project folder:

npx react-native start

Copy

react-native start starts Metro Bundler.

If you use the Yarn package manager, you can use yarn instead of npx when running React Native commands inside an existing project.

If you’re familiar with web development, Metro is a lot like webpack—for React Native apps. Unlike Kotlin or Java, JavaScript isn’t compiled—and neither is React Native. Bundling isn’t the same as compiling, but it can help improve startup performance and translate some platform-specific JavaScript into more widely supported JavaScript.

Step 2: Start your application

Let Metro Bundler run in its own terminal. Open a new terminal inside your React Native project folder. Run the following:

npx react-native run-android

Copy

If everything is set up correctly, you should see your new app running in your Android emulator shortly.

npx react-native run-android is one way to run your app – you can also run it directly from within Android Studio.

If you can’t get this to work, see the Troubleshooting page.

Modifying your app

Now that you have successfully run the app, let’s modify it.

Open App.js in your text editor of choice and edit some lines.
Press the R key twice or select Reload from the Developer Menu (Ctrl + M) to see your changes!

Congratulations! You’ve successfully run and modified your first React Native app.

Installing Flipper

Building from Source

Desktop

Running from source

git clone https://github.com/facebook/flipper.git
cd flipper/desktop
yarn
yarn start

React Developer Tools#

You can use the standalone version of React Developer Tools to debug the React component hierarchy. To use it, install the react-devtools package globally:

Note: Version 4 of react-devtools requires react-native version 0.62 or higher to work properly.

npm
Yarn

npm install -g react-devtools

Now run react-devtools from the terminal to launch the standalone DevTools app:

react-devtools

It should connect to your simulator within a few seconds.

Installing Reactotron.app

Let’s download the desktop app to start. You can download for Linux, Windows, and Mac.

Unzip & run.

Configure Reactotron with your project

Let’s install Reactotron on your project as a dev dependency. Don’t have a React Native project yet? Follow the Getting Started guide in the React Native documentation.

npm i --save-dev reactotron-react-native

I like a separate file for initializing. Create ReactotronConfig.js in your editor of choice and paste this:

import Reactotron from 'reactotron-react-native'

Reactotron
  .setAsyncStorageHandler(AsyncStorage) // AsyncStorage would either come from `react-native` or `@react-native-community/async-storage` depending on where you get it from
  .configure() // controls connection & communication settings
  .useReactNative() // add all built-in react native plugins
  .connect() // let's connect!

Finally, we import this on startup in

App.js (Create React Native App) or
index.js on line 1:

if(__DEV__) {
  import('./ReactotronConfig').then(() => console.log('Reactotron Configured'))
}

At this point, Reactotron is hooked up.

Note: If using an Android device or emulator run the following command to make sure it can connect to Reactotron:

adb reverse tcp:9090 tcp:9090

Refresh your app (or start it up react-native start) and have a look at Reactotron now. Do you see the CONNECTION line? Click that to expand.

Finally!! Your App is ready to use and debug

Cookie	Duration	Description
cookielawinfo-checkbox-analytics	11 months	This cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Analytics".
cookielawinfo-checkbox-functional	11 months	The cookie is set by GDPR cookie consent to record the user consent for the cookies in the category "Functional".
cookielawinfo-checkbox-necessary	11 months	This cookie is set by GDPR Cookie Consent plugin. The cookies is used to store the user consent for the cookies in the category "Necessary".
cookielawinfo-checkbox-others	11 months	This cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Other.
cookielawinfo-checkbox-performance	11 months	This cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Performance".
viewed_cookie_policy	11 months	The cookie is set by the GDPR Cookie Consent plugin and is used to store whether or not user has consented to the use of cookies. It does not store any personal data.

#1 Way to set up React Native for Development – Beginner Dummies Guide

Table of Contents

1. Set up React Native Application
2. Install Global React-Native Devtools
2. Install Debugger
3. Install Reactcon

Step 1:

Installing npm modules

Installing Global Modules

Setting up Oracle JDK

Setting up Android Studio

Required libraries for 64-bit machines

Configuring Android Studio

Configure the ANDROID_HOME environment variable

Downloading SDK packages

Create and manage virtual devices

About AVDs

Hardware profile

System images

Storage area

Skin

AVD and app features

Create an AVD

Running your React Native application

Step 1: Start Metro

Step 2: Start your application

Modifying your app

Installing Flipper

Building from Source

Desktop

Running from source

React Developer Tools#

Installing Reactotron.app

Configure Reactotron with your project

Table of Contents

1. Set up React Native Application2. Install Global React-Native Devtools2. Install Debugger3. Install Reactcon

Step 1:

Installing npm modules

Installing Global Modules

Setting up Oracle JDK

Setting up Android Studio

Required libraries for 64-bit machines

Configuring Android Studio

Configure the ANDROID_HOME environment variable

Downloading SDK packages

Create and manage virtual devices

About AVDs

Hardware profile

System images

Storage area

Skin

AVD and app features

Create an AVD

Running your React Native application

Step 1: Start Metro

Step 2: Start your application

Modifying your app

Installing Flipper

Building from Source

Desktop

Running from source

React Developer Tools#

Installing Reactotron.app

Configure Reactotron with your project

1. Set up React Native Application
2. Install Global React-Native Devtools
2. Install Debugger
3. Install Reactcon