React Native – Beginner’s Notes

Introduction

As when I started working on React more than 1 year ago, I faced many noob issues that I think many newbies will also struggle with. Several weeks ago, I enter the React Native world, and I have been learning as a newbie again. As I do not have enough time to dedicate 100% effort for this technology, I often need to stop and continue in next day / week. So I think I need a new entry for me to remind things, and also for others, in case they need. Let’s start my new blog entry: React Native – Beginner’s Notes.

Beginner’s Notes for React Native Noobs

  1. As the time I am writing, the create-react-native-app does not work well with npm version 5. So if you are having [email protected], you will need to downgrade it to v4. Just go to the terminal / console and run
    sudo npm install [email protected] -g

    and you will be fine.

  2. If you cannot run npm start due to maxfiles and maxfilesperproc settings in kernel, just run the following command lines as root (using sudo)
    sudo sysctl -w kern.maxfiles=5242880
    sudo sysctl -w kern.maxfilesperproc=524288

    . In order to get it run when the machine is booted, just append (or create if it does not exists) to the file /etc/sysctl.conf.

  3. When starting a react native app, in order to see the app in a real device, the easiest way is to install the expo client to your iOS/Android phone and scan the barcode provided by the npm start command.
  4. To start an Android simulator, you will need to be sure that adb command line is visible to your console. If you already install Android Studio but still cannot find it in the command line, just open Android Studio, go to Preferences and go to SDK section, copy its path (e.g. /Users/tienle/Library/Android/sdk in my case). Then open ~/.bash_profile file and append the following lines to add necessary paths to the system PATH variable:
    export PATH=$PATH:/Users/tienle/Library/Android/sdk/platform-tools
    export PATH=$PATH:/Users/tienle/Library/Android/sdk/tools
    export ANDROID_HOME=/Users/tienle/Library/Android/sdk
  5. In case you are running GenyMotion as a lightweight Android simulator, you need to be sure to set the following information:
    1. Your ADB setting must point to the same path as the system ADB: Go to Settings >> ADB >> “Use custom Android SDK tools” and input your android sdk path there (e.g. /Users/tienle/Library/Android/sdk in my case)
    2. There should be at least  one virtual device in GennyMotion.
    3. You need to start a virtual android device before going back to the command line and start the react native app with an android simulator.
  6. When building Android, if you integrate a third-party package and it throws error “Could not find com.android.support:support-v4:26.0.0“, then we need to add Google maven repo to the top level build.gradle file as follows:
    allprojects {
        repositories {
            mavenLocal()
            jcenter()
            maven {
                // All of React Native (JS, Obj-C sources, Android binaries) is installed from npm
                url "$rootDir/../node_modules/react-native/android"
            }
            maven { url "https://maven.google.com" }
        }
    }
    
  7. If you faced a stupid error like “UnhandledPromiseRejectionWarning: Unhandled promise rejection (rejection id: 1): Error: fsevents unavailable (this watcher can only be used on Darwin)”, then after checking the npm is v4, you then can just simply delete the node_modules folder and reinstall using yarn:
    rm -fr node_modules && yarn
  8. To be continued…

Leave a Reply