Skip to end of metadata
Go to start of metadata

Following guide shows how to setup a development environment and create a simple native mobile app based in React.


1. Setup a development environment

You will need react-native-cli in order to develop react native mobile app.


On Mac environment, you can install it like below

sudo npm install -g react-native-cli


2. Create a project

Following example shows how to create a React native mobile app on terminal.

react-native init nsaju

Note that you can use your own name instead of "nsaju" above. If everything is okay, you will see message like below:

This will walk you through creating a new React Native project in /Users/kurapa/ownCloud/Chun Kang (Private)/src/nsaju
Installing react-native...
Consider installing yarn to make this faster: https://yarnpkg.com

> fsevents@1.2.7 install /Users/kurapa/ownCloud/Chun Kang (Private)/src/nsaju/node_modules/fsevents
> node install

node-pre-gyp WARN Using needle for node-pre-gyp https download
[fsevents] Success: "/Users/kurapa/ownCloud/Chun Kang (Private)/src/nsaju/node_modules/fsevents/lib/binding/Release/node-v64-darwin-x64/fse.node" is installed via remote
npm notice created a lockfile as package-lock.json. You should commit this file.
npm WARN react-native@0.59.1 requires a peer of react@16.8.3 but none is installed. You must install peer dependencies yourself.

+ react-native@0.59.1
added 721 packages from 382 contributors and audited 31705 packages in 24.673s
found 11 low severity vulnerabilities
  run `npm audit fix` to fix them, or `npm audit` for details
info Setting up new React Native app in /Users/kurapa/ownCloud/Chun Kang (Private)/src/nsaju
info Adding required dependencies
+ react@16.8.3
added 2 packages and audited 31718 packages in 6.037s
found 11 low severity vulnerabilities
  run `npm audit fix` to fix them, or `npm audit` for details
info Adding required dev dependencies
npm WARN jest-resolve-dependencies@24.5.0 requires a peer of jest-haste-map@^24.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN jest-snapshot@24.5.0 requires a peer of jest-haste-map@^24.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN jest-resolve@24.5.0 requires a peer of jest-haste-map@^24.0.0 but none is installed. You must install peer dependencies yourself.

+ @babel/core@7.4.0
+ @babel/runtime@7.4.2
+ metro-react-native-babel-preset@0.53.1
+ react-test-renderer@16.8.3
+ jest@24.5.0
+ babel-jest@24.5.0
+ eslint@5.15.3
+ @react-native-community/eslint-config@0.0.3
added 568 packages from 344 contributors, updated 4 packages and audited 515877 packages in 18.713s
found 11 low severity vulnerabilities
  run `npm audit fix` to fix them, or `npm audit` for details

  Run instructions for iOS:
    • cd /Users/kurapa/ownCloud/Chun Kang (Private)/src/nsaju && react-native run-ios
    - or -
    • Open ios/nsaju.xcodeproj in Xcode
    • Hit the Run button

  Run instructions for Android:
    • Have an Android emulator running (quickest way to get started), or a device connected.
    • cd /Users/kurapa/ownCloud/Chun Kang (Private)/src/nsaju && react-native run-android

In my case, I just tried ios app first, because that is what I have at that time, so tried following commands like the guide while I create a project above.


cd nsaju
react-native run-ios

In case that you face following error message when you run "react-native run-ios", that might be caused by the location of command line tools.

~/src/nsaju $ react-native run-ios
info Found Xcode project nsaju.xcodeproj
xcrun: error: unable to find utility "instruments", not a developer tool or in PATH
error Command failed: xcrun instruments -s
xcrun: error: unable to find utility "instruments", not a developer tool or in PATH

To fix above issue, please run Xcode > Preferences > Locations > select your Xcode version from the drop down menu

If you see the error message as "No bundle URL present" like below, it means there are some possibilities to exist other React Native sessions (assuming they're running on default 8081) before re-building.

You can avoid above situation by following command:

rm -rf ios/build/; kill $(lsof -t -i:8081); react-native run-ios

Make sure you are not on proxy.

For your information, below YouTube clip is super helpful as a training course that shows how to create native mobile in React.

https://school.shoutem.com/lectures/build-react-native-mobile-app-tutorial/

Even though all written in Korean, below link is also useful to know more about React native app development.

https://academy.realm.io/kr/posts/react-native/