Getting Started with React Native on Android

Development Tools: React Native needs an Android studio setup for Android and XCode for iOS development. For React Native project development, an IDE like Atom, Notepad++, Sublime, or Visual Studio Code can be used.
UI Widget: React Native provides a comprehensive set of APIs (UI components) to build UI for a React Native app, so there is no HTML, only predefined core components APIs to build UI interface.
Style: React Native doesn't use CSS or HTML. Instead, it uses StyleSheet API object (like JSON) to define style properties for widgets (views or UI component).
UI Structure: To mimic the Native UI, React Native uses the core UI APIs to build the interface so there is no DOM or window object.
Platform-specific UI: There are still some APIs that are not supported by React Native core UI components like Map, so React Native offers the support to create a native module to create a wrapper to use platform-specific APIs or third party modules.

An expo project can be run directly into the browser without any external dependency (XCode or Android studio).
Expo offers easy app sharing via link or QR-code, which is quite useful to release and test updates.
Expo offers inbuilt APIs like Camera, SMS, etc.

No support for Native modules or external libraries that requires Native code.
Expo covers a wide variety of APIs but it still does not support all Native APIs.

Technologies

Basics of JavaScript
HTML, Objects, and EcmaScript 6 (ES6 classes and arrow functions, etc.)

Tools

Node.js
Command line interface (CLI)

MacOS or Linux

Verify Homebrew installation using brew -v, and if Homebrew is not installed then install Homebrew using

1/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install.sh)"

sh

Note: Homebrew installation requires the xcode-select command-line tool to work so it's recommended to install Xcode as well or it will ask to confirm the installation of xcode-select tool.

Install node and watchman

1brew install node watchman

Install JDK using break cask to install GUI software installation setups

1brew cask install adoptopenjdk/openjdk/adoptopenjdk8

Download Android Studio and follow the official installation steps (from video), as per operating system.
Add the required android SDK dependencies' paths in environment variables for React Native:
1# can use any editor instead of open
2open ~/.bash_profile
sh
Paste the following text at the end of the file
1# after other pre-configured environment variables
2export ANDROID_HOME=$HOME/Library/Android/sdk
3export PATH=$PATH:$ANDROID_HOME/emulator
4export PATH=$PATH:$ANDROID_HOME/tools
5export PATH=$PATH:$ANDROID_HOME/tools/bin
6export PATH=$PATH:$ANDROID_HOME/platform-tools
sh

1chsh -s /bin/zsh
2# create the .zprofile under users/your_user_name and copy content from bash_profile, save it
3source ~/.zprofile

Helpful Commands

printenv prints all environment variables.
xcode-select --version allows you to view the version of xcode-select CLI.

Windows

Download Chocolatey package manager and run the below command in command-prompt (run as Administrator):

1choco install -y nodejs.install python2 openjdk8

Download Android Studio and follow the official installation steps (with video), as per operating system.
Add the default android SDK path in environment variables, and make sure to replace UserName with your username:

1setx ANDROID_HOME "C:\Users\UserName\AppData\Local\Android\SDK"

1setx /M PATH "%PATH%;C:\Users\UserName\AppData\Local\Android\SDK\platform-tools"

Create a React Native project:

1npx react-native init RNClickCounter

Follow the steps to create an android virtual device (AVD)
Run the projects:

1cd RNClickCounter
2npx react-native run-android --verbose

Known Gradle Issues

InvokerHelper Error: Gradle version 6.1.1 can cause this issue, so make sure to update distributionUrl attribute in RNClickCounter\android\gradle\wrapper\gradle-wrapper.properties file:

1# To fix the "Could not initialize class org.codehaus.groovy.runtime.InvokerHelper" error, use latest gradle
2distributionUrl=https\://services.gradle.org/distributions/gradle-6.5.1-all.zip

1classpath("com.android.tools.build:gradle:4.0.0")

Index.js is an entry point for a React app to register the app and to load required modules for the JS executions environment.
App.js is the first/main screen of the app.
android folder contains all the Native Android development, and build files, which is almost similar to the Native Android project structure.
ios folder contains all the Native iOS development and build files, which is almost similar to the Native iOS project structure.
package.json contains the details about the app (name, version), dependencies, and executable script details.
app.json contains the app name details.

SafeAreaView adds the required padding for camera-notches/sensor-housing and reflects the area that is not covered by any of the top views like toolbar, navigation, etc.
Text displays text on the screen. It is similar to UILabel, TextView, or <p> tag.
View is a basic UI container element with flexbox layout support. The Native equivalents of view are UIView, View, or div tag.
Button represents the Native platform-specific button with platform-specific style.
StyleSheet is used to define the style attributes for elements that will be mapped to Native-style values.
useState is a React hook that is used to maintain a state (stored values) in a functional component. This is used in the App.js functional component to keep the track of the counter variable’s state. The counter variable should be modified by the callback method setCount, and returned by useState.
export default App is used to allow other components to import the App component. There can be only one default export in a file.
flex: 1 is used to define the CSS3 flexbox style responsive layout vertically.
React$Node represents a type of React node (from flow type check) whose value can be a ReactChild, ReactFragment, ReactPortal, boolean, null, number, or string.

Implement react-hook to store the updated value of count. The setCount method will be used to update the value of count:

1  const [count, setCount] = useState(0);

Implement callback functions to increment/decrement the value of count:

1  const counterPlus = () => {
2    setCount(count + 1 <= Number.MAX_SAFE_INTEGER ? count + 1 : count)
3  }
4
5  const counterMinus = () => {
6    setCount(count - 1 >= Number.MIN_SAFE_INTEGER ? count - 1 : count)
7  }

Create the style object to center the views inside container elements, and design details for other views such as Button and Text:

1const styles = StyleSheet.create({
2  container: {
3    flex: 1,
4    justifyContent: 'center',
5    alignItems: 'center',
6    backgroundColor: '#e6e6fa',
7  },
8  textConter: {
9    fontSize: 28,
10    color: '#000',
11  },
12  buttonStyle: {
13    width: "80%",
14    margin: 10,
15  }
16});

Now apply the style to the elements and add the listener on the button to complete the implementation:

1import React, { useState } from "react";
2import { SafeAreaView, StyleSheet, Text, StatusBar, Button, View} from 'react-native';
3
4const App: () => React$Node = () => {
5
6  const [count, setCount] = useState(0);
7
8  const counterPlus = () => {
9    setCount(count + 1 <= Number.MAX_SAFE_INTEGER ? count + 1 : count)
10  }
11
12  const counterMinus = () => {
13    setCount(count - 1 >= Number.MIN_SAFE_INTEGER ? count - 1 : count)
14  }
15
16  return (
17    <>
18      <StatusBar barStyle="dark-content" />
19      <SafeAreaView style={styles.container}>
20        <Text style={styles.textConter} >{count}</Text>
21        <View style={styles.buttonStyle}>
22          <Button
23            onPress={counterPlus}
24            title='+' />
25        </View>
26        <View style={styles.buttonStyle}>
27          <Button
28            onPress={counterMinus}
29            title='-' />
30        </View>
31      </SafeAreaView>
32    </>
33  );
34};
35
36const styles = StyleSheet.create({
37  container: {
38    flex: 1,
39    justifyContent: 'center',
40    alignItems: 'center',
41    backgroundColor: '#e6e6fa',
42  },
43  textConter: {
44    fontSize: 28,
45    color: '#000',
46  },
47  buttonStyle: {
48    width: "80%",
49    margin: 10,
50  }
51});
52
53export default App;