Teleported components get stuck when orientation changes

[jaeren-clutch]

Before submitting a new issue

• I tested using the latest version of the library, as the bug might be already fixed.
• I tested using a supported version of react native.
• I checked for possible duplicate issues, with possible answers.

Bug summary

Hello,

When viewing a teleported component in full-screen and the device's orientation is changed (i.e. portrait to landscape or vice versa) occasionally the component fails to rotate along with the screen, causing a broken view.

See video below:

video_2026-06-30_15-33-45.mp4

For this example specifically, the Portal looks like this:

<Portal hostName={isFullscreen ? "root-overlay" : undefined}>
        <View
          style={{
            width: "100%",
            height: "100%",
            justifyContent: "center",
            alignContent: "center",
            alignItems: "center",
            backgroundColor: "#3B82F6",
          }}
        >
          <Text style={{ color: "#EF4444", fontSize: 100 }}>Hello world</Text>
          <Button onPress={handleFullscreenToggle} title="Toggle fullscreen" />
      </View>
</Portal>

and the host like this:

<PortalProvider>
            <PortalHost
              style={{
                position: "absolute",
                top: 0,
                left: 0,
                bottom: 0,
                right: 0,
                zIndex: 100000,
              }}
              name="root-overlay"
            />
   ...

(I've tried other ways of displaying, such as StyleSheet.absoluteFill however the results are the same - this is just the latest one I've attempted.)

Let me know if you require any further information.

This is a great library by the way, massive kudos from me 👍👍.

Library version

1.1.9

Environment info

System:
  OS: Windows 10 10.0.19045
  CPU: "(16) x64 AMD Ryzen 7 3700X 8-Core Processor             "
  Memory: 7.56 GB / 31.93 GB
Binaries:
  Node:
    version: 22.13.1
    path: C:\nvm4w\nodejs\node.EXE
  Yarn:
    version: 1.22.22
    path: C:\nvm4w\nodejs\yarn.CMD
  npm:
    version: 11.17.0
    path: C:\nvm4w\nodejs\npm.CMD
  Watchman:
    version: 20240708.075217.0
    path: C:\ProgramData\chocolatey\bin\watchman.EXE
SDKs:
  Android SDK: Not Found
  Windows SDK: Not Found
IDEs:
  Android Studio: Not Found
  Visual Studio:
    - 17.2.32602.215 (Visual Studio Community 2022)
Languages:
  Java: 19.0.1
  Ruby: Not Found
npmPackages:
  "@react-native-community/cli": Not Found
  react:
    installed: 19.2.3
    wanted: 19.2.3
  react-native:
    installed: 0.85.3
    wanted: 0.85.3
  react-native-windows: Not Found
npmGlobalPackages:
  "*react-native*": Not Found
Android:
  hermesEnabled: Not found
  newArchEnabled: Not found
iOS:
  hermesEnabled: Not found
  newArchEnabled: Not found

Steps to reproduce

1. Replicate the code as shown above
2. Enter "full-screen mode" (trigger the teleport)
3. Attempt to change the device's orientation multiple times

Reproducible example repository

[kirillzyusko]

Hey @jaeren-clutch

Would it be possible to provide a code that you used in your example? 🙏

[jaeren-clutch]

@kirillzyusko Thanks for the prompt response, the example in question is part of a larger private codebase - I'll try to recreate it independently and share the repository to you

In the meantime is there anything you might need to know about the code that might assist?

[kirillzyusko]

@jaeren-clutch I tried to reproduce your issue in "flexible styles" example, but I can not reproduce it:

Screen.Recording.2026-06-30.at.21.29.44.mov

Tested both iOS/Android. The issue could stem from the fact that we explicitly restrict/set width/height properties on ShadowNode level:

react-native-teleport/common/cpp/react/renderer/components/TeleportViewSpec/RNTPortalViewShadowNode.h

Lines 31 to 33 in 20aebd3

	if (hostSize.width != 0 && hostSize.height != 0) {
	setSize(Size(hostSize.width, hostSize.height));
	}

But again, it would be good to have a repro code so that I can repro the problem. Do you experience this problem on Android only?

[jaeren-clutch]

Hello again @kirillzyusko !

I've managed to reproduce it on a blank repository by extracting all the logic from my main repo - here you go!
https://github.com/jaeren-clutch/teleport-test

I only tested this repo on Android but we were experiencing it on both Android and iOS on the main app.

I think the issue was we were setting it's parent container's sizing using Dimensions.get('screen')?
Removing that bit or replacing it with useWindowDimensions() seems to stop it from happening here, but I tried updating that in my main app and it was still a little unstable during the transitions (It would get stuck for maybe a second, then snap into the correct orientation)

[kirillzyusko]

Hey @jaeren-clutch

Thank you for repro. I checked your code and it indeed worked correctly with @gorhom/portal. I fixed behavior in #157 - could you check if it fixes an issue in your project? 👀

If yes, then happy to merge and publish 1.1.11 version as a quick follow up 👀