i have problem with {useDrawerProgress} Hook in react drawer navigator it is not working?

Question

I am trying to make Drawer menu screen transitions but the animation don,t work and I think the problem is {useDrawerProgress} Hook but am not sure, This is my custom-Drawer code

 function StackScreens({ navigation }) {
  const progress = useDrawerProgress();

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

  const drawerAnimationStyle = {
    transform: [{ scale }],
  };

  return (
    <Animated.View style={{ flex: 1, ...drawerAnimationStyle }}>
      <ScreenStack.Navigator>
        <ScreenStack.Screen
          name="HomeScreen"
          options={{ headerShown: false, animation: "slide_from_bottom" }}
          component={HomeScreen}
        />
        <ScreenStack.Screen
          name="Chapters"
          component={ChapterScreen}
          options={{
            headerShown: false,
            animation: "slide_from_right",
            presentation: "modal",
          }}
        />
        <ScreenStack.Screen
          name="Profile"
          component={ProfileScreen}
          options={{
            headerShown: false,
            animation: "slide_from_right",
            presentation: "modal",
          }}
        />
        <ScreenStack.Screen
          name="Setting"
          component={SettingScreen}
          options={{
            headerShown: false,
            animation: "slide_from_right",
            presentation: "modal",
          }}
        />
      </ScreenStack.Navigator>
    </Animated.View>
  );
}

This my Drawer-Navigator Components am using react-navigation 6 and all the dependencies are the latest versions

export const DrawerNavigation = () => {
  return (
    <NavigationContainer>
      <Drawer.Navigator
        drawerContent={(props) => {
          return <DrawerContent {...props} />;
        }}
      >
        <Drawer.Screen
          name="Home"
          options={{
            headerShown: false,
            swipeEdgeWidth: 50,
            drawerType: "slide",
            overlayColor: "transparent",
            drawerStyle: {
              width: "50%",
              backgroundColor: "transparent",
            },
            sceneContainerStyle: { backgroundColor: "transparent" },
          }}
        >
          {(props) => <StackScreens {...props} />}
        </Drawer.Screen>
      </Drawer.Navigator>
    </NavigationContainer>
  );
};

it just doesn't work I tried many ways but nothing works so please any help?

Answer 1

I have a similar problem here

But when I use

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

it throws me error: error in android emulator So I'm using progress.value like this

  const scale = Animated.interpolateNode(progress.value, {
    inputRange: [0, 1],
    outputRange: [1, 0.7],
  });

and the animation doesn't work!