DrawerLayoutAndroid background overlay issues

[KirubaGhoshak]

Description

DrawerLayoutAndroid functions properly without the need for any routing or navigation library. However, when incorporating a navigation library to enable screen switching and utilizing the drawer, certain overlay issues arise.

React Native Version

0.71.8

Output of npx react-native info

System:
OS: macOS 12.5
CPU: (8) arm64 Apple M2
Memory: 116.64 MB / 16.00 GB
Shell: 5.8.1 - /bin/zsh
Binaries:
Node: 19.6.0 - /opt/homebrew/bin/node
Yarn: 1.22.19 - ~/Documents/ghoshak_app/node_modules/.bin/yarn
npm: 9.4.0 - /opt/homebrew/bin/npm
Watchman: 2023.02.13.00 - /opt/homebrew/bin/watchman
Managers:
CocoaPods: 1.11.3 - /opt/homebrew/bin/pod
SDKs:
iOS SDK: Not Found
Android SDK: Not Found
IDEs:
Android Studio: 2021.3 AI-213.7172.25.2113.9123335
Xcode: /undefined - /usr/bin/xcodebuild
Languages:
Java: 11.0.17 - /usr/bin/javac
npmPackages:
@react-native-community/cli: Not Found
react: 18.2.0 => 18.2.0
react-native: ^0.71.3 => 0.71.3
react-native-macos: Not Found
npmGlobalPackages:
react-native: Not Found

Steps to reproduce

• Click the navigate to profile screen.

• Go back to the home screen.

• And clicking the open drawer.

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

https://snack.expo.dev/@kiruba26/drawerlayoutandroid-component-example

[github-actions]

⚠️

Newer Version of React Native is Available!

ℹ️

You are on a supported minor version, but it looks like there's a newer patch available - 0.71.8. Please upgrade to the highest patch for your minor or latest and verify if the issue persists (alternatively, create a new project and repro the issue in it). If it does not repro, please let us know so we can close out this issue. This helps us ensure we are looking at issues that still exist in the most recent releases.

[KirubaGhoshak]

the issue exists in the latest version also

[Gregoirevda]

function Drawer({children, ...}) { 
  const isFocused = useIsFocused();

  return <DrawerLayoutAndroid  key={isFocused} ...
}

Solves it, but adding a visible prop would probably solve this problem in a better way

[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.