full screen video exit messes up layout in Webview

Expo SDK
11

Not that I’m aware of. Funny you ask, I’ve been working on that issue since this morning!

The problem, as I understand it, is because you probably set the orientation to “portrait” in app.json. Therefore, no matter the position of the device will remain in portrait, as intended.

However, when you play a video through webview, iOS will not respect the default orientation in app.json and will update the screen orientation anyway. When played in portrait and exited in portrait, that’s fine but if you turn your device in landscape and exit full screen then the orientation will be stuck in landscape.

Here is the closest solution I found:

import { ScreenOrientation } from "expo";

  componentDidMount() {
    ScreenOrientation.unlockAsync();
    ScreenOrientation.addOrientationChangeListener(async event => {
      if (event.orientationInfo.orientation === "LANDSCAPE") {
        //Alert.alert("landscape");
        await ScreenOrientation.lockAsync(
          ScreenOrientation.OrientationLock.PORTRAIT_UP
        );
      } else {
// Because sometimes it get stuck
        await ScreenOrientation.lockAsync(
          ScreenOrientation.OrientationLock.PORTRAIT_UP
        );
      }
    });
}

The first time you play the video in fullscreen and move from portrait position to landscape, it will go back to portrait mode. Try one more time and it should work.

I know it’s clumsy and hackish but that’s all I got so far… Unless you know how to make iOS communicate the actual screen orientation to react.

1 Like