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

    [bash]sudo npm install [email protected] -g[/bash]

    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)

    [bash]sudo sysctl -w kern.maxfiles=5242880
    sudo sysctl -w kern.maxfilesperproc=524288[/bash]

    . 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:

    [bash]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[/bash]

  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:

    [bash]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” }
    }
    }
    [/bash]

  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:

    [bash]rm -fr node_modules && yarn[/bash]

  8. In case you install react-native CLI version 3.0.x, init a new project, and fail at “pod install” for glog  (w/ error “/bin/sh^M: bad interpreter: No such file or directory“), then you might need to change “node_modules/react-native/scripts/ios-configure-glog.sh” and add the following lines before “./configure“: 
    dos2unix -f configure
    dos2unix -f config.sub
    dos2unix -f config.guess

    ./configure --host arm-apple-darwin
  9.  


About NhocConan

A super lazy guy who tries to write tech blog entries in English.He is lazy, so he can only write when he is in a good mood or when he is tired of coding.

Leave a comment

Your email address will not be published. Required fields are marked *