using content component progress react drawer navigation

Viewed 788

I've been trying to use the react-navigation drawer in my app. I figured out we receive progress(reanimated node) of the drawer in drawerContent props of Navigator. Is there any way I can use this progress in my Screen component. Here's my code.

   const drawerContent = useCallback(
         ({ progress, ...props }: any) => {
             setProgress(progress);
             return (
                 <DrawerContent {...props} />
             )
         }, []
   )
    <Drawer.Navigator
      drawerContent={drawerContent}>
      <Drawer.Screen name="HomeDrawer">
        {(props) => <Screen {...{ style }} {...props} />}
      </Drawer.Screen>
    </Drawer.Navigator>
1 Answers

Reading docs for react-navigation for latest version 6.x from here:

https://reactnavigation.org/docs/drawer-navigator/#drawercontent

You should use useDrawerProgress() hook to get current drawer progress. And make sure to call useDrawerProgress() inside your custom DrawerContentView otherwise if you are trying to get progress before:

<Drawer.Navigator>
  <Drawer.Screen name="HomeDrawer" component={Home}/>
</Drawer.Navigator>

This won't work since it is not created and does not exist within the views hierarchy.

Related