react native unable to hide my drawer menu behind my screens - react-native

Question

I tried to use transition for opening and closing my drawer but there is a problem which is my drawer is over my screen which is not satisfying. I want my screens become over my drawer.
you can clearly see below (right one is desired and left is what I achieved so far):
I tried to use zIndex on my styles but no luck. here is my navigation code:
const IntroStack = createStackNavigator();
const IntroNavigation = () => {
return (
<NavigationContainer>
<IntroStack.Navigator>
<IntroStack.Screen name='intro' component={Intro} options={{ headerShown: false }} />
<IntroStack.Screen name='login' component={Login} options={{ headerShown: false }} />
<IntroStack.Screen name='createAccount' component={CreateAccount} options={{ headerShown: false }} />
<IntroStack.Screen name='forgotPassword' component={ForgotPassword} options={{ headerShown: false }} />
<IntroStack.Screen name='enterCode' component={EnterCode} options={{ headerShown: false }} />
<IntroStack.Screen name='changePassword' component={ChangePassword} options={{ headerShown: false }} />
<IntroStack.Screen name='home' component={DrawerNavigation} options={{ headerShown: false }} />
<IntroStack.Screen name='notfications' component={Notifications} options={{ headerShown: true }} />
</IntroStack.Navigator>
</NavigationContainer>
)
}
const Drawer = createDrawerNavigator();
const DrawerNavigation = () => {
const [progress, setProgress] = useState(new Animated.Value(0));
const rotate = Animated.interpolate(progress, {
inputRange: [0, 1],
outputRange: [0, -0.28],
});
const scale = Animated.interpolate(progress, {
inputRange: [0, 1],
outputRange: [1, 0.8],
});
const screenStyles = { transform: [{ rotate, scale }] }
return (
<Drawer.Navigator drawerType='slide' drawerStyle={{width: 300}} overlayColor='transparent' sceneContainerStyle={{backgroundColor: '#3170FF'}} drawerContent={
(props) => {
setProgress(props.progress);
return <DrawerContent {...props} />
}}>
<Drawer.Screen name="Home">
{(props) => <TabNavigation style={screenStyles} />}
</Drawer.Screen>
</Drawer.Navigator>
);
}
const Tab = createBottomTabNavigator();
const TabNavigation = (props) => {
return (
<Animated.View style={[{ flex: 1 }, props.style]}>
<Tab.Navigator tabBarOptions={{
style: {
borderTopLeftRadius: 23,
borderTopRightRadius: 23,
height: 70,
alignItems: 'center',
}
}} >
<Tab.Screen name="Home" component={Home} options={{
tabBarButton: (props) => <TabComponent label='home' {...props} />,
}} />
<Tab.Screen name="WorldTour" component={WorldTour} options={{
tabBarButton: (props) => <TabComponent label='earth' {...props} />,
}} />
<Tab.Screen name="Outlet" component={Outlet} options={{
tabBarButton: (props) => <TabComponent label='compass' {...props} />,
}} />
<Tab.Screen name="ChrisLeong" component={ChrisLeong} options={{
tabBarButton: (props) => <TabComponent label='crown' {...props} />,
}} />
<Tab.Screen name="OurTherapists" component={OurTherapists} options={{
tabBarButton: (props) => <TabComponent label='joint' {...props} />,
}} />
</Tab.Navigator>
</Animated.View>
);
}
export default IntroNavigation;
how can I fix this issue? thanks in advance!

Answer 1

import React from 'react';
import {View} from 'react-native';
import {useDrawerProgress} from '#react-navigation/drawer';
import Animated, {interpolate, useAnimatedStyle} from 'react-native-reanimated';
import {AppStyle} from '../../theme';
export default function DrawerScreen({children, style}) {
const drawerProgress = useDrawerProgress();
const viewStyles = useAnimatedStyle(() => {
const scale = interpolate(drawerProgress.value, [0, 1], [1, 0.75]);
const translateX = interpolate(drawerProgress.value, [0, 1], [0, 60]);
const borderRadius = interpolate(drawerProgress.value, [0, 1], [1, 10]);
const rotate = interpolate(drawerProgress.value, [0, 1], [0, -12]);
return {
transform: [
{scale},
{translateX},
{translateY: translateX - 100},
{rotate: `${rotate}deg`},
],
borderRadius,
};
});
const cardStyles = useAnimatedStyle(() => {
const translateTransparentCard = interpolate(
drawerProgress.value,
[0, 0.4, 1],
[0, 0, 0],
);
const scale = interpolate(drawerProgress.value, [0, 1], [1, 0.6]);
const rotate = interpolate(drawerProgress.value, [0, 1], [0, -18]);
return {
transform: [
{translateX: -translateTransparentCard},
{translateY: translateTransparentCard + 20},
{scale},
{rotate: `${rotate}deg`},
],
};
});
return (
<View style={AppStyle.fill}>
<Animated.View
style={[
{
opacity: 0.8,
borderRadius: 10,
overflow: 'hidden',
position: 'absolute',
},
AppStyle.fullSize,
cardStyles,
style,
]}>
{children}
</Animated.View>
<Animated.View style={[style, viewStyles]}>
<View style={[AppStyle.hideOverFlow, AppStyle.fill]}>{children}</View>
</Animated.View>
</View>
);
}

Answer 2

If you're using react navigation, you can use drawerType: "slide" in your drawer configuration
That is available on react-navigation above v3.x and should achieve what you're expecting.
https://reactnavigation.org/docs/drawer-navigator/#drawertype