fix: [Drawer] fix iOS wrong detected frame dimensions

[onmotion]

Motivation

It seems that under certain scenarios on iOS, the useSafeAreaFrame hook is returning incorrect dimensions. The issue may lie in the native implementation of methods responsible for layout (layoutSubviews, layoutIfNeeded, etc). However, we only require the height and width of the main window, as the Drawer is hidden behind the root View and we do not need the x and y coordinates of the top frame as SafeArea Rect provides.

Test plan

• Open Drawer

• Open iOS Modal
  dimensions values are correct and event is broadcasting properly

• Rotate screen landscape

• Rotate screen portrait
  dimensions values broken and are no longer broadcast

• Close modal

• The change must pass lint, typescript and tests.

Simulator.Screen.Recording.-.iPhone.15.-.2023-10-08.at.09.17.57.mp4

Untitled.mov

RN info

alexandrkozhevnikov@Alexandrs-MacBook-Pro AwesomeProject % npx react-native info
info Fetching system and libraries information...
System:
  OS: macOS 14.0
  CPU: (10) arm64 Apple M1 Pro
  Memory: 101.14 MB / 16.00 GB
  Shell:
    version: "5.9"
    path: /bin/zsh
Binaries:
  Node:
    version: 18.17.1
    path: ~/.nvm/versions/node/v18.17.1/bin/node
  Yarn:
    version: 1.22.19
    path: ~/.nvm/versions/node/v18.17.1/bin/yarn
  npm:
    version: 9.6.7
    path: ~/.nvm/versions/node/v18.17.1/bin/npm
  Watchman:
    version: 2023.09.25.00
    path: /opt/homebrew/bin/watchman
Managers:
  CocoaPods:
    version: 1.12.1
    path: /Users/alexandrkozhevnikov/.rvm/gems/ruby-2.7.6/bin/pod
SDKs:
  iOS SDK:
    Platforms:
      - DriverKit 23.0
      - iOS 17.0
      - macOS 14.0
      - tvOS 17.0
      - watchOS 10.0
  Android SDK:
    Android NDK: 22.1.7171670
IDEs:
  Android Studio: Not Found
  Xcode:
    version: 15.0/15A240d
    path: /usr/bin/xcodebuild
Languages:
  Java:
    version: 11.0.20.1
    path: /usr/bin/javac
  Ruby:
    version: 2.7.6
    path: /Users/alexandrkozhevnikov/.rvm/rubies/ruby-2.7.6/bin/ruby
npmPackages:
  "@react-native-community/cli": Not Found
  react:
    installed: 18.2.0
    wanted: 18.2.0
  react-native:
    installed: 0.72.5
    wanted: 0.72.5
  react-native-macos: Not Found
npmGlobalPackages:
  "*react-native*": Not Found
Android:
  hermesEnabled: true
  newArchEnabled: false
iOS:
  hermesEnabled: true
  newArchEnabled: false

Navigator snippet to reproduce

const Drawer = createDrawerNavigator();
const RootStack = createNativeStackNavigator<RootStackParamList>();

const DrawerStackNavigator = memo(() => {
return (
  <Drawer.Navigator
    drawerContent={DrawerContent}
    screenOptions={{
      headerShown: false,
      headerTransparent: true,
      drawerPosition: 'right',
      drawerType: 'front',
      drawerStyle: {
        width: 220,
      },
      freezeOnBlur: true,
      sceneContainerStyle: {flex: 1},
    }}>
    <Drawer.Screen
      options={{
        headerShown: false,
        title: 'App',
      }}
      name="Main"
      component={TabNavigator}
    />
  </Drawer.Navigator>
);
});

export const MainStackNavigator = () => {
return (
  <RootStack.Navigator
    screenOptions={{
      freezeOnBlur: true,
      headerBackground: undefined,
    }}>
    <RootStack.Screen
      options={{
        headerShown: false,
      }}
      name="TabStack"
      component={DrawerStackNavigator}
    />
    <RootStack.Screen
      options={{
        presentation: 'modal',
        headerShown: false,
      }}
      name="Modal1"
      component={Modal1}
    />
  </RootStack.Navigator>
);
};

[github-actions]

Hey @onmotion! Thanks for opening your first pull request in this repo. If you haven't already, make sure to read our contribution guidelines.

[codecov]

Codecov Report

All modified lines are covered by tests ✅

Comparison is base (adbf863) 75.69% compared to head (71228c9) 75.69%.

Additional details and impacted files

@@           Coverage Diff           @@
##             main   #11632   +/-   ##
=======================================
  Coverage   75.69%   75.69%           
=======================================
  Files         202      202           
  Lines        5850     5850           
  Branches     2301     2301           
=======================================
  Hits         4428     4428           
  Misses       1371     1371           
  Partials       51       51           

Files	Coverage Δ
packages/drawer/src/views/DrawerView.tsx	72.60% <100.00%> (ø)

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

[netlify]

✅ Deploy Preview for react-navigation-example ready!

Name	Link
🔨 Latest commit	71228c9
🔍 Latest deploy log	https://app.netlify.com/sites/react-navigation-example/deploys/6522a43b9c323d0008de08b3
😎 Deploy Preview	https://deploy-preview-11632--react-navigation-example.netlify.app/
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[osdnk]

Hi,
Thank you for the PR!

I believe that this should be fixed in the safe-area-context library.
@satya164 had issues with useWindowDimensions returning the wrong value on Samsung phones so I don't think that's the solution.

Also changes the behaviour, e.g. it'll give screen dimensions instead of the dimensions of the frame where the navigation tree is.

[onmotion]

Hi, Thank you for the PR!

I believe that this should be fixed in the safe-area-context library. @satya164 had issues with useWindowDimensions returning the wrong value on Samsung phones so I don't think that's the solution.

Also changes the behaviour, e.g. it'll give screen dimensions instead of the dimensions of the frame where the navigation tree is.

for sure, this should be fixed in in the safe-area-context library, but this issue exist for years and still there. And I didn't found the case when the Drawer could be behind the frame but not the actual screen.

[focux]

I'm experiencing this same issue and manually patching the drawer with this change fixed it. Thanks @onmotion!

[arizoska]

encountered the same issue, thank you @onmotion! would be great to have this merged

[lwhallock]

I am encountering the same issue and this fix is perfect for my work, thank you @onmotion

It does look like this may be taken care of in this PR for safe area context
th3rdwave/react-native-safe-area-context#480