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:

public/index.html

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:

mkdir src/
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

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:

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.

src/index.js

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-dom
• 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:

__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.

package.json

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

package.json

Run (all)!

It’s time to run and test all: iOS, Android and Web platform.

1. Run native server:

yarn start

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: