1. Installing Dependencies

iOS setup:

In other to run the react native project, you need to install Dependencies following software and packages:

  1. [ ] XCode: The easiest way to install Xcode is via the Mac App Store. Installing Xcode will also install the iOS Simulator and all the necessary tools to build your iOS app.

  2. [ ] NodeJS: should download from nodejs.org and extract from package download, we suggest to use the version v6.9.4 LTS

  3. [ ] Homebrew: Homebrew is the package manager for macOS, paste that at a Terminal prompt

    /usr/bin/ruby -e "$(curl -fsSL 
    https://raw.githubusercontent.com/Homebrew/install/master/install\
    )"
    brew update
    
  4. [ ] Watchman: Watchman is a tool by Facebook for watching changes in the filesystem. It is highly recommended you install it for better performance.

    brew install watchman
    
  5. [ ] Yarn: Yarn caches every package it downloads so it never needs to download it again. It also parallelizes operations to maximize resource utilization so install times are faster than ever. It's use to replace for npm when execute react native command line

    brew install yarn
    
  6. [ ] React Native command line: Node.js comes with npm, which lets you install the React Native command line interface.
    Run the following command in a Terminal:

    npm install -g react-native-cli
    
    If you get an error like Cannot find module 'npmlog', try installing npm directly: 
    curl -0 -L http://npmjs.org/install.sh | sudo sh.
    
  7. [ ] Testing your React Native Installation: Use the React Native command line interface to generate a new React Native project called "AwesomeProject", then run react-native run-ios inside the newly created folder.Node.js comes with npm, which lets you install the React Native command line interface.

    Run the following command in a Terminal:

    react-native init AwesomeProject
    cd AwesomeProject
    react-native run-ios
    
  8. [ ] Before going to next step please make sure the versions your libraries install should be equal or larger than these versions:

Android set up:

  1. [ ] NodeJS: should download from nodejs.org and extract from package download, we suggest to use the version v6.9.4 LTS

  2. [ ] Install the latest JDK: SDK download

  3. [ ] Android Studio:

    On Mac: brew install android-sdk
    On Linux and Windows: Download from the Android website:
    https://developer.android.com/studio/install.html
    
  4. [ ] Define the ANDROID_HOME environment variable: Make sure the ANDROID_HOME environment variable points to your existing Android SDK:

    On Mac, add this to your ~/.bashrc, ~/.bash_profile or whatever your shell uses:

    # If you installed the SDK via Homebrew, otherwise ~/Library/Android/sdk
    export ANDROID_HOME=/usr/local/opt/android-sdk
    

    On Windows, go to Control Panel -> System and Security -> System -> Change settings -> Advanced -> Environment variables -> New

    NOTE: You need to restart the Command Prompt (Windows) / Terminal Emulator (Mac OS X, Linux) to apply the new Environment variables.

  5. [ ] Configure your SDK & Genymotion: Please following the default config here - http://facebook.github.io/react-native/releases/0.23/docs/android-setup.html

  6. [ ] Testing your React Native Installation : Use the React Native command line interface to generate a new React Native project called "AwesomeProject", then run react-native run-android inside the newly created folder:

    react-native init AwesomeProject
    cd AwesomeProject
    react-native run-android
    

    If everything is set up correctly, you should see your new app running in your AVD shortly.

    react-native run-android is just one way to run your app - you can also run it directly from within Android Studio or Nuclide.

IMPORTANT: if you could not run the "Testing your React Native Installation" successfully, it means there is something wrong with your configuration and installation. In this case, kindly not go to next step, our team could not support if you stop at this step. Please search google or double check the guide above and get more detail guide from React Native Guide.

If the AwesomeProject is running smoothly from your simulator, congratulation! welcome to next step :)

results matching ""

    No results matching ""