A set of classes and react components to make work your react-native app in a browser. (with some limitations obviously)

Last update: Jun 1, 2022

React Native for Web

A set of classes and react components to make work your react-native app in a browser. (with some limitations obviously)

Why use react-native-for-web?

  • To reuse your dumb components and your styles in the web admin version of your app (you can them rewrite or extend them after, when you have spread time to spend on them and the deadline is passed)
  • To target react-native unsupported platforms with no code changes via cordova; smart tvs, windows phone, desktop apps, chromebook, firefox os, etc...
  • To have a temporary non-iOS version for other platforms of your app, and then refine and extend the generated views after the app deadline
  • For low-budget projects with multiple platforms as target, you can choose iOS as a "master platform" and roll out the other version as webapp. Then when the client has additional funds, you can enhance them
  • To develop using non-OSX PCs, like Windows or Linux, since the majority of the debug or coding error of your app will be in the data-controller layer or in view data binding
  • Browsers are a more friendly environment for standard apps that does'nt require too much mobile-device features

What limitations?

Since it is all plain JavaScript, any native binary module won't be supported. By the way we are planning to provide an extra folder that will contains polyfills and workaround for the exposed api of some of these modules.

Check out the examples!

NOTE: The main UIExplorer app has been changed since the official UIExplorer app includes native binary components and non supported components at the moment.

How can i install this?

  • Move into your react-native project folder and install react-native-for-web
npm install react-native-for-web
  • Setup a webpack.config.js file for your project
  • Inside your webpack configuration, alias the react-native package to the react-native-for-web package, and setup the external for the image loader.
{
  // other webpack config
  resolve: {
    alias: {
      "react-native": "react-native-for-web"
    }
  }
  // setup the macro to resolve require("image!...")
  externals: [
    require("react-native-for-web/src/macro/image")
  ],
}
  • Run webpack
  • Create an HTML document, with a div with an id="app" including the bundled webpack script and linking the css stylesheet node_modules/react-native-for-web/style.css
  • Report any error to let us improve and help you! :D

Building the library

Move into the package folder and run in your terminal:

npm run build

WARNING!

This package is in beta version! API will not change (as we are emulating the react-native ones) but lots of components or properties could be missing at the moment. We encourage you to help us by reporting those errors or PR implementation of the missing ones! :D

Thanks

Thanks to the Facebook team for it's awesome React-Native framework!

GitHub

