orYoffe / Create React Native Web App
Licence: mit
React Native Web CLI
Stars: ✭ 284
Programming Languages
javascript
184084 projects - #8 most used programming language
Projects that are alternatives of or similar to Create React Native Web App
react-native-swag-toggle
A Swag Toggle for React Native and Expo Web
Stars: ✭ 14 (-95.07%)
Mutual labels: react-native-web
react-native-template-ui-based
A React Native cross-platform app template for use with @blankapp/ui
Stars: ✭ 13 (-95.42%)
Mutual labels: react-native-web
react-native-hybrid-storybook
Showcase your react native components in the browser
Stars: ✭ 18 (-93.66%)
Mutual labels: react-native-web
cosmic
🌱🌌 Seed for a universal (native iOS, native Android, web, desktop) app based on react native web, redux and Typescript
Stars: ✭ 32 (-88.73%)
Mutual labels: react-native-web
pass-culture-app-native
Mobile and web application for pass Culture
Stars: ✭ 18 (-93.66%)
Mutual labels: react-native-web
Instagram
A universal instagram clone built with Expo
Stars: ✭ 258 (-9.15%)
Mutual labels: react-native-web
pro-chat
Full featured chat app built with 💙 Expo & Firebase 🔥
Stars: ✭ 24 (-91.55%)
Mutual labels: react-native-web
react-native-responsive-query
Responsive style hook for react native.
Stars: ✭ 43 (-84.86%)
Mutual labels: react-native-web
paramount
React Component Library for React Native and React Web
Stars: ✭ 23 (-91.9%)
Mutual labels: react-native-web
react-ssr-advanced-seed
🔮 React SSR Advanced Seed (Typescript + nestJS + React SSR + React Native + Docker)
Stars: ✭ 76 (-73.24%)
Mutual labels: react-native-web
devhub
TweetDeck for GitHub - Filter Issues, Activities & Notifications - Web, Mobile & Desktop with 99% code sharing between them
Stars: ✭ 8,064 (+2739.44%)
Mutual labels: react-native-web
razzle-afterjs-redux-rnw-example
Razzle + After.js + Redux + React Native Web (RNW) Example
Stars: ✭ 21 (-92.61%)
Mutual labels: react-native-web
react-flappy-bird
A side-scroller where the player controls a bird, attempting to fly between columns of green pipes without hitting them.
Stars: ✭ 55 (-80.63%)
Mutual labels: react-native-web
react-native-expo-web
All-in-one React Native project (Expo + react-native-web)
Stars: ✭ 16 (-94.37%)
Mutual labels: react-native-web
Gatsby Plugin React Native Web
react-native-web plugin for Gatsby
Stars: ✭ 260 (-8.45%)
Mutual labels: react-native-web
rnw boilerplate nav
React Native Web boilerplate for universal web/native apps with a react-router/react-navigation combo navigation system.
Stars: ✭ 54 (-80.99%)
Mutual labels: react-native-web
react-multiversal
React components that works everywhere (iOS, Android, Web, Node)
Stars: ✭ 43 (-84.86%)
Mutual labels: react-native-web
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
Compatibility: React Native >= 0.63.
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 "React Native CLI Quickstart" 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:
- CMD+D (IOS) / CMD+M (Android)
- Press "Enable Live-Reload"
React native docs - debugging real devices guide
React native docs - debugging guide
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
Resources
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].