openGeeksLab / travelgems-frontend

Requirements

• Node 6.x or newer
• React Native for development
• Xcode for iOS development
• Android Studio for Android development
• Android SDK 23.0.1 or newer for Android development
• Genymotion for Android emulation (Optional)
• Android Marshmallow or newer on your Android device to test properly

React Native Installation

• Install nvm(for macOs or Linux) or nvm for windows
• Install latest version of node on nvm and use it.

  nvm install nodcom.examplee
  
  nvm list
  
  nvm use <VERSION>

• Install Xcode for iOS
• Install JDK
• Install Android Studio and create a device
• Dont forget to set ANDROID_HOME environment variable to SDK versions
• (Optional but suggested) Install yarn
• Install react-native-cli

  npm install -g react-native-cli

• Install watchman

  brew install watchman

See Getting Started to install requirement tools.

Libraries

• NativeBase
• Navigation for React Native
• Redux 3.7.x a predictable state container for Javascript apps
• Redux Modal
• Babel 6.x.x for ES6+ support
• [React-Native-Elements] (https://github.com/react-native-training/react-native-elements)
• React-Native-Config

HOW DO I INSTALL A LIBRARY?

• npm install --save <package_name>
• npm link <package_name>
• To install all the packages included in package.json file simple run:
• npm install
• npm link

DEVELOPERS TOOLS

• Reactroton

• [React Developer Tools]

    npm install -g react-devtools
    react-devtools
  

• [Redux devtools] (https://github.com/zalmoxisus/redux-devtools-extension)

• React Native Debugger (only Mac)

    brew cask install react-native-debugger
  

• [Reading Time] https://facebook.github.io/react-native/docs/debugging.html

First Clone Installation

• npm install
• react-native link

Commands

• create a new app : react-native init <project_name>
• run on ios simulator : react-native run-ios
• run on android simulator or device: react-native run-android
• open android emulator (Mac): /Users/<user>/Library/Android/sdk/tools/emulator -avd <emulator_name (e.g. Nexus_5X_API_24)> -port 5554

Debugging

• Open mobile dev tools for Android with CMD + m (on Mac)

  adb shell input keyevent 82

• Use React Native Debugger on Mac or check bellow on Windows
• Inspect DOM with react devtools (enable inspector from dev tools)

  react-devtools

• Enable remote debugging by clicking "Remote JS Debugging" from dev tools
• For network debugging open reactotron

Reading Materials

• [Learn ES2015] https://babeljs.io/learn-es2015/
• [React-Native] http://facebook.github.io/react-native/docs/tutorial.html
• [Component Lifecycle] https://gist.github.com/TyrealGray/9c78a67383dd36711077ddeb4cc4608a, https://reactjs.org/docs/react-component.html
• [Libraries] http://www.awesome-react-native.com/
• [Awesome React Native] http://www.awesome-react-native.com/
• http://www.reactnativeexpress.com/

Common Issues

• Android run "Device not found":

    chmod 755 android/gradlew
  

• Clean Install project

  rm -rf ios/build
  rm -rf android/build
  watchman watch-del-all
  rm -rf node_modules && npm install
  rm -fr $TMPDIR/react-*
  react-native link