Using react-native-web with ReactDOM.createPortal

[timothylui]

Is your feature request related to a problem? Please describe.
Hi, I'm creating an electron app with multiple windows and we're currently using window.open and then using ReactDOM.createPortal to set the document body.

This works great if you're using straight react, but when we're trying to use react-native it is missing the styles.

This also happens when trying to do the same thing in the browser, so isn't related to electron.

Describe a solution you'd like

As ReactDOM.createPortal creates a section of the dom, a way to set up the page so that react-native-web components render correctly. Alternatively, if this works already, a working example would be great.

Describe alternatives you've considered

Writing it in pure react but that means we can't reuse the components

[necolas]

Shouldn't you be using render rather than createPortal?

Multiple document roots isn't supported at the moment

[wjps]

I've been fighting with the same problem so would also be interested in the best way to get in working. Would something like react-gateway work?

I'm not sure how I'd use render to solve the problem though.

[nandorojo]

I've been looking for something like react-gateway too. Now that RNW supports modals, I think a modal-based solution would work for popovers. I came across SteffeyDev/react-native-popover-view#82 today, so I'll see if that works with the new RNW.

[wjps]

Ok, I've managed to get things working by doing

import App from '../App';
import { AppRegistry } from 'react-native-web';

AppRegistry.registerComponent('App', () => App);

then rendering the css into the new window with 
    ...
    render () {
    ...
       return (
          ...
          { AppRegistry.getApplication('App', {}).getStyleElement() }
          ...
       )
   }

Not sure if that's a valid way to do things but it seems to work.

[necolas]

Multiple roots should now be supported in 0.18