React-native: (undocumented) RN.createPortal works but leaves fiber tree in weird state

[EmielM]

I know portals aren't officially support on React Native, but using them seems to work just great and allows me to cheaply render eg a title outside the root view (in my case the titleView of a native UINavigationController):

class MyScreen extends React.Component {

    render() {
        const portal = require('ReactNative').createPortal(<Text>My Title</Text>, this.props.titleTag);
        return <View>{portal}<Text>My screen content</Text></View>;
    }
}
AppRegistry.registerComponent('MyScreen', () => MyScreen);

on the native (iOS) side, I add a separate RCTRootContentView where I want the portal to render to, and then pass that view's tag to my main render method:

- (void)loadView {
  NSNumber* titleTag = RCTAllocateRootViewTag();
  self.titleView = [[RCTRootContentView alloc] initWithFrame:CGRectMake(0,0,100,100)
                                                                     bridge:self.bridge
                                                                   reactTag:titleTag
                                                             sizeFlexiblity:RCTRootViewSizeFlexibilityWidth];

  self.view = [[RCTRootView alloc] initWithBridge:self.bridge
                                       moduleName:@"MyScreen"
                                initialProperties:@{@"titleTag": titleTag}];
}

Initial rendering works as expected (and my react components are portaled to outside the original RCTRootView, really cool). It is when MyScreen is redrawn and the portal needs to be removed an internal error is triggered in unmountHostComponents:

undefined is not an object (evaluating children.indexOf)

Trying to debug this proves rather challenging. I suspect the fiber tree is already in an incorrect state by then. What happens is that on https://github.com/facebook/react-native/blob/master/Libraries/Renderer/oss/ReactNativeRenderer-dev.js#L10776, currentParent is a number instead of an object.

Any clues on how to debug this issue further? Eg determine at which point the tree ends up in this weird state.

Thanks!

[react-native-bot]

Thanks for posting this! It looks like your issue may be incomplete. Are all the fields required by the Issue Template filled out?

If you believe your issue contains all the relevant information, let us know in order to have a maintainer remove the No Template label. Thank you for your contributions.

_{How to Contribute • What to Expect from Maintainers}

[EmielM]

All relevant info is in the ticket. Reproducible on 0.55.3.

[react-native-bot]

This issue was marked as lacking information required by the issue template. There has been no activity on this issue for a while, so I will go ahead and close it.

If you found this thread after encountering the same issue in the latest release, please feel free to create a new issue with up-to-date information by clicking here.

If you are the author of this issue and you believe this issue was closed in error (i.e. you have edited your issue to ensure it meets the template requirements), please let us know.

[satya164]

https://twitter.com/notbrent/status/982036500899512321

[satya164]

cc @sebmarkbage @gaearon

[Titozzz]

I have the exact same issue, I'm going to start to investigate

EDIT: This part is responsible for setting a number instead of the node inside currentParent. I guess since no one uses Portals on react-native there might be something broken here but I am not familiar enough with this part. I'll keep digging tho.

else if (node.tag === HostPortal) {
      // When we go into a portal, it becomes the parent to remove from.
      // We will reassign it back when we pop the portal on the way up.
      currentParent = node.stateNode.containerInfo;
      // Visit children because portals might contain host components.
      if (node.child !== null) {
        node.child.return = node;
        node = node.child;
        continue;
      }
    }

[Titozzz]

Got the fix, a line was missing ! I'll submit a PR and link it here