doc22940 / create-react-native-web-app

React Native Web CLI

React Native Web CLI

create-react-native-web-app

A simple CLI tool to start your React Native Web project to develop same app for IOS Android and Web. Constructed from create-react-app and create-react-native-app

Installation

• Android - Install adb (Android Debug Bridge)

• IOS - Xcode and an apple device required

• Install the package globally and run it with your name of choice

# Install package
$ npm install -g create-react-native-web-app

# Run create-react-native-web-app <project-directory>
$ create-react-native-web-app myApp

# cd into your <project-directory>
$ cd myApp

# Run Web/Ios/Android development
# Web
$ npm run web

# IOS (simulator)
$ npm run ios

# Android (connected device)
$ npm run android

• Optional - Install Xcode and Android studio and follow the react native instructions under the "Building Projects with Native Code" tab

Folder structure

myApp
├── node_modules
├── package.json
├── index.js
├── .watchmanconfig
├── .flowconfig
├── app.json
├── .gitignore
├── android (When opening with Android studio, open this folder)
│   └── android project files
├── config
│   ├── jest
│   │    │── initTest.js
│   │    │── native.jest.config.js
│   │    │── web.jest.config.js
│   │    └── jest transform files
│   ├── env.js
│   ├── paths.js
│   ├── polyfills.js
│   ├── webpack.config.dev.js
│   ├── webpack.config.prod.js
│   └── webpackDevServer.config.js
├── ios (When opening with Xcode, open this folder)
│   └── ios project files
├── public
│   ├── favicon.ico
│   ├── index.html
│   └── manifest.json
├── scripts
│   ├── build.js
│   ├── start.js
│   ├── switchSnapshots.js
│   └── test.js
└── src
    ├── App.js
    ├── App.test.js
    ├── index.css # global
    ├── index.js
    ├── logo.png
    └── registerServiceWorker.js

Example app built with this CLI

Testing

# Web and Native
$ npm run test

# Web
$ npm run test:web

# Web watch mode
$ npm run test:web-watch


# Native
$ npm run test:native

# Native watch mode
$ npm run test:native-watch


# Coverage - web
$ npm run coverage

# Coverage - native
$ npm run coverage:native

Debugging

Open dev menu:

1. CMD+D (IOS) / CMD+M (Android)
2. Press "Enable Live-Reload"

React native docs - debugging real devices guide

React native docs - debugging guide

Network calls in the devtools

Build

# Web
$ npm run build

# Android - upgrade the current build version in `android/app/build.gradle` file (both the `versionCode` and the `versionName`)
Example:
versionCode 2
versionName "1.1"

# And then run the build
$ cd android && ./gradlew assembleRelease

# Open apk folder to find the release apk
$ open ./android/app/build/outputs/apk

React native docs - Android signed apk

React native docs for IOS

Troubleshooting

XCode 10

See crnwa-xcode-patch for a summary of how to fix the two known issues caused by XCode 10.x. For more detail, see react-native issue #19573.

Android

If you got Execution failed for task ':app:compileDebugAidl' when running yarn android, try to update Android Gradle plugin to version 3.1.1 and Gradle to version 4.4.

Here is how to do that:

1. Open Android Studio
2. Open the android project
   
3. Click Update on this prompt
   
4. Wait for Android Studio syncing the project.

If you got FAILURE: Build failed with an exception., examine the warnings:

1. WARNING: The specified Android SDK Build Tools version (23.0.1) is ignored, as it is below the minimum supported version (27.0.3) for Android Gradle Plugin 3.1.1.
   Solution: Update Build Tools
   

2. WARNING: Configuration 'compile' is obsolete and has been replaced with 'implementation' and 'api'.
   Solution: Change compile to implementation by open app/build.gradle file, change dependencies section (line 139) to use implementation instead of compile .

dependencies {
  implementation fileTree(dir: "libs", include: ["*.jar"])
  implementation "com.android.support:appcompat-v7:23.0.1"
  implementation "com.facebook.react:react-native:+"
}

Sync it again and now you can close Android Studio. See issue #7 for your references.

Contributors

Or Yoffe	https://github.com/orYoffe
Havit C. Rovik	https://github.com/haruelrovix
Jeremy L. Shepherd	https://github.com/jeremylshepherd

Resources

• React Native for Web (react-native-web)
• React
• React Native
• Create React App
• Create React Native App