React Native Web – Installation

How to use react-native-web for existing ReactJs app (1)?

You can install react-native-web for your existing npx create-react-app my-app

• Install babel-plugin-module-resolver plugin to resolve your project modules when compiling with Babel. We’ll use this package to alias react-native to react-native-web when setting up the project config.

$ yarn add --dev babel-plugin-module-resolver babel-plugin-transform-object-rest-spread babel-plugin-transform-react-jsx-source babel-preset-expo

• To build and run our application, we’ll be using Expo. Expo is an open-source toolchain built around React Native for building Android and iOS applications. It provides access to the system’s functionality like the Camera, Storage, etc.

$ yarn global add expo-cli
$ yarn add expo react-native react-native-web react-art

• Create a file called .babelrc in the root of your project

{
  "presets": ["babel-preset-expo"],
  "env": {
    "development": {
      "plugins": ["transform-object-rest-spread", "transform-react-jsx-source"]
    }
  },
  "plugins": [
    [
      "module-resolver",
      {
        "alias": {
          "^react-native$": "react-native-web"
        }
      }
    ]
  ]
}

• Update package.json file

// package.json
{
  "name": "random-people",
  "version": "0.1.0",
  "private": true,
  ...
  "scripts": {
    "start-web": "react-scripts start",
    "build-web": "react-scripts build",
    "test-web": "react-scripts test",
    "eject-web": "react-scripts eject",
  },
  ...
}

• Run yarn run start-web

How to run react-native-web Website on native app (2)?

• Create entry point
  • Web entry point is “./src/App.js”
  • Native entry point is “./App.js”, so create “App.js” file in root folder

import React from "react";
import { AppRegistry, StyleSheet, View } from "react-native";
import Home from "./src/Home";

class App extends React.Component {
  render() {
    return (
      <View style={styles.appContainer}>
        <Home />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  appContainer: {
    flex: 1,
  },
});

AppRegistry.registerComponent("App", () => App);

export default App;

• Create Expo configuration file app.json
  • sdkVersion is Expo package verion

{
  "expo": {
    "sdkVersion": "38.0.0",
    "name": "random-people",
    "slug": "random-people",
    "version": "0.1.0",
    "description": "An application for displaying random people",
    "primaryColor": "#ff8179"
  }
}

• Add run script in package.json

...
  "scripts": {
...
    "start-native": "expo start",
    "android": "expo android",
    "ios": "expo ios",
    "build:ios": "expo build:ios",
    "build:android": "expo build:android"
  },
...

• Run yarn run start-native

How to fix errors

React Native version mismatch

Edit “react-native” package version in package.json file and rebuild

How to deploy native Expo app

• Config Android in app.json file

{
  "expo": {
...
    "android": {
      "package": "com.random.people"
    }
  }
}

Ref: build-mobile-friendly-web-apps-with-react-native-web

How to use “native-base” in “react-native-web”?