react-navigation drawer stays opened after app is initialised in SDK40

[chuanxie]

🐛 Bug Report

after upgrade to sdk 40, app broken and drawer stays opened

reverted into SDK39 and life back to normal

Environment -

    System:
      OS: macOS 10.15.7
      Shell: 5.7.1 - /bin/zsh
    Binaries:
      Node: 12.14.1 - /usr/local/bin/node
      Yarn: 1.22.10 - /usr/local/bin/yarn
      npm: 6.14.8 - /usr/local/bin/npm
    Managers:
      CocoaPods: 1.9.1 - /usr/local/bin/pod
    SDKs:
      iOS SDK:
        Platforms: iOS 14.2, DriverKit 20.0, macOS 11.0, tvOS 14.2, watchOS 7.1
    IDEs:
      Android Studio: 4.1 AI-201.8743.12.41.6858069
      Xcode: 12.2/12B45b - /usr/bin/xcodebuild
    npmPackages:
      expo: ^40.0.0 => 40.0.0
      react: 16.13.1 => 16.13.1
      react-dom: 16.13.1 => 16.13.1
      react-native: https://github.com/expo/react-native/archive/sdk-40.0.1.tar.gz => 0.63.2
    npmGlobalPackages:
      expo-cli: 4.0.17
    Expo Workflow: managed

and "@react-navigation/bottom-tabs": "5.11.2", "@react-navigation/drawer": "5.11.4", "@react-navigation/native": "5.8.10", "@react-navigation/stack": "5.12.8",

[byCedric]

Hi @chuanxie, thanks for writing in. But, without a reproducible example, I can't help investigate this issue. Could you provide either a repo or a snack with the issue occurring for you?

One thing you could try is maintaining the same versions of all @react-navigation/* libraries and only upgrade Expo to SDK 40. If you see any change in behavior, that confirms something is going on in SDK 40. If it's happening only when bumping up @react-navigation/* libraries, there might be an issue in React Navigation itself.

Hope this helps!

[chuanxie]

thanks @byCedric, i used expo upgrade to upgrade all dependancy and tested with different version of react-navigation.
but unfortunately problem stays the same.
its a big project but i will create a reproducible example for you

[amanda-t]

I had the same issue (upgraded from Expo 39.0.2 to Expo 40 without changing any versions of my react-navigation packages). On iOS the drawer navigation was behaving oddly and was stuck open after upgrading to Expo 40 even though it worked fine in Expo 39. Figured out it was due to wrapping everything, including the navigation, in a top-level SafeAreaView. Changing my top-level SafeAreaView to a View fixed it.

Here is a basic example snack based on one of React Navigation's drawer examples. All I changed was wrapping NavigationContainer in <SafeAreaView style={{ flex: 1 }}> and it's broken on iOS. Change the Expo version to 39 and see the same code working.

[chuanxie]

@amanda-t good catch!
i guess it needs to use SafeAreaProvider from 'react-native-safe-area-context'; and SafeAreaView from 'react-native-safe-area-view' instead of SafeAreaView from react-native?

[brentvatne]

re: top-level SafeAreaViews - this should be avoided: https://reactnavigation.org/docs/handling-safe-area - React Navigation adds them for you automatically when needed for the navigation UI, and you should add them per-screen when needed.

we recommend using react-native-safe-area-context for all of your safe area needs, it exports SafeAreaView and hooks like useSafeAreaInsets. read more in the docs page linked to above and once again here: https://reactnavigation.org/docs/handling-safe-area

if anyone can provide a reproducible example for the bug that demonstrates this is a bug with expo / expo sdk i'd be happy to investigate, but closing otherwise

[malashkevich]

@brentvatne I guess the issue still reproducible. @amanda-t already mentioned the repro example

I actually removed all the safe areas in the app, but I still, sometimes get this broken behavior.

[brentvatne]

open an issue on react-navigation if you are still having this issue, it's not clear to me that this is related to anything we're doing in expo. if you can demonstrate that it happens with expo and not elsewhere then that would help us get a better idea of whether we need to investigate it