Get unlimited public & private packages + team-based management with npm Teams.Learn more »

create-react-native-web-app

0.1.14 • Public • Published

React Native Web CLI

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) - https://github.com/facebook/react-native/issues/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
  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

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

Resources

Install

npm i create-react-native-web-app

DownloadsWeekly Downloads

57

Version

0.1.14

License

MIT

Unpacked Size

927 kB

Total Files

83

Last publish

Collaborators

  • avatar