Create a native and web app with React Native + React Native Web
How to create concurrently a web app and a native app (for Android and iOS) with React Native and React Native Web
Do you want to create a web app and, at the same time, a native app for Android and iOS with only one source code?
It could work with the help of React Native Web library (https://github.com/necolas/react-native-web) that allow you to use React Native components (https://facebook.github.io/react-native/) in a web app.
This guide starts from a React Native project (while, at this moment, the guide of React Native Web starts from a React project) and add the web layer to this.
It’s faster than the opposite (to add React Native layer to a React web project).
At the end of this guide, you will have a project that works on Web, Android and iOS platforms concurrently.
Create a React Native project
As first thing, you need to create a new blank React Native project.
You can follow the instructions reported here: https://facebook.github.io/react-native/docs/getting-started.
Choose the tab React Native CLI Quickstart, your Development OS (Mac, Windows or Linux) and follow both Target OS (iOS and Android).
In this example, we will create a new RN project called ReactNativeWebApp.
npx react-native init ReactNativeWebApp
The React Native project is now ready for iOS and Android development, it’s time to add the support for Web platform.
Create index.html for the web app
You need to create a new folder public/ and add a new index.html file:
Take attention to the id of the DIV element (in this case root), your web app will be loaded here.
Create, move, duplicate and rename…
You need to make some simple operations before to continue:
- Create new src/ folder
- Move app.json to src/ folder
- Move App.js to src/ folder
- Duplicate index.js to src/ folder, it will be the entry point of the web app
- Rename index.js of the root (NOT the new file in src/) to index.native.js, it will be the entry point of the native app. If you want to have also different entry points for iOS and Android, you can follow this guide: https://facebook.github.io/react-native/docs/platform-specific-code#platform-specific-extensions
To sum up:
mv app.json src/
mv App.js src/
cp index.js src/
mv index.js index.native.js
- Update imports’ paths in index.native.js
The files index.native.js and src/index.js are in different folders (root and src) because React Native look for it on root folder while React Web look for it on src/ folder. You can change this without ejecting the project.
Remove react-native example components
The web-app doesn’t seem to support the example components of react-native/Libraries/NewAppScreen, so you have to remove these from src/App.js:
Add runApplication() for the web app
You need to add runApplication() to src/index.js (the entry point of the web app) to load the web app correctly.
Take attention to use same id (in this case root) of public/index.html (see previous chapter Create index.html for the web app).
Add react-scripts, react-native-web, react-dom
We will install 3 new libraries:
- react-native-web (https://github.com/necolas/react-native-web) to use react-native components into the web app
- react-scripts to build/run the web app
yarn add react-dom react-native-web
yarn add --dev react-scripts
Maintain the tests
To continue to run tests, you have to update references of _tests__/App-test.js:
I have encountered some version conflicts about babel-jest and jest libraries, so you need to remove these from development dependencies of package.json. Don’t worry, they are dependencies of other packages, you can continue to run tests.
After, you may need to remove and re-install the node_modules:
rm -rf node_modules && yarn
You can run the tests now:
yarn run test
Add yarn task “web”
You need to add web task to package.json to run the web app
It’s time to run and test all: iOS, Android and Web platform.
1. Run native server:
2. Open a new terminal tab and run XCode Simulator with our new iOS app:
yarn run ios
Now you should see your app running on iOS.
3. Open an Android emulator (Android Studio > AVD Manager)
4. When the Android emulator is ready, run our new Android app:
yarn run android
Now you should see your app running on Android.
5. Finally, run also the web app:
yarn run web
Now you should see your app running on web on http://localhost:3000/.
In the image below, you can see final result: your app runs on browser, iPhone and Android devices: