- Table of Contents
- Requirements to Run Mobile-App
- Common
- For Android
- 8000 For iOS
- Common
- Steps to Run
- Debugging
- Additional Requirements to Run E2E Tests
- Tools
- # Default Information
- Available Scripts
- Other
node 8.14.1(withnpm 6.4.1)
NodeJS version 8.15.x also is likely to work- ninja (for Android)
macOS -brew install ninja, Windows - instructions here - react-native-cli
npm install -g react-native-cli
(macOS and Windows)
* Java 1.8 (jdk 8)
* Android Studio or manual installation if SDK and platform tools (look at how to setup an Android project with gradle)
(macOS only)
* macOS 10.13 High Sierra or higher (not tested on El Capitan and before)
* Homebrew - http://brew.sh
* CocoaPods (brew install pods)
* Xcode 9.4.1
(1) git clone git://github.com/LockTrip/Mobile-app.git
(2) cd <project-folder> for example cd C:\projects\Mobile-App
(3) npm install
(4) react-native run-android
(1) git clone git://github.com/LockTrip/Mobile-app.git
(2) cd <project-folder> for example cd $HOME$/projects/Mobile-App
(3) npm install
(4) react-native run-ios or react-native run-android
(1) put debugger statement in code
(2) debug with "Debug JS Remotely" and a browser
Note: To debug WebView or mobile browser - use:
- for iOS: Safari/Develop/Simulator...
- for Android: Chrome/Remote device and choose emulator/device
- Use VSCode breakpoints to or "All expeptions"/"Uncaught exceptions" to break into code
- If running any task before compilation (preLaunchTask in launch.json) - in VSCode Tasks - make sure to check Terminal view in VSCode if it needs input
- Use VScode Output/React native... views to see any issues with building the app before installing on device, simulator or emulator
Tip: Use "Attach to packager" and to skip recompiling the app with xcodebuild
(1) VScode - use React Native run configurations to create one for iOS
(2) When starting - make sure to have "Debug JS Remotely" ON from the device/emulator (shake it to see Debug menu with this option)
(3) Reload while the footer of VSCode shows as orange
(4) Use VSCode Debug Console view to see console.log output
(1) VScode - use React Native run configurations to create one for Anrdoid
(2) When starting - make sure to have "Debug JS Remotely" ON from the device/emulator (shake it to see Debug menu with this option)
(3) Reload while the footer of VSCode shows as orange
(4) Use Debug Console or Output/LogCat... view to see console.log statements
E2E tests (aka integration tests) are using detox (with Grey Box vs the common Black Box approach) with mocha.
- ???
(macOS only)
brew tap wix/brewbrew install applesimutils
Scripts are found at:
scripts\windowsfor Windowsscripts/for macOS
- To start on Windows (with Android):
- Run
scripts\windows\reactotron-start.bat - Start project with
react-native run-android
First application of CI is using Travis CI http://travis-ci.org. Later on to be applied in this branch.
Runs your app in development mode.
Open it in the Expo app on your phone to view it. It will reload if you save edits to your files, and you will see build errors and logs in the terminal.
Sometimes you may need to reset or clear the React Native packager's cache. To do so, you can pass the --reset-cache flag to the start script:
npm start -- --reset-cache
# or
yarn start -- --reset-cache
Runs the jest test runner on your tests.
Like npm start, but also attempts to open your app in the iOS Simulator if you're on a Mac and have it installed.
Like npm start, but also attempts to open your app on a connected Android device or emulator. Requires an installation of Android build tools (see React Native docs for detailed setup). We also recommend installing Genymotion as your Android emulator. Once you've finished setting up the native build environment, there are two options for making the right copy of adb available to Create React Native App:
- Make sure that you can run adb from your terminal.
- Open Genymotion and navigate to
Settings -> ADB. Select “Use custom Android SDK tools” and update with your Android SDK directory.
- Find Genymotion’s copy of adb. On macOS for example, this is normally
/Applications/Genymotion.app/Contents/MacOS/tools/. - Add the Genymotion tools directory to your path (instructions for Mac, Linux, and Windows).
- Make sure that you can run adb from your terminal.
This project is set up to use jest for tests. You can configure whatever testing strategy you like, but jest works out of the box. Create test files in directories called __tests__ or with the .test extension to have the files loaded by jest. See the the template project for an example test. The jest documentation is also a wonderful resource, as is the React Native testing tutorial.
Flow is a static type checker that helps you write code with fewer bugs. Check out this introduction to using static types in JavaScript if you are new to this concept.
React Native works with Flow out of the box, as long as your Flow version matches the one used in the version of React Native.
To add a local dependency to the correct Flow version to a Create React Native App project, follow these steps:
- Find the Flow
[version]at the bottom of the included .flowconfig - Run
npm install --save-dev flow-bin@x.y.z(oryarn add --dev flow-bin@x.y.z), wherex.y.zis the .flowconfig version number. - Add
"flow": "flow"to thescriptssection of yourpackage.json. - Add
// @flowto any files you want to type check (for example, toApp.js).
Now you can run npm run flow (or yarn flow) to check the files for type errors.
You can optionally use a plugin for your IDE or editor for a better integrated experience.
To learn more about Flow, check out its documentation.