How to make slide down animation using reanimated?

[xts-bit]

How to make slide-down animation using reanimated? How to give this animation to my Model? Like Instagram comments when you close it it closes like slide-down, How can i do that with my code like when a user user the area around Drag me text and drag down it close the model with.a slide-down animation?

import React, { useState } from 'react';
import { View, Text, StyleSheet, TouchableOpacity } from 'react-native';
import Animated, { useSharedValue, withSpring, useAnimatedStyle, interpolate } from 'react-native-reanimated';

const SPRING_CONFIG = {
  stiffness: 200,
  damping: 10,
};

export function Model({ translateY }) {
  const animatedStyle = useAnimatedStyle(() => {
    const translateYInterpolated = interpolate(translateY.value, [0, 400], [0, 400]);
    return {
      transform: [{ translateY: translateYInterpolated }],
    };
  });

  return (
    <Animated.View style={[styles.modelContainer, animatedStyle]}>
      <Text style={{ color: 'white', textAlign: 'center' }}>Drag Me</Text>
    </Animated.View>
  );
}

const styles = StyleSheet.create({
  modelContainer: {
    backgroundColor: 'black',
    height: 400,
    width: 400,
    position: 'absolute',
    bottom: 0,
    left: 0,
    right: 0,
  },
});

const App = () => {
  const translateY = useSharedValue(400);
  const [isVisible, setIsVisible] = useState(false);

  const toggleModel = () => {
    if (isVisible) {
      translateY.value = withSpring(400, SPRING_CONFIG);
    } else {
      translateY.value = withSpring(0, SPRING_CONFIG);
    }
    setIsVisible(!isVisible);
  };

  return (
    <View style={{ flex: 1, alignItems: 'center' }}>
      <TouchableOpacity onPress={toggleModel}>
        <View style={{ marginTop: 200 }}>
          <Text>Show/Hide Model</Text>
        </View>
      </TouchableOpacity>
      {isVisible &&
        <View style={{ flex: 1, right: '50%', height: '80%', backgroundColor: 'red' }}>
          <Model translateY={translateY} />
        </View>
      }
    </View>
  );
};

export default App;

[xts-bit]

@m-bert Can you please help :)

[m-bert]

Hi @xts-bit! Why don't you use layout animations? I believe it will be much easier than using useAnimatedStyle. Also to hide your Model on drag you will need to use gesture handler. Here is how I would do it:

import React, { useState } from 'react';
import { View, Text, StyleSheet, TouchableOpacity } from 'react-native';
import { Gesture, GestureDetector } from 'react-native-gesture-handler';
import Animated, { BounceInDown, SlideOutDown } from 'react-native-reanimated';

export function Model({ closingFn }) {
  const pan = Gesture.Pan()
    .onChange((e) => {
      closingFn();
    })
    .activeOffsetY(40)
    .runOnJS(true);
  return (
    <Animated.View
      style={styles.modelContainer}
      entering={BounceInDown.springify().stiffness(200).damping(10)}
      exiting={SlideOutDown}>
      <GestureDetector gesture={pan}>
        <Text style={{ color: 'white', textAlign: 'center' }}>Drag Me</Text>
      </GestureDetector>
    </Animated.View>
  );
}

const styles = StyleSheet.create({
  modelContainer: {
    backgroundColor: 'black',
    height: 400,
    width: 400,
    position: 'absolute',
    bottom: 0,
    left: 0,
    right: 0,
  },
});

const App = () => {
  const [isVisible, setIsVisible] = useState(false);

  const toggleModel = () => {
    setIsVisible(!isVisible);
  };

  return (
    <View style={{ flex: 1, alignItems: 'center' }}>
      <TouchableOpacity onPress={toggleModel}>
        <View style={{ marginTop: 200 }}>
          <Text>Show/Hide Model</Text>
        </View>
      </TouchableOpacity>
      {isVisible && (
        <View
          style={{
            flex: 1,
            right: '50%',
            height: '80%',
            backgroundColor: 'red',
          }}>
          <Model closingFn={() => setIsVisible(false)} />
        </View>
      )}
    </View>
  );
};

export default App;