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

Related tags

react-native-for-web
Overview

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!

Issues
  • React.Platform api ?

    React.Platform api ?

    does it make sense to web ?

    opened by chandu0101 4
  • style prop for non rn-for-web components doesn't work with arrays

    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">

    opened by respectTheCode 4
  • Support new RN 0.14 asset loading

    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").

    opened by respectTheCode 3
  • *Vertical and *Horizontal style shortcuts don't work

    *Vertical and *Horizontal style shortcuts don't work

    for example paddingHorizontal should be expanded to paddingLeft and paddingRight

    https://facebook.github.io/react-native/docs/flexbox.html#proptypes

    opened by respectTheCode 3
  • TextInput  borders are not visible in chrome

    TextInput borders are not visible in chrome

    Chrome : Version 45.0.2454.101 (64-bit)

    screen shot 2015-10-04 at 3 36 27 am
    opened by chandu0101 2
  • Support for NativeModules

    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

    opened by Anahkiasen 2
  • touchevents on Android

    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.

    opened by mattiamanzati 1
  • TouchableHighlight underlay color not working

    TouchableHighlight underlay color not working

    Hi, Touchable highlight underlay color not working on click (tested both in chrome and firefox)

    opened by chandu0101 1
  • add React.Platform

    add React.Platform

    fixes https://github.com/KodersLab/react-native-for-web/issues/7

    opened by chandu0101 1
  • support `require(

    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?

    opened by respectTheCode 1
  • Documentation

    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."

    opened by jesskrich 0
  • Performance of react-native-for-web

    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.

    opened by worldjoe 1
  • Update npm and babel

    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"}
            ]
      }
    }
    
    opened by Tiagojdferreira 12
  • Component's re mounting  for no reason

    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)! ,

    opened by chandu0101 3
  • Dimensions

    Dimensions

    http://facebook.github.io/react-native/docs/dimensions.html#content

    opened by respectTheCode 0
  • Consider using css-layout

    Consider using css-layout

    We should consider using css-layout and/or vendor prefixes to get the same layout rendering as react-native.

    https://github.com/facebook/css-layout

    opened by respectTheCode 4
  • Add `fetch` polyfill

    Add `fetch` polyfill

    https://github.com/github/fetch

    opened by respectTheCode 0
  • Switch component for web

    Switch component for web

    https://github.com/facebook/react-native/commit/36cbe74f990369c793966b052bee4af3f2f4e401

    opened by chandu0101 0
  • navigator ?

    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 ?

    opened by chandu0101 4
  • demo app not working in firefox

    demo app not working in firefox

    Hi, http://koderslab.github.io/react-native-for-web/examples/UIExplorer/

    scrolling not working in component demo (for example text-input).

    opened by chandu0101 1
Releases(0.1.6)
  • 0.1.6(Oct 13, 2015)

  • 0.1.5(Sep 16, 2015)

    It's starting!

    We have reached a set of classes and components that can be considered as the minimal required set in order to let you port your react-native application over the web!

    I think that this is just a starting point, so if you miss some component or class, or have some issues with the existing ones, just open an issue or a PR!

    With this release, you can port your application to a web application, and let it run over desktop pcs, tablets, windows phone, firefox os and smart TVs!

    The web revolution is starting!

    Source code(tar.gz)
    Source code(zip)
Owner
KodersLab
KodersLab
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

Naoufal Kadhom 485 Sep 28, 2021
Full-featured web browser module for React Native apps, based on TOWebViewController

react-native-browser A full-featured web browser module for React Native apps, based on the awesome TOWebViewController Installation Run npm install r

PrestoDoctor 127 Mar 14, 2021
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

Lucas Ferreira 361 Oct 14, 2021
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

Jordan Sexton 93 Aug 9, 2021
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

null 10 Sep 28, 2021
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

Nixon 182 Oct 11, 2021