https://github.com/KodersLab/react-native-for-web
Comments
  • 1. Update npm and babel

    I have tried to install react-native-for-web in an empty react native project and I am having some trouble with it. My error is:

    ERROR in ./index.ios.js
    Module build failed: ReferenceError: [BABEL] /Users/tiagoferreira/Documents/projects/ryuutama/index.ios.js: Unknown option: base.optional
    

    I am using node 5 and when I install the packages I get the following dependencies installed in the project:

    "dependencies": {
        "react-native": "0.15.0"
      },
      "devDependencies": {
        "babel-core": "6.2.1",
        "babel-loader": "6.2.0",
        "babel-preset-es2015": "6.1.18",
        "react": "0.14.3",
        "react-dom": "0.14.3",
        "react-native-for-web": "0.1.7",
        "webpack": "1.12.9"
      }
    

    This is my webpack.config

    module.exports = {
      context: __dirname,
      entry: {
            'index.ios': ['./index.ios.js']
      },
      output: {
          path: __dirname + "/web",
          filename: "bundle.web.js"
      },
      // other webpack config
      resolve: {
        alias: {
          "react-native": "react-native-for-web"
        }
      },
      // setup the macro to resolve require("image!...")
      externals: [
        require("react-native-for-web/src/macro/image")
      ],
      module: {
            loaders: [
                { test: /\.js$/, loader: "babel-loader?optional[]=runtime&stage=1"}
            ]
      }
    }
    
    Reviewed by Tiagojdferreira at 2015-11-30 19:17
  • 2. style prop for non rn-for-web components doesn't work with arrays

    The style prop is not processing arrays correctly.

    <div style={[{borderWidth: 1}, {borderColor: "blue"}]}>

    is rendered as

    <div style="0:[object Object];1:[object Object];" data-reactid=".0.0">

    Reviewed by respectTheCode at 2015-11-11 21:10
  • 3. Support new RN 0.14 asset loading

    We need a way to load images using the new asset loading system in RN 0.14.

    facebook/react-native#3545

    We can now include images in the jsbundle and load them with require("./path/to/image.png").

    Reviewed by respectTheCode at 2015-11-05 15:30
  • 4. Support for NativeModules

    Is it possible to currently mock the NativeModules so that they don't throw errors such as these:

    Uncaught TypeError: Cannot read property 'RNVectorIconsManager' of undefined
    

    I don't want them to do anything, just, be able to run the app without errors. Is there an alias I can setup for this or something? Not using it personally but one of the packages I use uses it

    Reviewed by Anahkiasen at 2015-10-18 11:32
  • 5. support `require("./path/to/image.png")`

    Pull request for #12.

    The react-native-for-web/src/macro/image external isn't work for me with the repo linked but this should work. Is this what you were thinking?

    Reviewed by respectTheCode at 2015-11-05 17:14
  • 6. touchevents on Android

    Touch event emulation seems to work only on certain types of android devices. Need to investigate more and fix this but atm I don't have enough devices to test this out.

    Reviewed by mattiamanzati at 2015-09-06 18:57
  • 7. Documentation

    I'm new to webpack and am a little confused- is this tutorial supposed to show us how to start a new project, or work with the existing repo of examples? When I clone the repo and run npm install react-native-for-web, I get an error saying "Refusing to install react-native-for-web as a dependency of itself."

    Reviewed by jesskrich at 2016-06-20 19:02
  • 8. Performance of react-native-for-web

    I'm curious if there are any performance bottlenecks that I might be able to help with. I've converted a large project that uses ReactJS to to React-Native-For-Web (changing div to View, input to TextInput, etc) and even without supporting styling I'm seeing a 46% speed hit.

    I'm doing more profiling work to see if I can identify any issues.

    If there are any known performance hits, let me know and I will see if I can contribute.

    Reviewed by worldjoe at 2016-03-03 19:04
  • 9. Component's re mounting for no reason

    Hi

    class Test extends Component {
         render() {
            console.log('render test')
        return (
          <TouchableOpacity onPress={() => console.log('ok clicked')}>
           <Text> Click Me! </Text>
          </TouchableOpacity>
        );
      }
      componentWillReceiveProps(nextProps) {
        console.log("next props")
      }
    }
    export default class App extends Component {
      render() {
        return (
          <View>
            <Text> Parent Text </Text>
           <Test name={'hello'}> </Test>
          </View>
        );
      }
    }
    
    

    In above example when i click on "Click Me!" then

    Expected :

    ok clicked
    
    

    Actual :

    next props
    render test
    ok clicked
    
    

    If i remove <Text> Parent Text </Text> from app then onPress is giving expected results looks like having more than one children is the issue(critical one)! ,

    Reviewed by chandu0101 at 2015-11-23 00:16
  • 10. navigator ?

    web version of react-navigator - https://github.com/bh5-js/react-navigator

    can we add this as dependency and expose via react-native-for-web ?

    or can we copy the source to navigator folder( ofc if author of bh-react-navigator agree only) ?

    WDYT ..

    btw in past you told me that you have something called router built on top navigator ,any plans to include that aswell ?

    Reviewed by chandu0101 at 2015-10-03 23:42
Simple React Native Android module to use Android's WebView inside your app
Simple React Native Android module to use Android's WebView inside your app

react-native-webview-android Simple React Native Android module to use Android's WebView inside your app (with experimental html file input support to

May 8, 2022
React Native Webview with Javascript Bridge
React Native Webview with Javascript Bridge

Please take a look at this issue first React Native WebView Javascript Bridge I have been testing and reading a lot of way to safely create a bridge b

Jun 17, 2022
A React Native wrapper for Safari View Controller.

React Native Safari View React Native Safari View is a Safari View Controller wrapper for React Native. Documentation Install Usage Example Methods Ev

May 19, 2022
Crosswalk's WebView for React Native on Android.

