Animate multiple interpolation at the same time in React-Reanimated v2

Question

I was looking for this Animation for my Custom Drawer Navigation:

Instead, I got this:

My Codes are:

Main Component:

import * as React from 'react';
import { View } from 'react-native';
import { createDrawerNavigator } from '@react-navigation/drawer';
import { NavigationContainer } from '@react-navigation/native';
import HomeScreen from './HomeScreen';
import Drawers from '../components/Drawers';


const Drawer = createDrawerNavigator();

export default function App() {
  return (
    <View style={{ backgroundColor: '#FF4B3A', flex: 1 }}>
      <NavigationContainer>
        <Drawer.Navigator
          drawerContent={(props) => {
            return <Drawers {...props} />;
          }}
          screenOptions={{
            headerShown: false,
            swipeEnabled: false,
            drawerType: 'slide',
            overlayColor: 'transparent',
            drawerStyle: {
              backgroundColor: 'transparent',
            },
            sceneContainerStyle: {
              backgroundColor: 'transparent',
            },
          }}
          initialRouteName='Home'
        >
          <Drawer.Screen name='Home'>
            {(props) => <HomeScreen {...props} />}
          </Drawer.Screen>
        </Drawer.Navigator>
      </NavigationContainer>
    </View>
  );
}

Drawer Component

import * as React from 'react';
import { Button } from 'react-native';
import { useDrawerStatus } from '@react-navigation/drawer';
import Animated, {
  Extrapolate,
  interpolate,
  useAnimatedStyle,
  useSharedValue,
  withTiming,
} from 'react-native-reanimated';

export default function HomeScreen({ navigation }) {
  const scaleAnimation = useSharedValue(0);
  const isDrawerOpen = useDrawerStatus();
  const animatedStyle = useAnimatedStyle(() => {
    const scale = interpolate(scaleAnimation.value, [0, 1], [1, 0.8], {
      extrapolateRight: Extrapolate.CLAMP,
    });
    const translateY = interpolate(scaleAnimation.value, [0, 1], [0, -50], {
      extrapolateRight: Extrapolate.CLAMP,
    });
    const borderRadius = interpolate(scaleAnimation.value, [0, 1], [0, 30], {
      extrapolateRight: Extrapolate.CLAMP,
    });
    return {
      transform: [{ scale }, { translateY }],
      borderRadius,
    };
  });
  React.useEffect(() => {
    if (isDrawerOpen === 'open') {
      scaleAnimation.value = withTiming(1, { duration: 500 });
    } else {
      scaleAnimation.value = withTiming(0, { duration: 500 });
    }
  }, [isDrawerOpen]);

  return (
    <Animated.View
      style={[
        {
          flex: 1,
          elevation: 0,
          overflow: 'hidden',
          backgroundColor: '#f2f2f2',
        },
        animatedStyle,
      ]}
    >
      <Button onPress={() => navigation.toggleDrawer()} title='alem' />
    </Animated.View>
  );
}

How Can I animate Scale, translateY, and borderRadius at the same time?

Packages I'm using:

"react-native-reanimated": "^2.4.1", "@react-navigation/drawer": "^6.3.1", "@react-navigation/native": "^6.0.8",

Answer 1

Try this

    import { useDrawerProgress } from '@react-navigation/drawer';

    const progress = useDrawerProgress();

    const animatedStyle = useAnimatedStyle(() => {
        const scale = interpolate(progress.value, [0, 1], [1, 0.8], {
            extrapolateRight: Extrapolate.CLAMP,
        });
        return {
            transform: [{ scale }],
        };
    }, []);