{"action":"created","issue":{"url":"https://api.github.com/repos/facebook/react-native/issues/2501","labels_url":"https://api.github.com/repos/facebook/react-native/issues/2501/labels{/name}","comments_url":"https://api.github.com/repos/facebook/react-native/issues/2501/comments","events_url":"https://api.github.com/repos/facebook/react-native/issues/2501/events","html_url":"https://github.com/facebook/react-native/issues/2501","id":104031775,"number":2501,"title":"[Portal] Missing Docs & General Confusion","user":{"login":"yelled3","id":818124,"avatar_url":"https://avatars.githubusercontent.com/u/818124?v=3","gravatar_id":"","url":"https://api.github.com/users/yelled3","html_url":"https://github.com/yelled3","followers_url":"https://api.github.com/users/yelled3/followers","following_url":"https://api.github.com/users/yelled3/following{/other_user}","gists_url":"https://api.github.com/users/yelled3/gists{/gist_id}","starred_url":"https://api.github.com/users/yelled3/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/yelled3/subscriptions","organizations_url":"https://api.github.com/users/yelled3/orgs","repos_url":"https://api.github.com/users/yelled3/repos","events_url":"https://api.github.com/users/yelled3/events{/privacy}","received_events_url":"https://api.github.com/users/yelled3/received_events","type":"User","site_admin":false},"labels":[],"state":"closed","locked":false,"assignee":null,"milestone":null,"comments":6,"created_at":"2015-08-31T11:03:29Z","updated_at":"2016-01-11T06:47:56Z","closed_at":"2015-08-31T18:08:38Z","body":"I've been trying to figure out how to use `Portal.js` (since there's no official docs, yet)\r\nhttps://github.com/facebook/react-native/blob/master/Libraries/Portal/Portal.js\r\n\r\nnow although the comment at the top says:\r\n```js\r\n* Never use `<Portal>` in your code. There is only one Portal instance rendered\r\n* by the top-level `renderApplication`.\r\n```\r\n\r\nif I don't render `<Portal>` I get: `Calling showModal but no Portal has been rendered.`\r\nfrom reading the docs, it sounds like `<Portal>` is being auto-rendered somehow...\r\n\r\nit is still unclear to me if I should be using `Portal` at all... \r\nit doesn't seem to be integrated with `Modal` - which seems to offer a nicer interface...\r\n\r\nin any case;\r\nafter tinkering around for a bit, I got an example working, if anyone's interested:\r\n\r\n```js\r\nimport React from 'react-native';\r\nconst { View, StyleSheet, AppRegistry } = React;\r\n\r\nimport Portal from 'react-native/Libraries/Portal/Portal';\r\n\r\nimport MainAppView from './MyApp/MainAppView';\r\n\r\n\r\nclass MyPortalExample extends React.Component {\r\n\r\n  componentDidMount() {\r\n    const tag = Portal.allocateTag();\r\n\r\n    setTimeout( ()=> {\r\n\r\n      Portal.showModal(tag, this._modalComponent());\r\n\r\n    }, 1000);\r\n\r\n    setTimeout( ()=> {\r\n\r\n      Portal.closeModal(tag);\r\n\r\n    }, 2000);\r\n  }\r\n\r\n  _modalComponent() {\r\n    return (<View style={styles.modal} />);\r\n  }\r\n\r\n  render() {\r\n    const MainAppView = (<View/>); // load what ever you need\r\n    return (\r\n      <View style={styles.screen}>\r\n\r\n        <MainAppView />\r\n\r\n        <Portal />\r\n      </View>\r\n    );\r\n  }\r\n}\r\n\r\n\r\nconst styles = StyleSheet.create({\r\n\r\n  screen: {\r\n    flex: 1,\r\n    // needed since the <Portal> modalsContainer style is using `position: 'absolute'`\r\n    backgroundColor: 'transparent' \r\n  },\r\n\r\n  modal: {\r\n    width: 200,\r\n    height: 200,\r\n    backgroundColor: 'rgba(255,255,255, 0.5)'\r\n  }\r\n});\r\n\r\nAppRegistry.registerComponent('MyPortalExample', () => MyPortalExample);\r\n\r\n```\r\n\r\nam I using it correctly?\r\n\r\n\r\n\r\n"},"comment":{"url":"https://api.github.com/repos/facebook/react-native/issues/comments/170445486","html_url":"https://github.com/facebook/react-native/issues/2501#issuecomment-170445486","issue_url":"https://api.github.com/repos/facebook/react-native/issues/2501","id":170445486,"user":{"login":"niftylettuce","id":523141,"avatar_url":"https://avatars.githubusercontent.com/u/523141?v=3","gravatar_id":"","url":"https://api.github.com/users/niftylettuce","html_url":"https://github.com/niftylettuce","followers_url":"https://api.github.com/users/niftylettuce/followers","following_url":"https://api.github.com/users/niftylettuce/following{/other_user}","gists_url":"https://api.github.com/users/niftylettuce/gists{/gist_id}","starred_url":"https://api.github.com/users/niftylettuce/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/niftylettuce/subscriptions","organizations_url":"https://api.github.com/users/niftylettuce/orgs","repos_url":"https://api.github.com/users/niftylettuce/repos","events_url":"https://api.github.com/users/niftylettuce/events{/privacy}","received_events_url":"https://api.github.com/users/niftylettuce/received_events","type":"User","site_admin":false},"created_at":"2016-01-11T06:47:56Z","updated_at":"2016-01-11T06:47:56Z","body":"Check this out! https://github.com/niftylettuce/react-native-loading-spinner-overlay"}}