koderslab/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)

react-native-for-web's Issues

TextInput borders are not visible in chrome

Chrome : Version 45.0.2454.101 (64-bit)

Renaming the package

Yeah, it's the second time. I know.
The thing is that I don't want to compete or create misunderstanding with @necolas, since our two packages have a similar name but two different objectives.

The thing is: How to name it?
Right now my best choice is to roll back to react-native-web-polyfill, but I don't kinda like it because "Polyfill" is a discussed terminology, and as exposed in the readme, the objective of this library is not to replace react-native for ios or android.

What do you guys think about it?

*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

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

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

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

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.

Switch component for web

facebook/react-native@36cbe74

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.

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

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

Add `fetch` polyfill

https://github.com/github/fetch

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 ?

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

TouchableHighlight underlay color not working

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

React.Platform api ?

does it make sense to web ?

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

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

Dimensions

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