React Native

What is it

React native is a open source mobile application framework created by Facebook. With this framework you are able to write code like React to build native applications.

How to start

Environment setup

  • JDK.
  • Android SDK.
    • The Android SDK come as default in the Android Studio installation (React native requires Android 10 (Q) SDK, you can install it using the SDK Manager on Android Studio).
  • Environment variables.
    • JAVA_HOME - Path to JDK installation folder (example: C:\Program Files\OpenJDK\openjdk-8u262-b10)
    • ANDROID_HOME - Path to android SDK folder (example C:\Users\user\AppData\Local\Android\Sdk).
    • ADB_HOME - Path to android platform-tools folder (example: C:\Users\user\AppData\Local\Android\Sdk\platform-tools)

ADB

After the environment setup you will be able to use the command adb on terminal to list all devices connected.

Useful commands for adb

  • adb devices List all connected devices.
  • adb connect Connect to a device via wifi.
  • adb reverse tcp:8081 tcp:8081 Use this to connect the device if you are using a real device attached via usb (The newest versions run this command when you start the application with run-android or run-ios).

Creating a new app

  • Make sure that you have configured all react-native dependencies.
  • Open the terminal and create a new application npx react-native init HelloWorld.
  • Go to the created application folder cd HelloWorld.
  • Use npx react-native run-android or npx react-native run-ios to start the application.

    If you are using android make sure that you have a device running use adb devices to list it all (Newest versions start a new emulator instance if there is no valid device listed on adb).

Running on a real device

  • Make sure you have enable debugging over USB.

    To enable USB debugging on your device, you will first need to enable the "Developer options" menu by going to Settings → About phone → Software information and then tapping the Build number row at the bottom seven times. You can then go back to Settings → Developer options to enable "USB debugging".

  • Plug your device via usb (use adb devices to see if its connected).
  • Run the app npx react-native run-android.

Functional components and class components

With react you can write components using class or functions.

When using functional components you must use alongside with hooks to be able to use states.

//Class component
import React, { Component } from "react";
import { Text, View } from "react-native";

class HelloWorldApp extends Component {
  render() {
    return (
      <View
        style={{
          flex: 1,
          justifyContent: "center",
          alignItems: "center",
        }}
      >
        <Text>Hello, world!</Text>
      </View>
    );
  }
}

//Function component
import React from "react";
import { Text, View } from "react-native";

const HelloWorldApp = () => {
  return (
    <View
      style={{
        flex: 1,
        justifyContent: "center",
        alignItems: "center",
      }}
    >
      <Text>Hello, world!</Text>
    </View>
  );
};

How we use

Whe currently use react native with functional components, hooks and react navigation to navigate between scenes. We also have some old projects that still use classes and react-native-router-flux to navigate. When its needed we use the react native with redux and its middlewares like redux-thunk or redux-saga

How to learn

Useful materials

Validating knowledge

  • Create a new application using the commands listed.
  • Run the application on a device and start to make changes on the App.js.
  • Add the react-navigation dependency and configure it.
  • Create 2 routes and navigate between them.

Useful commands

  • npx react-native init NomeDoProjeto Create a new application.
    • --version Tag to create a new application with a specific version (--version X.XX.X).
    • --template Tag to create a new application with a specific template (--template react-native-template-typescript starts with typescript template).
  • npx react-native start Start the Metro bundler.
  • npx react-native run-android Start the application to an Android environment.
  • npx react-native run-ios Start the application to a IOS environment.

Issues

← Styled ComponentsStore Testing →