Creating an application with React Native and VSCode

In this tutorial, we’ll look at how to program a smartphone application using React Native and VSCode. React Native is a powerful tool for creating cross-platform applications (Android, IOs) using the JavaScript language. Visual Studio Code is a code editor for development in C++, Python and React Native.

We’ve already seen how to create an Android application with App Inventor 2 in the context of an Arduino or Raspberry Pi project. With React Native, although more complex, you’ll be able to create more advanced applications and develop on Android and IOs.

Installing Node.js

Node.js is a Javascript runtime environment for back-end and front-end development.

To install Node.js on your Windows computer, simply download the installer

Once you’ve installed Node.js, you’ll have access to npm (Node Package Manager), which lets you install the necessary packages.

Installing and configuring Android Studio

Download and install Java JDK 11

Configure JAVA_HOME in environment variables (C:\Program Files\Microsoft\jdk-11.0.17.8-hotspot\)

Download and run the Android Studio installer

Configure ANDROID_HOME in environment variables (C:\Users\ADMIN\AppData\Local\Android\Sdk)

Open Android Studio. On the Home window, click on Configure then AVD Manager

Here you can define the virtual devices on which to test your application.

N.B.: The installation and configuration of Android Studio and the correct operation of virtual devices may depend on the installation of Android SDK, Java SDK and Gradle, etc. Check that the versions are compatible.

Installing and configuring Visual Studio Code

To install Visual Studio Code, simply download and run the installer

Once the software is installed, you can add the extensions required for development under React Native with VSCode.

Creating a React Native project

Create a folder containing your ReactNative project, then open it in VSCode.

In the terminal,

npx react-native@latest init CustomApp

Install dependencies with yarn and launch the application

cd CustomApp
npm install -g yarn  
yarn install
npx react-native start

Then press “a” to run it on Android

View the application on an Android device

On your Android phone, in “Settings”, go to “Additional settings” then “Developer options”. Look for the “USB debugging” option and enable it. This will enable you to install applications via the USB port.

You can check that your device is correctly detected and configured with the adb devices command.

Once your device is correctly configured, if you relaunch the application it will be downloaded and installed on the device.

You are now able to develop and install your application on a device.

N.B.: If you have difficulty installing a simulator or if you don’t have a device, you can also view the results on CodeSandBox to test your application.

APK generation

Once your application has been tested and validated on a simulator or real device, you can generate the APK file. This file can be downloaded to any device with a compatible OS, and is used to install the application.

In the android/build.gradle file, check that the SDK version (API level) corresponds to the target platform version

buildscript {
    ext {
        buildToolsVersion = "33.0.0"
        minSdkVersion = 21
        compileSdkVersion = 33
        targetSdkVersion = 33

        // We use NDK 23 which has both M1 support and is the side-by-side NDK version from AGP.
        ndkVersion = "23.1.7779620"
    }
    repositories {
        google()
        mavenCentral()
    }
    dependencies {
        classpath("com.android.tools.build:gradle:7.3.1")
        classpath("com.facebook.react:react-native-gradle-plugin")
    }
}

At the root of the CustomApp project, enter the following commands on VS Code

cd android
./gradlew assembleRelease

It is possible to clean up the compilation before generating the build with the command

./gradlew clean

Modify application icon

Application icons can be found in the android folder

To replace the application’s default icons, you need to create icons of different sizes. This can be done easily with the IconKitchen tool, which loads an image and generates all icon formats. Once you’ve downloaded the IconKitchen-Output folder, you can replace the following folders in your project’s res folder.

• mipmap-hdpi
• mipmap-mdpi
• mipmap-xhdpi
• mipmap-xxhdpi
• mipmap-xxxhdpi

N.B.: Modify the file name with the original file name if necessary, or change the file name in AndroidManifest.xml

React Native: best practices

There are different ways of doing the same thing, especially in programming. However, the experience of many shows that good habits allow you to work more efficiently.

• Add TypeScript to improve code readability and prevent bugs
• Use responsive styles that adapt to different screen sizes
• Use platform-dependent styles
• Prefer functional components to class components
• Create a theme in which you specify the interface styles
• Define the various user paths

Applications

• Create IOs or Android applications to communicate with connected objects based on Android, Raspberry Pi, ESP32, ESP8266, etc.
• Creating a Bluetooth terminal on Android

Sources

• React Native
• Generate APK
• Node.js
• Creating a Bluetooth application with App inventor 2