react-native-web-starter

by joefazz

Starting point for developing web and cross platform native apps. Built on top of CRA and CRNA.

199 Stars 46 Forks Last release: Not found MIT License 61 Commits 0 Releases

Available items

No Items, yet!

The developer of this repository has not created any items for sale yet. Need a bug fixed? Help with integration? A different license? Create a request here:

React Native Web Starter

Notice: You should probably just use Expo now unless you really want to fork this because it has built in support for React Native Web πŸ™‚

Introduction

This repo is intending to provide an easy starting point for developers looking to make fully cross platform applications across both web with React Native Web and mobile with Expo.

All branches represent a particular starting point.

It is bootstrapped with Create React App so you can run

yarn web
in order to start up the development web server with all the hot reloading goodness you've come to expect.

It has then been integrated with Create React Native App and running

yarn ios
or
yarn android
will start the Expo packager. You can also run the project from the Expo XDE program.

Note that it should be possible to eject from Expo to native using

yarn eject-native
, however it is not possible to automatically eject from CRA web build. There are quite a few ways to manually port out of CRA web build as described in the following resources: - https://github.com/facebook/create-react-app#popular-alternatives - https://reactjs.org/docs/add-react-to-a-website.html

Branches

| Branch | Description | | ----------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | | master | The most minimal possible boilerplate, will always be the case | | redux | Implements redux reducers, actions, store and connection including example | | navigation-react-router | Using react-router-dom, react-router-native and react-router-navigation in order to have a platform agnostic navigation solution including native look at feel on phones | | typescript | Uses the TypeScript compiler with command

yarn watch
to track file changes and compile on the fly for stronger typed RNW code |

Get Started

Clone the branch with the starting point you want and just rename the project (don't forget the

package.json
, Run
git remote rm origin && yarn
to remove the ref to this repo and install node_modules then you're good to go. πŸ™‚

A full list of the scripts defined in

package.json
is shown below.

| Script | Action | | ------------------- | ------------------------------------------------------- | |

yarn web
| Start CRA Development Build | |
yarn build-web
| Create production build for web | |
yarn start-expo
| Start the Expo packager | |
yarn start-native
| Start the native packager (not supported) | |
yarn eject-native
| Eject from Expo | |
yarn android
| Start expo packager and install app to Android Emulator | |
yarn ios
| Start expo packager and install app to iOS Simulator | |
yarn test
| not supported |

Future Plans for this Library

The aim for this library is to make several branches that have different starting points i.e. Navigation, Auth etc.

Master branch will always be the most minimal starting point.

I'm also toying with the idea of doing a starting point with React Native CLI instead of Expo however that will mean the UI for mobile will less predictiable than developing with Expo.

If you have any ideas for a boilerplate then please create an issue or even better a pull request! I'm hoping to get this repo to be a big hub for getting started with React Native Web with tutorials etc.

Tasks

  • ReasonML

Credit

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.