Skip to content

Using react-native-web with ReactDOM.createPortal #1765

Closed
Closed
Using react-native-web with ReactDOM.createPortal#1765
Labels
has: prSubject of a pull request
Milestone
0.18: StyleSheet

Description

@timothylui
timothylui
opened on Oct 12, 2020

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

Activity

  1. necolas commented on Oct 13, 2020

    @necolas
    necolas
    on Oct 13, 2020
    Owner

    Shouldn't you be using render rather than createPortal?

    Multiple document roots isn't supported at the moment

  2. wjps commented on Oct 13, 2020

    @wjps
    wjps
    on Oct 13, 2020

    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.

  3. nandorojo commented on Oct 13, 2020

    @nandorojo
    nandorojo
    on Oct 13, 2020
    Contributor

    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.

  4. wjps commented on Oct 14, 2020

    @wjps
    wjps
    on Oct 14, 2020

    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.

  5. necolas
    added this to the 0.18: StyleSheet milestone on Mar 1, 2022
  6. necolas
    added
    has: prSubject of a pull request
    on Mar 2, 2022

  7. necolas commented on Jun 10, 2022

    @necolas
    necolas
    on Jun 10, 2022
    Owner

    Multiple roots should now be supported in 0.18

  8. necolas
    closed this as completedon Jun 10, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    has: prSubject of a pull request

    Projects

    No projects

      Milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions