getting red warning cannot updated state when setting progress in drawer Content

[vinaygoyal20]

Cannot update a component (MainDrawerStackScreen) while rendering a different component (DrawerView). To locate the bad setState() call inside DrawerView, follow the stack trace as described in https://reactjs.org/link/setstate-in-render in DrawerView (at DrawerView.tsx:235) in SafeAreaProviderCompat (at DrawerView.tsx:233) in RCTView (at View.js:34) in View (at GestureHandlerRootView.android.tsx:21) in GestureHandlerRootView (at DrawerView.tsx:232) in DrawerView (at createDrawerNavigator.tsx:47) in DrawerNavigator (at Routes.js:67)

` const drawerContent = useCallback(({progress, ...props}) => { setProgress(progress); return <CustomDrawer {...props} />; }, []);

`
this happens because of setProgress(progress); what should i do to remove this warning?

[hetmann]

hey @vinaygoyal20 so this is outdated based on the latest react-navigation version.

To make it work you should use useIsDrawerOpen from import { useIsDrawerOpen } from '@react-navigation/drawer'; and use it to create the animation on your Animated.View using the following code snippet

import React, {useEffect, useRef} from 'react';
import {Animated, StyleSheet} from 'react-native';
import { useIsDrawerOpen } from '@react-navigation/drawer';

/* drawer menu screens navigation */
const ScreensStack = () => {
  const isDrawerOpen = useIsDrawerOpen();
  const animation = useRef(new Animated.Value(0)).current;

  const scale = animation.interpolate({
    inputRange: [0, 1],
    outputRange: [1, 0.88],
  });

  const borderRadius = animation.interpolate({
    inputRange: [0, 1],
    outputRange: [0, 16],
  });

  const animatedStyle = {
    borderRadius: borderRadius,
    transform: [{scale: scale}],
  };

  useEffect(() => {
    Animated.timing(animation, {
      duration: 200,
      useNativeDriver: true,
      toValue: isDrawerOpen ? 1 : 0,
    }).start();
  }, [isDrawerOpen, animation]);

  return (
    <Animated.View
      style={StyleSheet.flatten([
        animatedStyle,
        {
          flex: 1,
          overflow: 'hidden',
          borderWidth: isDrawerOpen ? 1 : 0
        },
      ])}>
      {/* your Stack.Navigation screens */}
      <Screens />
    </Animated.View>
  );
};

[vinaygoyal20]

It worked.Thank a ton @hetmann you are a hero