[iOS] Dimensions API does not update values correctly when playing video in fullscreen

[CptFabulouso]

Description

When playing video in fullscreen on iOS device and the device is rotated, the Dimensions listeners fire with wrong values. Same issue in useWindowDimensions, since that's just a wrapper. It's probably related to #29290

React Native version:

System:
    OS: macOS 11.4
    CPU: (4) x64 Intel(R) Core(TM) i5-5257U CPU @ 2.70GHz
    Memory: 27.55 MB / 8.00 GB
    Shell: 3.2.57 - /bin/bash
  Binaries:
    Node: 14.5.0 - /usr/local/bin/node
    Yarn: 1.22.10 - /usr/local/bin/yarn
    npm: 7.6.0 - /usr/local/bin/npm
    Watchman: 4.7.0 - /usr/local/bin/watchman
  Managers:
    CocoaPods: 1.10.1 - /usr/local/bin/pod
  SDKs:
    iOS SDK:
      Platforms: iOS 14.5, DriverKit 20.4, macOS 11.3, tvOS 14.5, watchOS 7.4
    Android SDK:
      API Levels: 23, 26, 27, 28, 29
      Build Tools: 27.0.3, 28.0.3, 29.0.2, 29.0.3
      System Images: android-19 | Google APIs Intel x86 Atom, android-28 | Google APIs Intel x86 Atom
      Android NDK: Not Found
  IDEs:
    Android Studio: 4.2 AI-202.7660.26.42.7351085
    Xcode: 12.5/12E262 - /usr/bin/xcodebuild
  Languages:
    Java: 1.8.0_141 - /usr/bin/javac
    Python: 2.7.16 - /usr/bin/python
  npmPackages:
    @react-native-community/cli: Not Found
    react: 16.11.0 => 16.11.0
    react-native: 0.62.2 => 0.62.2
    react-native-macos: Not Found
  npmGlobalPackages:
    *react-native*: Not Found

Steps To Reproduce

1. Let's begin with device in portrait-UP
2. Press enlarge button to display the video in fullscreen
3. Rotate device to landscape-LEFT (listener sends update, but with portrait values)
4. Rotate device to portrait-UP (listener sends update, but with landscape values)
5. Rotate device to landscape-LEFT (listener sends update, but with portrait values)
6. Rotate device to portrait-DOWN (listener sends update, but with landscape values)
7. Rotate device to landscape-LEFT or RIGHT (listener updates with "correct" landscape values)
8. Rotate anywhere (listener will update with landscape values until you rotate the device to portrait-UP, then it follows logic from point 4)
9. Exit fullscreen mode
10. Rotate device (now listener sends correct values)

Simply put, when you rotate from portrait-UP to landscape, listeners update with portrait values. Rotation from any other orientation leads to landscape values.

Expected Results

Dimensions listeners notify with correct values.

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

import React from 'react';
import { View, useWindowDimensions } from 'react-native';
import YouTube from 'react-native-youtube';

const VideoComponent = () => {
  const { width, height } = useWindowDimensions();
  console.log({
    width,
    height,
  });

  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <YouTube
        apiKey="YOUTUBE_API_KEY"
        resumePlayAndroid={false}
        origin="http://www.youtube.com"
        videoId={'4B-kMtpGpn4'}
        play={false}
        loop={false}
        style={{
          width,
          height: 200,
        }}
      />
    </View>
  );
};

export default VideoComponent;

[demedos]

This is related to:

• [$16,000] Let's fix a React Native issue -- useWindowDimensions() returns swapped height and width in iOS Expensify/App#2727
• useWindowDimensions() returns swapped height and width in iOS #29290
• iOS fullscreen Video - Breaks Dimensions API react-native-webview/react-native-webview#1872

and should've been fixed with #34014

[github-actions]

This issue is stale because it has been open 180 days with no activity. Remove stale label or comment or this will be closed in 7 days.

[github-actions]

This issue was closed because it has been stalled for 7 days with no activity.