How to deploy an environment for developing applications on React Native on Windows

  • Tutorial

Good day!


Having decided to start developing applications for React Native, I was faced with the problems of deploying the environment. Today I want to share the experience of setting it up.

Of course, the official site has a detailed description, but following only these recommendations, it was quite difficult to make all the settings.



So, let's begin:

Node, Python2, JDK


  • Install NodeJS . I have the latest version at the time of writing of article 10.11.0
  • Install Python2 and JavaSE . Used jdk-10.0.2


React Native CLI


  • Install React Native CLI

npm install -g react-native-cli

Android development environment


  • Download and install Android Studio

    Once launched, select a custom installation

    image

    Next tick the «Android Virtual Device» and indicate let to Android folder - or leave as is C: \ Users \% USERNAME% \ AppData \ Local \ Android \ Sdk
    main thing is that the way there was no cyrillic!
    Especially with this, problems may arise in the future. For example, my system username was in Cyrillic “C: \ Users \ Alexander”, and after launching the application grandle could not find the path, because the path looked like “C: \ Users \ ???????? \ ... "

    image

    Click "Next". We leave the recommended amount of RAM, click next and install.
  • Android SDK - open the studio and go to the settings
    Appearance & Behavior → System Settings → Android SDK .

    On the “SDK Platforms” tab, enable the “Show Package Details” checkbox and for “Android 8.0 (Oreo)” set:

    • Android SDK Platform 26
    • Intel x86 Atom_64 System Image
    • Google APIs Intel x86 Atom_64 System Image

    image

    Now select the “SDK Tools” tab , enable the “Show Package Details” checkbox
    and install the package

    • "28.0.3"

    Click "Apply".


Environment Variables


  • ANDROID_HOME
    Create a variable for ANDROID_HOME :

    image

    • Variable Name ANDROID_HOME
    • Variable value (can be viewed in Android Studio)

    image
  • JAVA_HOME
    By analogy, create a JAVA_HOME variable :

    • Variable Name: JAVA_HOME
    • Variable value: C: \ Program Files \ Java \ jdk- (version)

  • Let's change the system variable Path:

    image

    Add 4 values:

    1. % JAVA_HOME% \ bin
    2. % ANDROID_HOME%
    3. % ANDROID_HOME% \ platform-tools
    4. % ANDROID_HOME% \ watchman


Create an application and run the emulator


  • Go to a convenient folder for us in the console and type:
    react-native init MyTestProject
  • Open our project in Android Studio and open the AVD Manager.

    image

    If the AVD is not downloaded, download and run
  • Next, go to the console in the folder with the application and type:
    react-native run-android

    Then found the application started.

This article used the official guide from React Native
+ personal experience!

I hope this article will help those who have encountered problems or decided to start developing native applications on React
.

Also popular now: