react-native-web-platform

v0.1.25

Published

2 years ago

## Install:

Downloads

0High
0Medium
0Low

tdzl2003

Real React Native on Web Platform

Install:

First initialize your react-native project

react-native init MyProject
cd MyProject

Install this module.

yarn add react-native-web-platform

Configure your rn-cli.config.js to add web platform & provideModuleNodeModules:

'use strict';

const config = {
  // Add these lines if you already have a rn-cli.config.js
  getPlatforms() {
    return ['web'];
  },

   getProvidesModuleNodeModules() {
    return [
      'react-native',
      'react-native-web-platform',
    ];
  },
};

module.exports = config;

Add a launch.web.js and index.html in your project root:

// launch.web.js

// Install polyfills in native thread.
require('regenerator-runtime/runtime');
require('es6-promise').polyfill();
require('isomorphic-fetch');
const { Bridge } = require('react-native-web-platform/lib/launch');

const bridge = new Bridge(
  __DEV__ ?
    './index.bundle?platform=web' :
    './index.bundle.js'
);

bridge.start();

bridge.createRootView(document.body, 'YOUR_APP_NAME_HERE');

Note: if your react native version <= 0.48.x, use following instead:

// launch.web.js
const { Bridge } = require('react-native-web-platform/lib/launch');

const bridge = new Bridge(
  __DEV__ ?
    './index.web.bundle?platform=web' :
    './index.bundle.js'
);

bridge.start();

bridge.createRootView(document.body, 'YOUR_APP_NAME_HERE');

index.html:

<html>
<head>
  <title>YOUR_APP_NAME_HERE</title>
  <style>
    body { margin: 0; } html, body { height: 100%; }
    .pointer-events-none {
      pointer-events: none;
    }
    .pointer-events-box-none * {
      pointer-events: all;
    }
    .pointer-events-box-none {
      pointer-events: none;
    }
    .pointer-events-box-only * {
      pointer-events: none;
    }
    .pointer-events-box-only {
      pointer-events: all;
    }
  </style>
  <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
</head>
<body>
<script src="./launch.web.bundle?platform=web"></script>
</body>
</html>

index.release.html:

<html>
<head>
  <title>YOUR_APP_NAME_HERE</title>
  <style>
    body { margin: 0; } html, body { height: 100%; }
    .pointer-events-none {
      pointer-events: none;
    }
    .pointer-events-box-none * {
      pointer-events: all;
    }
    .pointer-events-box-none {
      pointer-events: none;
    }
    .pointer-events-box-only * {
      pointer-events: none;
    }
    .pointer-events-box-only {
      pointer-events: all;
    }
  </style>
  <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
</head>
<body>
<script src="./launch.bundle.js"></script>
</body>
</html>

If your react native version <= 0.48.x, you should also create a index.web.js with the content like index.ios.js or index.android.js:

Debug

npm start

Then visit http://localhost:8081/index.html to visit your page.

Publish

version >= 0.49.x:

Linux & Mac:

mkdir build
mkdir build/web
react-native bundle --entry-file launch.web.js --platform web --dev false --bundle-output build/web/launch.bundle.js --assets-dest build/web
react-native bundle --entry-file index.js --platform web --dev false --bundle-output build/web/index.bundle.js --assets-dest build/web
cp index.release.html build/web/index.html

Windows:

md build
md build\web
react-native bundle --entry-file launch.web.js --platform web --dev false --bundle-output build/web/launch.bundle.js --assets-dest build/web
react-native bundle --entry-file index.js --platform web --dev false --bundle-output build/web/index.bundle.js --assets-dest build/web
copy index.release.html build\web\index.html

version <= 0.48.x

Linux & Mac:

mkdir build
mkdir build/web
react-native bundle --entry-file launch.web.js --platform web --dev false --bundle-output build/web/launch.bundle.js --assets-dest build/web
react-native bundle --entry-file index.web.js --platform web --dev false --bundle-output build/web/index.bundle.js --assets-dest build/web
cp index.release.html build/web/index.html

Windows:

md build
md build\web
react-native bundle --entry-file launch.web.js --platform web --dev false --bundle-output build/web/launch.bundle.js --assets-dest build/web
react-native bundle --entry-file index.web.js --platform web --dev false --bundle-output build/web/index.bundle.js --assets-dest build/web
copy index.release.html build\web\index.html

Then publish everything in build/web into your server.

Published

Vulnerabilities

Links

Maintainers

Keywords