Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/oryoffe/create-react-native-web-app
React Native Web CLI
https://github.com/oryoffe/create-react-native-web-app
react react-native react-native-web reactjs
Last synced: about 1 month ago
JSON representation
React Native Web CLI
- Host: GitHub
- URL: https://github.com/oryoffe/create-react-native-web-app
- Owner: orYoffe
- License: mit
- Created: 2018-06-19T12:35:21.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2023-03-18T12:45:40.000Z (over 1 year ago)
- Last Synced: 2024-04-26T07:23:03.971Z (7 months ago)
- Topics: react, react-native, react-native-web, reactjs
- Language: JavaScript
- Size: 1.96 MB
- Stars: 328
- Watchers: 16
- Forks: 48
- Open Issues: 8
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
Awesome Lists containing this project
README
[](https://github.com/vshymanskyy/StandWithUkraine/blob/main/docs/README.md)
## Warning: Project is not actively maintained
# React Native Web CLI
### create-react-native-web-app
[](https://npmjs.org/package/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
**Compatibility: React Native >= 0.63**.
## Installation
```sh
# Run create-react-native-web-app
$ 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
$ 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 "React Native CLI Quickstart" tab](https://reactnative.dev/docs/environment-setup)
## 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
```sh
# 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](http://facebook.github.io/react-native/releases/0.49/docs/running-on-device.html)
[React native docs - debugging guide](http://facebook.github.io/react-native/docs/debugging.html)
[Network calls in the devtools](http://www.preslav.me/2017/03/26/debugging-network-calls-in-react-native-using-the-chrome-debugger/)
## Build
```sh
# 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](http://facebook.github.io/react-native/releases/0.49/docs/signed-apk-android.html)
[React native docs for IOS](http://facebook.github.io/react-native/releases/0.49/docs/running-on-device.html#building-your-app-for-production)
## Resources
- [React Native for Web (react-native-web)](https://github.com/necolas/react-native-web)
- [React](https://reactjs.org/)
- [React Native](http://facebook.github.io/react-native/)
- [Create React App](https://github.com/facebook/create-react-app)
- [Create React Native App](https://github.com/react-community/create-react-native-app)