how can i fixed that issue with react-native-reanimated

Question

i try to create an animation on my drawer. the homescreen need to scale with also the borderradius.

that's my custom Drawer code

 const CustomDrawer = () => {
  const navigation = useNavigation();
  const [progress, setProgress] = React.useState(new Animated.Value(0));

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

  return (
    <View style={{flex: 1, backgroundColor: COLORS.darkGreen}}>
      <Drawer.Navigator
        screenOptions={{
          headerShown: false,
          sceneContainerStyle: {backgroundColor: 'transparent'},
          drawerType: 'slide',
          drawerStyle: {
            flex: 1,
            width: '65%',
            paddingRight: 20,
            backgroundColor: 'transparent',
          },
        }}
        drawerContent={props => {
          setTimeout(() => {
            setProgress(props.progress);
          }, 0);

          return <CustomContentDrawer navigation={navigation} />;
        }}>
        <Drawer.Screen name="MainLayout">
          {props => (
            <MainLayout {...props} drawerAnimationStyle={animatedStyle} />
          )}
        </Drawer.Screen>
      </Drawer.Navigator>
    </View>
  );
};

that's the home screen code

    import Animated from 'react-native-reanimated';

const MainLayout = ({drawerAnimationStyle}) => {
  return (
    <Animated.View
      style={{
        flex: 1,
        alignItems: 'center',
        justifyContent: 'center',
        backgroundColor: 'white',
        ...drawerAnimationStyle,
      }}>
      <Text>MainLayout</Text>
    </Animated.View>
  );
};

export default MainLayout;

[

a few months ago, this code was working fine, maybe with the new version V2, maybe there's some change.

can someone help me figure out this issue

thanks

Answer 1

In babel.config.js file add the below line of code and then install pods for ios and re-install node-module for android.

module.exports = {
presets: ['module:metro-react-native-babel- 
preset'],
plugins: ['react-native-reanimated/plugin'],
};

this plugin is mandatory to add in new version: plugins: ['react-native-reanimated/plugin']