8542. Building Mobile App with React Native - Draft
React Native and Yarn

Build web application with ReactJS.

1. Game Store Web Application

In the posting Building Web Application with Angular, I introduced how to use Angular and RESTful web service to create a web application to manage products. In this tutorial, we will learn how to use React to build such web application with the same UI and functions.

2. Tools

Since react native doesn’t support npm5, have to use yarn.

*******************************************************************************
ERROR: npm 5 is not supported yet
*******************************************************************************

It looks like you're using npm 5 which was recently released.

Create React Native App doesn't work with npm 5 yet, unfortunately. We
recommend using npm 4 or yarn until some bugs are resolved.

You can follow the known issues with npm 5 at:
https://github.com/npm/npm/issues/16991

*******************************************************************************

Install Yarn.

brew install yarn

2. React Project

2.1 React Native CLI

Install ‘create-react-native-app’ globally.

yarn global add create-react-native-app
//npm install -g create-react-native-app

2.2 Creating New Project

Create new app named GameStoreReactNative.

$ create-react-native-app GameStoreReactNative

Start app, you will get following error.

$ yarn start
yarn run v1.3.2
$ react-native-scripts start
11:16:26 AM: Unable to start server
See https://git.io/v5vcn for more information, either install watchman or run the following snippet:
  sudo sysctl -w kern.maxfiles=5242880
  sudo sysctl -w kern.maxfilesperproc=524288

error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

Follow the instruction and run sysctl, and try again.

sudo sysctl -w kern.maxfiles=5242880
sudo sysctl -w kern.maxfilesperproc=524288
yarn start

QR code in terminal prompt. image Click i to open iOS simulator. It will install expo first. Then launch the react native app. App is running in the simulator. image Note: start your desired simulator before running it with expo and expo will detect the currently running simulator and then deploy your code.

2.2 Installing Packages

Install native-base and mobx.

$ yarn add native-base --save
$ yarn add mobx --save
$ yarn add react-navigation --save

3.4 Final Project Structure

4. Running and Testing

5. Source Files

6. References