{"action":"created","issue":{"url":"https://api.github.com/repos/facebook/relay/issues/26","labels_url":"https://api.github.com/repos/facebook/relay/issues/26/labels{/name}","comments_url":"https://api.github.com/repos/facebook/relay/issues/26/comments","events_url":"https://api.github.com/repos/facebook/relay/issues/26/events","html_url":"https://github.com/facebook/relay/issues/26","id":100470038,"number":26,"title":"Make Relay work with React Native out of the box","user":{"login":"qingfeng","id":18495,"avatar_url":"https://avatars.githubusercontent.com/u/18495?v=3","gravatar_id":"","url":"https://api.github.com/users/qingfeng","html_url":"https://github.com/qingfeng","followers_url":"https://api.github.com/users/qingfeng/followers","following_url":"https://api.github.com/users/qingfeng/following{/other_user}","gists_url":"https://api.github.com/users/qingfeng/gists{/gist_id}","starred_url":"https://api.github.com/users/qingfeng/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/qingfeng/subscriptions","organizations_url":"https://api.github.com/users/qingfeng/orgs","repos_url":"https://api.github.com/users/qingfeng/repos","events_url":"https://api.github.com/users/qingfeng/events{/privacy}","received_events_url":"https://api.github.com/users/qingfeng/received_events","type":"User","site_admin":false},"labels":[{"url":"https://api.github.com/repos/facebook/relay/labels/enhancement","name":"enhancement","color":"84b6eb"},{"url":"https://api.github.com/repos/facebook/relay/labels/help%20wanted","name":"help wanted","color":"159818"}],"state":"open","locked":false,"assignee":null,"milestone":null,"comments":50,"created_at":"2015-08-12T05:27:52Z","updated_at":"2015-10-16T15:56:33Z","closed_at":null,"body":"thanks"},"comment":{"url":"https://api.github.com/repos/facebook/relay/issues/comments/148753815","html_url":"https://github.com/facebook/relay/issues/26#issuecomment-148753815","issue_url":"https://api.github.com/repos/facebook/relay/issues/26","id":148753815,"user":{"login":"skevy","id":131916,"avatar_url":"https://avatars.githubusercontent.com/u/131916?v=3","gravatar_id":"","url":"https://api.github.com/users/skevy","html_url":"https://github.com/skevy","followers_url":"https://api.github.com/users/skevy/followers","following_url":"https://api.github.com/users/skevy/following{/other_user}","gists_url":"https://api.github.com/users/skevy/gists{/gist_id}","starred_url":"https://api.github.com/users/skevy/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/skevy/subscriptions","organizations_url":"https://api.github.com/users/skevy/orgs","repos_url":"https://api.github.com/users/skevy/repos","events_url":"https://api.github.com/users/skevy/events{/privacy}","received_events_url":"https://api.github.com/users/skevy/received_events","type":"User","site_admin":false},"created_at":"2015-10-16T15:56:33Z","updated_at":"2015-10-16T15:56:33Z","body":"So, I just made this work in a reusuable way yesterday for my team, and I thought I would post the steps I took (these are for the current master branch of RN):\r\n\r\n1) Make sure that instead of importing \"react\", Relay is importing \"react-native\". This is super temporary change that won't be needed once https://github.com/facebook/react-native/issues/2985 is resolved. I did it through the build process in `react-relay`.\r\n\r\n2) FBJS fixes: There are two, as has been discussed.\r\n\r\nThe first is:\r\n\r\n![image of asap error](https://s3.amazonaws.com/f.cl.ly/items/3E3S1W0L1d1M2h1q2a1T/Screen%20Shot%202015-10-16%20at%2011.09.17%20AM.png) \r\n\r\nThis happens, as far as I can tell, because of RN's packager dependency resolver. The resolver doesn't respect nested requires, and simply searches all files for \"require\" statements and tries to resolve those deps. In this case, in the `asap` library, on line 81 of `raw.js`, it's requiring a module called `domain`. This doesn't apply in the RN context, but the RN packager chokes (and now throws hard errors, vs. a couple weeks ago when it would just throw in the console and could be ignored). The only way to fix this at the moment is to comment out that `require`. I've opened an issue in RN to discuss this: https://github.com/facebook/react-native/issues/3463\r\n\r\nThe second issue is the FBJS fetch polyfill (as has been discussed).\r\n\r\nThe fetch polyfill looks like this:\r\n\r\n```javascript\r\n/**\r\n * Copyright 2013-2015, Facebook, Inc.\r\n * All rights reserved.\r\n *\r\n * This source code is licensed under the BSD-style license found in the\r\n * LICENSE file in the root directory of this source tree. An additional grant\r\n * of patent rights can be found in the PATENTS file in the same directory.\r\n *\r\n * @providesModule fetch\r\n */\r\n\r\n'use strict';\r\n\r\nrequire('whatwg-fetch');\r\nmodule.exports = self.fetch.bind(self);\r\n```\r\n\r\nIt would be great if we could replace it with something like this:\r\n\r\n```javascript\r\n\r\nvar fetch;\r\n\r\nif (!global.fetch) {\r\n   require('whatwg-fetch');\r\n   fetch = self.fetch.bind(self);\r\n}\r\n\r\nmodule.exports = fetch;\r\n```\r\n\r\nThis way, there wouldn't really need to be any updates to how Relay uses fetch, and could instead be fixed in fbjs.\r\n\r\nHowever, this fails for two reasons, the first being the aforementioned RN packager issue where it doesn't respect conditional `require`'s. The second reason has something to do with how `@providesModule` works, as this file is only loaded on RN when I remove the `@providesModule` directive from the top comment. Not completely sure why or how this works.\r\n\r\n3) ReactDOM dep for `unstable_batchedUpdates`.\r\n\r\nTo fix this issue, you have to change ReactDOM.js (in the `react` package) to be the following:\r\n\r\n```javascript\r\n/**\r\n * @providesModule ReactDOM\r\n */\r\n\r\n'use strict';\r\n\r\nvar ReactUpdates = require('./ReactUpdates');\r\n\r\n// Temporary shim required for Relay.\r\nvar ReactDOM = {\r\n  unstable_batchedUpdates: ReactUpdates.batchedUpdates,\r\n};\r\n\r\nmodule.exports = ReactDOM;\r\n```\r\n\r\nI'm not sure what the right way forward on this is.\r\n\r\nRN makes this method available under the `ReactNative` module...but since Relay needs this method and it's platform dependent, it would require Relay to somehow do execution environment detection. I'm not sure what FB's plan is to resolve this going forward.\r\n\r\n---\r\n\r\nAnyway, just wanted to summarize my findings here. Hope this helps people in the interim while these internal problems are fixed.\r\n\r\n"}}