Cannot Open DrawerLayout of react-native-gesture-handler

[sunzhaoyang]

Im trying to use for my first time the Drawer Layout from react-native-gesture-handler, but everytime i try to use it wont open.

No error messages, nothing happens.

Simply my code as following :

function Detail({ route, navigation }) {
  let draw = React.useRef<DrawerLayout>();

  function renderSearch() {
    return (<View style={styles.drawerContainer}>
      <Text style={styles.drawerText}>I am in the drawer!</Text>
    </View>)
  }

  const handleDrawerSlide = (status) => {
    // outputs a value between 0 and 1
    console.log(status);
  };

  return (
      <GestureHandlerRootView style={{ flex: 1 }}>

      <View style={{}}>
        <DrawerLayout
          ref={(drawer) => {
            draw.current = drawer;
          }}
          drawerWidth={300}
          drawerPosition={DrawerLayout.positions.Left}
          drawerType="front"
          drawerBackgroundColor="#ddd"
          renderNavigationView={renderSearch}
          onDrawerSlide={handleDrawerSlide}>

        </DrawerLayout>
        <View style={{ height: 200, marginTop: 100 }}>
          <RectButton onPress={draw.current.openDrawer}>
            <Text>Open drawer</Text>
          </RectButton>
         </View>
        </View>
     </GestureHandlerRootView>
  )

}

I tried change
onPress={draw.current.openDrawer}
to
onPress={() => {draw.current.openDrawer();console.log(draw.current.state) }}

Got output:

{"containerWidth": 430, "dragX": 0, "drawerOpened": true, "drawerState": "Idle", "drawerTranslation": 300, "touchX": 0}

Environment:

• [email protected]
• [email protected]