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

Installation

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

# if you previously installed this package globaly run this command first to uninstall the previous version:
# npm uninstall -g create-react-native-web-app

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

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

# IOS
$ npm run ios

# Android
$ npm run android

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

Folder structure

myApp
├── android (When opening with Android studio, open this folder)
│   └── android project files
├── ios (When opening with Xcode, open this folder)
│   └── ios project files
├── public
│   ├── favicon.ico
│   ├── index.html
│   └── manifest.json
└── src
    └── project code

Testing

# Web and Native
$ npm run test

# Web
$ npm run test:web

# Native
$ npm run test: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

Resources

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