React-Native | drawerContent props.progress return undefined - react-native

Question

I'm trying to buid a react-native application. I followed this tutorial in order to make the drawer part : https://www.youtube.com/watch?v=NV48FIIWaN0&t=1331s&ab_channel=ByProgrammers .
In this tutorial, he is using props.progress to update the progress status in order to compute the animation. I have nearly the same code and mine isn't working. props.progress return undefined.
Please find here my code :
const DrawerNavigator = ({route}) =>{
const [progress, setProgress] = React.useState(new Animated.Value(0))
const scale = Animated.interpolateNode(progress,{
inputRange : [0,1],
outputRange : [0,0.8]
})
const borderRadius = Animated.interpolateNode(progress,{
inputRange : [0,1],
outputRange : [0,25]
})
const animatedStyle = {transform:[{scale}]}
return(
<View style = {styles.mainContainer}>
<Drawer.Navigator
initialRouteName = "FableReader"
screenOptions={{
headerShown: false,
drawerStyle : [styles.drawerContainer],
drawerType : "slide",
overlayColor : "transparent",
sceneContainerStyle : [styles.sceneContainer],
}}
drawerContent = {({...props})=>{
setTimeout(()=>{
setProgress(props.progress)
},0)
return(
<CustomContent {...props} route = {route}></CustomContent>
)
}}
>
<Drawer.Screen name="FableReader">{props => <FableReaderScreen {...props}/>}</Drawer.Screen>
<Drawer.Screen name="LexiqueFable">{props => <LexiqueScreen {...props}/>}</Drawer.Screen>
<Drawer.Screen name="QCM">{props => <QCMScreen {...props}/>}</Drawer.Screen>
</Drawer.Navigator>
</View>
If you know what is wrong you're my hero !
Thanks again ;)

Answer 1

DrawerContent props.progress worked in React navigation 5. It has been removed in React navigation 6.
In React navigation 6 you can use useDrawerProgress. By default it returns 0 or 1. To get animation use useLegacyImplementation:
<Drawer.Navigator
screenOptions={{
drawerPosition: 'left',
drawerType: 'slide',
headerShown: false,
overlayColor: 'transparent',
drawerStyle: {
flex: 1,
width: '75%',
backgroundColor: 'transparent'
},
sceneContainerStyle: {
backgroundColor: 'transparent'
},
}}
initialRouteName="Home"
drawerContent={props => <Sidebar {...props} />}
useLegacyImplementation
>
<Drawer.Screen name="Home" component={Home} />
</Drawer.Navigator>
import React from "react"
import { StyleSheet } from 'react-native'
/* Animation */
import Animated from 'react-native-reanimated'
/* Drawer */
import { useDrawerProgress } from "#react-navigation/drawer"
const Home = props => {
const progress = useDrawerProgress()
const scale = Animated.interpolateNode(progress, {
inputRange: [0, 1],
outputRange: [1, 0.8],
extrapolate: 'clamp'
})
const borderRadius = Animated.interpolateNode(progress, {
inputRange: [0, 1],
outputRange: [0, 30],
extrapolate: 'clamp'
})
const style = { borderRadius, transform: [{ scale }] }
return (
<Animated.View style={[style, styles.box]}>
{/* Your content */}
</Animated.View>
)
}
export default Home
const styles = StyleSheet.create({
...
})

Answer 2

First of all, your animation-related code needs to be inside your CustomContent component, not inside DrawerNavigator.
Then remove this:
const [progress, setProgress] = React.useState(new Animated.Value(0))
And replace it with:
const progress = useDrawerProgress();
Where you import useDrawerProgress from #react-navigation/drawer.

Answer 3

You should put it inside your Layout component for the navigator, FableReader. And also, you should use hook -> useDrawerProgress
import Animated from 'react-native-reanimated';
import React from 'react';
import { useDrawerProgress } from '#react-navigation/drawer';
import { View, Text } from 'react-native';
const FableReader= () => {
const progress = useDrawerProgress();
const scale = Animated.interpolateNode(progress, {
inputRange: [0, 1],
outputRange: [1, 0.8],
});
const borderRadius = Animated.interpolateNode(progress, {
inputRange: [0, 1],
outputRange: [0, 25],
});
const animatedStyle = {
borderRadius,
transform: [{ scale }],
overflow: 'hidden',
};
return (
<Animated.View
style={{
flex: 1,
alignItems: 'center',
justifyContent: 'center',
backgroundColor: 'white',
...animatedStyle,
}}
>
<Text>FableReader page</Text>
</Animated.View>
);
};
export default FableReader;