medium-reanimated-modal 3

reanimated_modal3.tsx

import React, {Dispatch, SetStateAction, useEffect} from 'react';
import {Pressable, Text, useWindowDimensions, View} from 'react-native';
import Animated, {
  Easing,
  useAnimatedStyle,
  useSharedValue,
  withSpring,
  withTiming,
} from 'react-native-reanimated';

type ModalPropType = {
  showModal: boolean;
  setShowModal: Dispatch<SetStateAction<boolean>>;
};

const MODAL_HEIGHT = 400;

export function Modal({showModal, setShowModal}: ModalPropType) {
  const backgroundColor = useSharedValue(0);
  const modalBottom = useSharedValue(0);
  const {height: screenHeight} = useWindowDimensions();

  const handleOnPress = () => {
    setShowModal(false);
  };

  const backdropAnimatedStyle = useAnimatedStyle(() => {
    return {
      position: 'absolute',
      top: 0,
      right: 0,
      bottom: 0,
      left: 0,
      justifyContent: 'center',
      alignItems: 'center',
      backgroundColor: '#00000099',
      opacity: backgroundColor.value,
      zIndex: 1,
    };
  });

  const modalAnimatedStyle = useAnimatedStyle(() => {
    return {
      position: 'absolute',
      alignSelf: 'center',
      bottom: modalBottom.value,
      zIndex: 2,
    };
  });

  useEffect(() => {
    if (showModal) {
      backgroundColor.value = withTiming(1, {
        duration: 250,
        easing: Easing.linear,
      });

      modalBottom.value = withSpring(screenHeight / 2 - MODAL_HEIGHT / 2, {
        damping: 80,
        overshootClamping: true,
        restDisplacementThreshold: 0.1,
        restSpeedThreshold: 0.1,
        stiffness: 500,
      });
    }
  }, [showModal, backgroundColor, modalBottom, screenHeight]);

  return (
    <>
      {showModal ? (
        <>
          <Animated.View style={backdropAnimatedStyle} />
          <Animated.View style={modalAnimatedStyle}>
            <View
              style={{
                justifyContent: 'space-between',
                width: 300,
                height: 400,
                backgroundColor: 'white',
                borderRadius: 12,
                padding: 24,
              }}>
              <View>
                <View
                  style={{
                    width: '100%',
                    height: 150,
                    borderRadius: 12,
                    marginBottom: 12,
                    backgroundColor: '#d1d9e6',
                  }}
                />
                <View
                  style={{
                    width: '100%',
                    height: 70,
                    borderRadius: 12,
                    marginBottom: 12,
                    backgroundColor: '#d1d9e6',
                  }}
                />
              </View>
              <Pressable
                onPress={handleOnPress}
                style={{
                  width: '60%',
                  height: 60,
                  alignSelf: 'center',
                  justifyContent: 'center',
                  alignItems: 'center',
                  borderRadius: 12,
                  backgroundColor: '#212120',
                }}>
                <Text
                  style={{
                    color: 'white',
                    fontWeight: '800',
                  }}>
                  Close modal
                </Text>
              </Pressable>
            </View>
          </Animated.View>
        </>
      ) : (
        <></>
      )}
    </>
  );
}