Cheap and reliable Node.js hosting starts at $3/month, and $1/month static HTML hosting

👨‍🔧👨‍🔧Manage your all hotel services at one place - This is the project repository for HotelOnTouch Project and this project is actively looking for new contributors👨‍🔧👩‍🏫

Stars: ✭ 30 (-40%)

Mutual labels: reactnative

React Native Sectioned Multi Select

a multi (or single) select component with support for sub categories, search, chips.

Stars: ✭ 540 (+980%)

Mutual labels: reactnative

Gittermobile

Unofficial Gitter.im (chat for GitHub) client for iOS and Android. [build with react-native]

Stars: ✭ 569 (+1038%)

Mutual labels: reactnative

Bluewallet

Bitcoin thin client for iOS & Android. Built with React Native

Stars: ✭ 878 (+1656%)

Mutual labels: reactnative

React Native Tabbar Interaction

Tabbar Component For React-Native

Stars: ✭ 457 (+814%)

Mutual labels: reactnative

React Native Heic Converter

Convert your HEIC files with React Native

Stars: ✭ 43 (-14%)

Mutual labels: reactnative

React Native Clean Project

Automating the clean up of a React Native project

Stars: ✭ 399 (+698%)

Mutual labels: reactnative

Boostnote Mobile

Boostnote for iOS and Android 🚀

Stars: ✭ 844 (+1588%)

Mutual labels: reactnative

React Native Markdown Package

React native markdown package is a Library for implementing markdown syntax in React Native

Stars: ✭ 50 (+0%)

Mutual labels: reactnative

Basic Redux React Native Boilerplate

Basic implementation of Redux + React Native

Stars: ✭ 44 (-12%)

Mutual labels: reactnative

Expo Chroma Key Camera

Live green-screen effect with Expo and THREE.js

Stars: ✭ 28 (-44%)

Mutual labels: reactnative

View All Similar Projects ➔

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.

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].

Stars: ✭ 50

Visit Git Page 🔗Visit User Page 🔗Visit Issues Page (9) 🔗