Skip to content

Latest commit

 

History

History
187 lines (135 loc) · 6.56 KB

readme_crnwa.md

File metadata and controls

187 lines (135 loc) · 6.56 KB
Raw

create-react-native-web-app

NPM

GitHub issues license GitHub top language npm bundle size (minified) npm

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

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

Issues with Xcode 10 (newest version) - facebook/react-native#19573

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 1. Open the android project
1. Click Update on this prompt
1. 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

:octocat:
Or Yoffe https://github.com/orYoffe
Havit C. Rovik https://github.com/haruelrovix

Resources