Make Relay work with React Native out of the box

[qingfeng]

The remaining steps are:

• Relay/React Native/fbjs versioning
• Use the appropriate unstableBatchedUpdates depending on React/React Native
• Version of fetch polyfill for React Native
• Document the use of babel-relay-plugin with React Native (see discussion at Make babel-relay-plugin run before other transforms #714 (comment))
• Create a fresh React Native project, set up Relay, configure the plugin per the documentation added in the previous step, and make sure everything works as expected.

Note: edited by @josephsavona

[yongxu]

have not tried yet, but looks like so.
some examples from docs use react native components
https://facebook.github.io/relay/docs/guides-containers.html#content

[josephsavona]

Relay should work as-is on React Native - if not, feel free to let us know and re-open this!

[amccloud]

@josephsavona even if relay components aren't inheriting react-native's Component?

https://github.com/facebook/relay/blob/master/src/container/RelayContainer.js#L23

I'm getting Can't find variable: document in getActiveElement

[amccloud]

I also needed to include johanneslumpe/react-native-browser-polyfill to get around a similar issue Can't find variable: self in whatwg-fetch

[boourns]

@josephsavona Relay cannot work as-is with React Native because Relay includes React web as a hard dependency, and including React web into React Native is not functional.

Here's a commit that shows the minimal changes to build relay against react-native:
e0037c7

The 'dist' step of building relay still fails with that commit, with the error:

I'm not sure exactly why that's failing.

The last two things we had to do to get relay working with react native was:

• Commit relay's /lib directory since building dist failed (above)
• stub process.env before including Relay in the react-native application, since process doesn't exist in react-native's JS environment. This is only necessary until the dist step of compilation works, since dist will remove all process.env references. I made a pseudo-module called 'relay',, which is a bit silly but functional:

process = {env: {}};

module.exports = require('react-relay');

[boourns]

Last thing I forgot to mention regarding relay's compatibility with react-native:

relay assumes self is present. This is true in react-native only when debugging in Chrome. If you are not debugging in Chrome you will get an error self is not defined when including Relay. A solution is to add https://github.com/johanneslumpe/react-native-browser-polyfill to your react-native project.

[amccloud]

@josephsavona can we re-open this?

[josephsavona]

@amccloud thanks for investigating, I'm reopening to give us a place to track this.

[boourns]

The last thing we needed to do to get relay working with react-native was to use react-native's global fetch by deleting the var fetch = require('fbjs/lib/fetch'); line from lib/RelayDefaultNetworkLayer.js.

We've gotten basic requests working following the steps I've outlined above in my comments on this issue, but I'm not 100% certain other things aren't broken yet.

[clintonwoo]

@boourns that's great. I also had to delete var fetch = require('fbjs/lib/fetch') from the following library which was declared in lib/RelayDefaultNetworkLayer.js:
var fetchWithRetries = require('fbjs/lib/fetchWithRetries');

[almeynman]

@boourns @clintonwoo Hello guys, followed your step all the way, however i get an error 'can't find variable fetchWithRetries', however when adding it i get 'cannot find variable: self'. Any tips would be greatly appreciated. github repo is https://github.com/almasakchabayev/reactNativeRelayWebpackDemo.

[boourns]

@almasakchabayev follow this comment: #26 (comment)

[almeynman]

@boourns It worked when I changed fetchWithRetries in 'function _sendQuery' to just fetch. Great! Thanks a lot!