Remove progress prop from drawerContent for 6.x

Author: satya164

static/examples/6.x/animated-drawer-content.js

@@ -6,6 +6,7 @@ import {
   DrawerContentScrollView,
   DrawerItemList,
   DrawerItem,
+  useDrawerProgress,
 } from '@react-navigation/drawer';
 import Animated from 'react-native-reanimated';
 
@@ -25,16 +26,18 @@ function Article() {
   );
 }
 
-function CustomDrawerContent({ progress, ...rest }) {
-  const translateX = Animated.interpolate(progress, {
+function CustomDrawerContent(props) {
+  const progress = useDrawerProgress();
+
+  const translateX = Animated.interpolateNode(progress, {
     inputRange: [0, 1],
     outputRange: [-100, 0],
   });
 
   return (
-    <DrawerContentScrollView {...rest}>
+    <DrawerContentScrollView {...props}>
       <Animated.View style={{ transform: [{ translateX }] }}>
-        <DrawerItemList {...rest} />
+        <DrawerItemList {...props} />
         <DrawerItem label="Help" onPress={() => alert('Link to help')} />
       </Animated.View>
     </DrawerContentScrollView>

versioned_docs/version-6.x/drawer-navigator.md

@@ -122,7 +122,6 @@ The content component receives following props by default:
 - `state` - The [navigation state](navigation-state.md) of the navigator.
 - `navigation` - The navigation object for the navigator.
 - `descriptors` - An descriptor object containing options for the drawer screens. The options can be accessed at `descriptors[route.key].options`.
-- `progress` - Reanimated Node that represents the animated position of the drawer (0 is closed; 1 is open).
 
 ##### Providing a custom `drawerContent`
 
@@ -197,7 +196,7 @@ function CustomDrawerContent(props) {
 }
 ```
 
-The `progress` object is a Reanimated `Node` if you're using Reanimated 1 (see [`useLegacyImplementation`](#uselegacyimplementation)), otherwise a `SharedValue`.
+The `progress` object is a Reanimated `Node` if you're using Reanimated 1 (see [`useLegacyImplementation`](#uselegacyimplementation)), otherwise a `SharedValue`. It represents the animated position of the drawer (0 is closed; 1 is open).
 
 Note that you **cannot** use the `useNavigation` hook inside the `drawerContent` since `useNavigation` is only available inside screens. You get a `navigation` prop for your `drawerContent` which you can use instead:
 

versioned_docs/version-6.x/upgrading-from-5.x.md

@@ -676,6 +676,24 @@ The following options have been moved and renamed:
 
 The old options will still keep working with a deprecation warning. To avoid the deprecation warning, move these to `screenOptions`.
 
+### The `drawerContent` prop no longer receives `progress` in its argument
+
+The callback passed to `drawerContent` no longer receives the animated `progress` value in its argument. Instead, you can use the `useDrawerProgress` hook to get the current progress value.
+
+```js
+function CustomDrawerContent(props) {
+  const progress = useDrawerProgress();
+
+  // ...
+}
+
+// ...
+
+<Drawer.Navigator drawerContent={(props) => <CustomDrawerContent {...props} />}>
+```
+
+The `useDrawerProgress` hook returns a Reanimated `Node` or Reanimated `SharedValue` depending on the implementation used.
+
 ### The `lazy` prop is moved to `lazy` option for per-screen configuration for drawer
 
 Similar to bottom tabs, the `lazy` prop is now moved to `options` for drawer.