React Portal children gets overriden in Fabric

[intergalacticspacehighway]

Description

Portals are not officially documented in RN. But I think it can be a very useful feature and it almost works!

Why do we need Portals?

Modal component cannot be used as a general-purpose overlay solution as multiple modals on iOS are tricky and Modal also prevents behind view touches. Userland solution loses React context when children are mounted.

Issue

I got createPortal working on Paper architecture by removing this assertion. However I ran into an issue on Fabric. After some digging, I found that the issue is in the React Fabric JS renderer, not native side. The Portal gets mounted momentarily but gets overridden by the HostRoot children.

Here is the repro. In the repro, two calls are made to updateHostContainer. 1 and 2. The second call from HostRoot overrides the children mounted by Portal. These findings are with some console.logs, I have no clue how it works. I'll try to dig more and update. I think @rickhanlonii can help 🙏

React Native Version

0.71.3

Output of npx react-native info

System:
    OS: macOS 13.2.1
    CPU: (8) arm64 Apple M1 Pro
    Memory: 417.80 MB / 32.00 GB
    Shell: 5.8.1 - /bin/zsh
  Binaries:
    Node: 16.13.1 - ~/.nvm/versions/node/v16.13.1/bin/node
    Yarn: 1.22.15 - ~/.nvm/versions/node/v16.13.1/bin/yarn
    npm: 8.12.1 - ~/.nvm/versions/node/v16.13.1/bin/npm
    Watchman: 2022.03.14.00 - /usr/local/bin/watchman
  Managers:
    CocoaPods: 1.11.3 - /opt/homebrew/bin/pod
  SDKs:
    iOS SDK:
      Platforms: DriverKit 22.2, iOS 16.2, macOS 13.1, tvOS 16.1, watchOS 9.1
    Android SDK: Not Found
  IDEs:
    Android Studio: 2022.1 AI-221.6008.13.2211.9514443
    Xcode: 14.2/14C18 - /usr/bin/xcodebuild
  Languages:
    Java: 11.0.13 - /usr/bin/javac
  npmPackages:
    @react-native-community/cli: 10.0.0 => 10.0.0 
    react: 18.2.0 => 18.2.0 
    react-native: Not Found
    react-native-macos: Not Found
  npmGlobalPackages:
    *react-native*: Not Found

Steps to reproduce

• Run the RN Tester Repro, portal gets mounted and unmounted (not visible, it happens fast). It only stays mounted if you comment this line
• Make sure you're on Fabric
• If you change arch to Paper, it'll work as expected.

Snack, code example, screenshot, or link to a repository

RNTester Repro

[github-actions]

⚠️	Add or Reformat Version Info
ℹ️	We could not find or parse the version number of React Native in your issue report. Please use the template, and report your version including major, minor, and patch numbers - e.g. 0.70.2

[github-actions]

⚠️	Missing Environment Information
ℹ️	Your issue may be missing information about your development environment. You can obtain the missing information by running react-native info in a console.

[intergalacticspacehighway]

More findings -

createContainerChildSet gets called twice. As it returns a new childSet, second call overrides the children added previously. I think we might have to append if it's already created.

[javache]

Portals are not supported in React Native. You can achieve similar behaviour with custom native components by manually "portalling" children to a different container.

[natew]

@javache they aren't supported, but is there any plan to support them? They are a pretty big missing gap between web and native, would be nice to have a place to track their plan.

Manually moving things around will break context entirely, which makes them very awkward in practice.