react-native-webview-crosswalk Crosswalk's WebView for React Native on Android. Dependencies 0.4.0+: react-native >=0.32.0, react >= 15.3.0 0.3.0+: re

Jun 16, 2022
React Native adapter for building hybrid apps with Turbolinks 5
React Native adapter for building hybrid apps with Turbolinks 5

React Native Turbolinks A implementation of Turbolinks for iOS and Turbolinks Android for React Native. Getting started yarn add react-native-webview

May 17, 2022
Luna - a React Native Web boilerplate
Luna - a React Native Web boilerplate

?? Luna ?? Luna is a React Native boilerplate with minimal configuration so your app can run on Android, IOS and Web concurrently. ⭐ Features: React N

Jun 16, 2022
This Login Form made using React hooks , React Js , Css, Json. This form have 3 inputs, it also validate those inputs & it also having length limitations.

Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: np

Jan 3, 2022
Create tailwind css react components like styled components with classes name on multiple lines

Create Tailwind CSS React components like styled components with class names on multiple lines and conditional class rendering

Jun 21, 2022
A React component to make correcting automated transcriptions of audio and video easier and faster. By BBC News Labs. - Work in progress

React Transcript Editor A React component to make transcribing audio and video easier and faster. The project uses [this github project boards to orga

Jun 7, 2022
A tiny and simple helper set to make it easy to switch your styles in React Native when switching between light and dark mode. 🌟

A tiny and simple helper set to make it easy to switch your styles in React Native when switching between "light" and "dark" mode

Jun 1, 2022
Solid.js reactivity patterns for classes, and class components.

Tools for class-based reactivity powered by Solid.js, and for using classes as Solid components

May 31, 2022
flowbite-react is an open source collection of UI components, built in React, with utility classes from Tailwind CSS
flowbite-react is an open source collection of UI components, built in React, with utility classes from Tailwind CSS

flowbite-react is an open source collection of UI components, built in React, with utility classes from Tailwind CSS

Jun 23, 2022
:computer: :dash: Make your component visible with animations and a set of rules or simple props

Make your component visible with animations and a set of rules or simple props Content Installation Display content with simple props Display content

Apr 24, 2020
Mordan React in this project I demonstrate some of the most important tools that will make you design and build a protectional react project using a simple todo idea.
Mordan React in this project I demonstrate some of the most important tools that will make you design and build a protectional react project using a simple todo idea.

Mordan React in this project I demonstrate some of the most important tools that will make you design and build a protectional react project using a simple todo idea.

May 24, 2022
Math Magicians is a Single Page Application (SPA) created in React that allows users to make simple calculations & Read some famous Quotes
Math Magicians is a Single Page Application (SPA) created in React that allows users to make simple calculations & Read some famous Quotes

Math Magicians is a Single Page Application (SPA) created in React that allows users to make simple calculations & Read some famous Quotes

Apr 14, 2022
Personal Website UI Template using React-TypeScript. I hope, it will be helpful for your personal website that showcases your work as a software developer.

Personal Website Template Personal Website UI Template using React-TypeScript Class components Personal website can be about anything you want, includ

Jun 15, 2022
Audio player hooks & Utility Classes to play audio files, using libraries react-native-video, rxjs, with playlist handling, player controls.
Audio player hooks & Utility Classes to play audio files, using libraries react-native-video, rxjs, with playlist handling, player controls.

react-native-audio-player-hooks Audio player hooks & Utility Classes to play audio files, using libraries react-native-video rxjs, with playlist handl

Jan 27, 2022
React-with-typescript - Using typescript with react hooks, classes, events and refs

Typescript with hooks, classes, refs and events Quick lookup: Typescript with functional and class components Available Scripts In the project directo

Jan 1, 2022
🗺 Mandelbrot set and Julia set explorer made with React and WebGL
🗺 Mandelbrot set and Julia set explorer made with React and WebGL

Mandelbrot Maps Mandelbrot Maps is an interactive fractal explorer built using React and WebGL.

Apr 15, 2022
Parallax-controller - Core classes and controller for creating parallax scrolling effects

?? Parallax Controller Core classes and controller for creating parallax scrolli

May 18, 2022