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

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 }]
    };
  });