React-native Drag the edge of the element to change height - react-native

Question

In my application I have a box that I want to change its height using the GestureHandler. I kind of got the idea but now I can't figure out how I can change the height from bottom to top. I will attach pictures.
My code so far -
import { StyleSheet } from "react-native";
import { PanGestureHandler } from "react-native-gesture-handler";
import Animated, {
useAnimatedGestureHandler,
useAnimatedStyle,
useSharedValue,
withSpring,
} from "react-native-reanimated";
export default function App() {
const translateY = useSharedValue(44);
const gestureHandler = useAnimatedGestureHandler({
onStart: (event, context) => {
context.translateY = translateY.value;
},
onActive: (event, context) => {
translateY.value = event.translationY + context.translateY;
if (translateY.value > 200) {
translateY.value = 200;
}
},
onEnd: (_) => {
if (translateY.value == 200) {
translateY.value = withSpring(50);
}
},
});
const animatedStyle = useAnimatedStyle(() => {
return {
height: translateY.value,
};
});
return (
<PanGestureHandler onGestureEvent={gestureHandler}>
<Animated.View style={[styles.box, animatedStyle]} />
</PanGestureHandler>
);
}
const styles = StyleSheet.create({
box: {
width: 65,
backgroundColor: "black",
alignSelf: "center",
marginTop: 350,
},
});
Final result looks like that -
The movement I want is exactly the opposite
How can i do that?

Answer 1

You're close - you need to translate the Y position of the box in addition to increasing the height. You can change your animated style to:
const animatedStyle = useAnimatedStyle(() => {
return {
height: translateY.value,
translate: [{ translateY: -translateY.value }]
};
});