Hello,
I have a Bottom tab navigator nested in a Drawer navigator and I’m trying to create this drawer UI in an app.
Click here to view image
I used the “useDrawerStatus” hook from “@react-navigation/drawer” to create a ternary statement that changes an animated shared value (code is shown below). The issue with this method is that it only starts the animation after the drawer status changes, but I would like the animation to start as soon as the user starts opening the drawer.
One way I can do this is by using the “useDrawerProgress” hook from @react-navigation/drawer in the component, but the app crashes when I do.
Here’s a snippet of the component using “useDrawerSatus”
const BottomTabNavigator = () => {
const isDrawerOpen = useDrawerStatus() === 'open'
const animatedValue = useSharedValue(1)
// const progress = useDrawerProgress() Calling this hook crashes the app
useEffect(() => {
animatedValue.value = withTiming(isDrawerOpen ? 0.6 :1 , {duration:250, easing:Easing.ease})
}, [isDrawerOpen]);
const animatedStyle = useAnimatedStyle(() => ({
transform: [{ scale: animatedValue.value}]
}))
return (
<Animated.View style={[animatedStyle, { flex: 1 }]}>
<Navigator screenOptions={{ headerShown: false }} tabBar={(props) => <BottomTabBar {...props} />} >
<Screen name='home' component={BottomTabsHome} />
<Screen name='favorite' component={BottomTabsFavourite} />
<Screen name='profile' component={BottomTabsProfile} />
<Screen name='cart' component={BottomTabsCart} />
</Navigator>
</Animated.View>
)
}