React-Native-modal-dimmed-Area

gistfile1.tsx

import React, {useEffect} from 'react';
import Animated, {
  Easing,
  useAnimatedStyle,
  useSharedValue,
  withTiming,
} from 'react-native-reanimated';

type ModalPropType = {
  showModal: boolean;
};

export function Modal({showModal}: ModalPropType) {
  const backgroundColor = useSharedValue(0);

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

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

      return;
    }
  }, [showModal, backgroundColor]);

  return (
    <>
      {showModal ? (
        <>
          <Animated.View style={backdropAnimatedStyle} />
        </>
      ) : (
        <></>
      )}
    </>
  );
}