Unable to hide my drawer under screens? - react-navigation

Current Behavior I tried to use transition for opening and closing my drawer but there is a problem that is my drawer is over my screen which is not satisfying. I want my screens become over my drawer. you can clearly see below:

Expected Behavior

I expect to get this result:

my code in on navigation which I implement this transition effect

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 dimentions = useWindowDimensions();
  const [progress, setProgress] = useState(new Animated.Value(0));

  const rotate = Animated.interpolate(progress, {
    inputRange: [0, 1],
    outputRange: [0, -0.33],
  });

  const scale = Animated.interpolate(progress, {
    inputRange: [0, 1],
    outputRange: [1, 0.8],
  });

  const screenStyles = { transform: [{ rotate, scale }] }

  return (
    <Drawer.Navigator drawerType='slide' drawerStyle={{width: 250}} 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, backgroundColor: '#F3F9FF'}, 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;

dependencies

"dependencies": { "@react-native-community/masked-view": "0.1.10", "@react-navigation/bottom-tabs": "^5.10.0", "@react-navigation/drawer": "^5.10.0", "@react-navigation/native": "^5.7.3", "@react-navigation/stack": "^5.9.0", "expo": "~38.0.8", "expo-status-bar": "^1.0.2", "react": "~16.11.0", "react-dom": "~16.11.0", "react-native": "https://github.com/expo/react-native/archive/sdk-38.0.2.tar.gz", "react-native-gesture-handler": "~1.6.0", "react-native-reanimated": "~1.9.0", "react-native-safe-area-context": "~3.0.7", "react-native-screens": "~2.9.0", "react-native-segmented-control-tab": "^3.4.1", "react-native-svg": "^12.1.0", "react-native-web": "~0.11.7", "react-navigation": "^4.4.0" }, "devDependencies": { "@babel/core": "^7.8.6", "babel-preset-expo": "~8.1.0" },

Asked Oct 02 '21 17:10

EshgheCode