A minimal setup for writing cross platform applications in React and React Native. This project is the example for our blog post A sensible approach to Cross platform development with React and React Native (Link coming soon).
This provides a bare bones setup that compliments writing for web and mobile with React and React Native whilst not requiring any dependencies other than react, react-router, react-native and lodash.
npm i
You'll need nodemon to run in development mode
npm i nodemon -g
npm run dev
npm start
This will deploy files to /build and splits your web code into 3 cache busted bundles
- Vendors: your node_modules.
- Components: your pages and app components.
- Main: anything else non presentational.
If you've never ran a React Native project before check the Building Projects with Native Code guide.
cd ./mobile && npm i
cd ./mobile && react-native run-android
cd ./mobile && react-native run-ios
/common
Any code that can be shared between web and mobile goes here. For example State management, common utils, business logic and higher order components.
/mobile This is the root of your React Native project.
/web This contains anything to do with the web frontend and will in no way touch anything to do with React Native. For example, the top level of web may look like:
/webpack
Webpack configs are used in our package.json scripts to either bundle our app for development or deploy minified/cachebusted files to /build to be used in production.
running /mobile/bin/common-watch.sh will keep /common synced to /mobile/common-mobile. This is automatically executed when running the ios project.
