React Navigation Drawer won't open/close when swiping from the side of the screen. iOS

Third Party Software
#1

I have a React Navigation(v5) Drawer as part of my app that won’t open when swiping from the side of the screen, or won’t close when swiping the drawer back or when tapping behind the drawer. We are using expo sdk 40. This behaviour used to work but doesn’t anymore. I can confirm it works properly in the expo client on an iPad running iOS 12.5 but not on an iPhone running iOS 14.3.

I’m not sure if it would help since its working properly on an older iOS version, but the Drawer.Navigator looks like the following:

<Drawer.Navigator
  drawerPosition='right'
  drawerType='slide'
  drawerStyle={{
    backgroundColor: Colors.blue3,
  }}
  initialRouteName='MainTabs'
  drawerContent={props => <CustomDrawerContent {...props} navigation={navigation} />}
  drawerContentOptions={{
    labelStyle: {
      color: Colors.lightText,
      fontSize: 18,
      fontWeight: 'bold',
    },
  }}
>

Im at a loss as to what to do to get this working again. Any help from anyone would be greatly appreciated. Thank you.

#2

I have the same issue, upgrading from expo37 to expo40 broke this functionality on iOS. It works on Android, and on both platforms with the old sdk.

#3

I’ve done a bit more testing and its working for me in the expo client on iOS when I’m running a published version of the app or when I disconnect Remote Debugging which is using React Native Debugger. Does it work for you @rivet in any of these cases?

#4

hey @acmofocord yes, swiping does work when running from the expo client on a real device. Also a colleague of mine has worked a bit on the issue, and it seems to be related to react-native-reanimated. She forked react-navigation and removed the usage of Animated.event in Drawer.tsx, and that fixes the issue. We do not understand the underlying problem though, I tried different versions of the react-native-reanimated library, but all resulted the same error with EXPO 40.

#5

I’m having an issue with my drawer on iOS also. It works flawlessly on Android, but on iOS it’s picky. I’d say that it works about 75% of the time, but then sometimes won’t work several times in a row. If I leave it for a few seconds “to let it rest”, it starts working again. The iOS version is 14.4 and the Expo SDK is 40.

After reading this thread, do I understand correctly that it might still be an issue with the software and not my app? I want to know if I’m wasting my time tweaking options like the edgeWidth and minSwipeDistance to try to get it to work better. Here is a copy of my code, but I think it’s fairly standard. This is my first post here and my first project with Expo or React Native.

<MainDrawerNavigator.Navigator
      backBehavior='order'
      drawerType='front'
      edgeWidth={100}
      minSwipeDistance={50}
      drawerStyle={{ width: 300 }}
1 Like
#6

I am having the same issue here @jeffcad , the drawers wont open like 2 times in 10 tries, running on ios14.4, using expo sdk 40

#7

Hey Kevin, does yours also work on Android like mine does? Do you find that it’s more responsive on Android, like you can swipe fast or slow, but on iOS only a slow and steady swipe works? In the next 24 hours, I’m going to make a smaller app with basically no content except the menu and see if it still happens. I want to make a GitHub bug report, but I’m not even sure which library is causing it. It would also be my first GitHub issue, so don’t want to make a fool of myself. :smiley:

#8

Hey Jeffcad, yes, I have also tested with Android, it works perfectly and I do feel like it is more responsive and more smoothly.
I have also tried to run the minimum example from react navigation drawer example in ios 14.4, and the defect is still exists.
I would really appreciate it if you are going to raise a bug report, and do you mind posting the bug report link in here ?

#9

Sure, I’ll try that. I guess I’ll post it in the React Navigation repo and see where that takes me. Are you a rookie like me?

Edit: Actually, it sounds like it could be an issue with Expo, if people write that it used to work on the older versions. Do the Expo people read these forums?

#10

yeah, this should be the right place to post the issue or maybe just go to their repo, I suspect the issue would be in the reanimated or expo.
I am coming from reactJs background, but yeah, I have just used expo and rn for just 2 or 3 moths

#11

For now I’ve made a post in the Expo SDK Help section, to see if anybody has further leads. The link is:

1 Like