Project Setup for desiloed development with react-native (iOS, Android, Web)

create-react-app is a zero configuration bootstrapping framework that is super easy to get you started on react web development.

React Native is an amazing framework that makes iOS and Android development apps a breeze. You can use the same code to develop for 2 platforms.

What if you could also share the code for web. Thanks to an amazing project called react-native-web that brings all the react-native components API to the web.

Combining all these, here are simple steps in how you can setup your react-native project for web development using create-react-app

1. Create a new react-native project using the react-native-cli

react-native init HelloRNWebiOSAndroid

2. Add these modules to your project

yarn add react-dom react-native-web react-scripts

[Update1: You will need to install react-art as well if you encountered

./node_modules/react-native-web/dist/exports/ART/index.js
Module not found: Can't resolve 'react-art' in

Install react-art

yarn add react-art

]

3. Copy these commands to the scripts section in the package.json

"start-web": "react-scripts start",
"build-web": "react-scripts build",
"test-web": "react-scripts test --env=jsdom",
"eject-web": "react-scripts eject"

4. Copy the public directory from a project created by create-react-app into the root directory of your react-native project

5. Create a src directory in your project root directory and move the App.js file inside it.

6. Modify your react-native’s index.js accordingly in the root directory as shown

import { AppRegistry } from "react-native";
import App from "./src/App";
AppRegistry.registerComponent("HelloRNWebiOSAndroid", () => App);

7. Create an index.js file inside the src directory with the following content

import { AppRegistry } from "react-native";
import App from "./App";
AppRegistry.registerComponent("HelloRNWebiOSAndroid", () => App);
AppRegistry.runApplication("HelloRNWebiOSAndroid", {
   rootTag: document.getElementById("root")
});

8. yarn start-web and go to http://localhost:3000

That’s it. You can find working sample project with these steps at https://github.com/agenthunt/rn-dev-ios-android-web/tree/master/HelloRNWebiOSAndroid