Depend on necolas/react-native-web instead of tuckerconnelly/react-native-web

[remon-nashid]

First, thanks for the awesome effort towards a cross-platform React!

Apparently @tuckerconnelly found some limitations in necolas/react-native-web so he forked it. The goal of this issue is:

1.Try to find a workaround while the project is still young.

2. Perhaps try to get required changes in necolas/react-native-web.
3. If not possible then at least document why the fork is necessary.

[tuckerconnelly]

Hey thanks for issue :)

The biggest things IIRC were:

Support for onLayout

This is probably the hardest. You could start by copying this into necolas/react-native-web:

https://github.com/tuckerconnelly/react-native-web/blob/master/src/Libraries/Animated/index.js

And then add AppRegistry.getAppElement(), which returns the top-level element.

Use classNames instead of inline styles

This is needed for compatibility with Uranium

Would need to copy this over: https://github.com/tuckerconnelly/react-native-web/blob/master/src/Libraries/Components/BaseStyles/index.js

And maybe automatically add that in AppRegistry

Add support for Linking

Just gotta copy this in to react-native-web:

https://github.com/tuckerconnelly/react-native-web/blob/master/src/Libraries/Linking/index.js

---

There was also some stuff with rnw's TextInput I had to fix. They're probably fixed by now in the main repo. Would just make sure that carbon-ui's <TextField /> component still works.

[necolas]

When you say "Support for onLayout" what does that mean? The relevant components have the onLayout prop.

[tuckerconnelly]

Ah nice! Does it work with Animated? I think I tried using componentDidUpdate like you're doing now, but there were some problems; I think it called onLayout for every tick of the animation, and child components' onLayouts weren't called.

React Native calls onLayout only once, and calls it for all the children elements too, so I ended up injecting into animatedjs like ^

[tuckerconnelly]

Alright, have a PR open for this: https://github.com/necolas/react-native-web/pull/282

[tuckerconnelly]

Hey guys, FYI I made a breaking change on carbon-ui#master--basically moved tuckerconnelly/react-native-web#master closer to necolas/react-native-web. You can either:

npm -S i tuckerconnelly/carbon-ui#0.1

Or make sure you're using AppRegistry in your index.web.js if you wanna stay on carbon-ui#master:

// index.web.js
import 'babel-polyfill'

import React from 'react'
import { AppRegistry } from 'react-native-universal'
import { WebStyles } from 'carbon-ui'

import App from './src/index'

const AppWithStyles = () => <App><WebStyles /></App>

AppRegistry.registerComponent('CarbonUIExample', () => AppWithStyles)
AppRegistry.runApplication('CarbonUIExample', { rootTag: document.getElementById('root') })

Also, gonna start using semver lol

[remon-nashid]

Hello @tuckerconnelly, I'm wondering what's the status of this issue after the numerous compatibility changes upstream RNW. Are we getting closer? Is the list of differences mentioned above is still accurate?

[tuckerconnelly]

Hey, yup, this is good-to-go. Should work with regular react-native-web :)

[SkyzohKey]

I get the following error when adding Carbon-UI to my react-native-web project.

---

Failed to compile

./node_modules/react-native-web/dist/exports/TextInput/TextInputStylePropTypes.js
Module build failed: Error: ENOENT: no such file or directory, open '/home/skyzohkey/Dev/React/Tox-Universal-Client/node_modules/react-native-web/dist/exports/TextInput/TextInputStylePropTypes.js'

This error occurred during the build time and cannot be dismissed.