Drawer Navigator Component Overlaps Screen When App Resumes from Background in Modal Presentation Mode

[tom-krusch]

Current behavior

When using the React Navigation packages with a screen set to the presentation mode "modal" and the app goes into the background and then becomes active again, a Drawer Navigator component unexpectedly overlaps the screen in the background. This issue disrupts the user experience and needs to be addressed.

It doesn't matter if the Drawer Navigator renders a custom drawerContent component or is default.

I have found out that this problem only exists if the drawerPosition: 'right' is set.

https://github.com/react-navigation/react-navigation/assets/28293677/a7cdfc61-aad5-46c7-985e-3f23c9ab90db

Expected behavior

The Drawer Navigator component remains hidden and does not protrude into the screen.

Reproduction

https://github.com/tom-krusch/SandboxApp

Platform

• [ ] Android
• [X] iOS
• [ ] Web
• [ ] Windows
• [ ] MacOS

Packages

• [ ] @react-navigation/bottom-tabs
• [X] @react-navigation/drawer
• [ ] @react-navigation/material-top-tabs
• [ ] @react-navigation/stack
• [X] @react-navigation/native-stack
• [ ] react-native-tab-view

Environment

• [x] I've removed the packages that I don't use

package	version
@react-navigation/native	6.1.7
@react-navigation/bottom-tabs	6.5.8
@react-navigation/drawer	6.6.3
@react-navigation/native-stack	6.9.13
react-native-safe-area-context	4.6.3
react-native-screens	3.22.0
react-native-gesture-handler	2.12.0
react-native-reanimated	3.3.0
react-native-tab-view	3.5.2
react-native-pager-view	6.2.0
react-native	0.72.1
node	18.16.0
npm or yarn	yarn

[tom-krusch]

I have now investigated myself and found out the following. The problem occurs because in the DrawerView the current width is determined by useSafeAreaFrame. However, if the screen goes into the background natively, it is scaled and the relative width does not change. but the useSafeAreaFrame hook returns the actual width, so it is smaller.

to fix this without update i use patch-package here is my change:

diff --git a/node_modules/@react-navigation/drawer/src/views/DrawerView.tsx b/node_modules/@react-navigation/drawer/src/views/DrawerView.tsx
index 9ec1d45..81908ab 100644
--- a/node_modules/@react-navigation/drawer/src/views/DrawerView.tsx
+++ b/node_modules/@react-navigation/drawer/src/views/DrawerView.tsx
@@ -18,9 +18,9 @@ import {
   Platform,
   StyleSheet,
   View,
+  useWindowDimensions
 } from 'react-native';
 import * as Reanimated from 'react-native-reanimated';
-import { useSafeAreaFrame } from 'react-native-safe-area-context';
 
 import type {
   DrawerContentComponentProps,
@@ -122,7 +122,7 @@ function DrawerViewBase({
     setLoaded([...loaded, focusedRouteKey]);
   }
 
-  const dimensions = useSafeAreaFrame();
+  const dimensions = useWindowDimensions();
 
   const { colors } = useTheme();
 

[JordyYeoman]

@tom-krusch - We have also been facing similar issues, your solution worked. It might be worth opening an MR to get this as part of the main package.

Unless there's reason to continue using the useSafeAreaFrame().

[eikhunter]

Yup, just upgraded and facing this issue, I believe it may be related to the same change useLegacyImplimentation being deprecated. The patch works! Thanks

[royjayperryman]

Still seeing this issue in the latest version 6.6.6. Is anyone opening a MR for this to be the solution? @tom-krusch @eikhunter

[ghost]

My app is experiencing this issue also caused by a third party package (react-native-auth0) which uses a modal screen to display their authentication window. The patch seems to work for us. Would like to see this incorporated into a future version as well.

EDIT: appears there's a PR for it already but it's been blocked so far https://github.com/react-navigation/react-navigation/pull/11632

[ghost]

@osdnk how do you propose this issue gets resolved?

[ghost]

@satya164 what do you think?

[danielschuetter]

we have the same issue! Thanks for the patch @tom-krusch

[amarilhaq95]

I have now investigated myself and found out the following. The problem occurs because in the DrawerView the current width is determined by useSafeAreaFrame. However, if the screen goes into the background natively, it is scaled and the relative width does not change. but the useSafeAreaFrame hook returns the actual width, so it is smaller.

to fix this without update i use patch-package here is my change:

diff --git a/node_modules/@react-navigation/drawer/src/views/DrawerView.tsx b/node_modules/@react-navigation/drawer/src/views/DrawerView.tsx
index 9ec1d45..81908ab 100644
--- a/node_modules/@react-navigation/drawer/src/views/DrawerView.tsx
+++ b/node_modules/@react-navigation/drawer/src/views/DrawerView.tsx
@@ -18,9 +18,9 @@ import {
   Platform,
   StyleSheet,
   View,
+  useWindowDimensions
 } from 'react-native';
 import * as Reanimated from 'react-native-reanimated';
-import { useSafeAreaFrame } from 'react-native-safe-area-context';
 
 import type {
   DrawerContentComponentProps,
@@ -122,7 +122,7 @@ function DrawerViewBase({
     setLoaded([...loaded, focusedRouteKey]);
   }
 
-  const dimensions = useSafeAreaFrame();
+  const dimensions = useWindowDimensions();
 
   const { colors } = useTheme();
 

Thanks tom, very helpful.