기본적인 모달

<Modal visible={isVisible} transparent={true} onRequestClose={onClose}>
  <Pressable onPress={onClose} style={{flex: 1}}>
    <View style={styles.modalOverlay}>
      {/* 모달의 콘텐츠 부분 */}
      <View onStartShouldSetResponder={() => true} style={styles.modalView}>
        <GoogleSigninButton onPress={onPressGoogleBtn} />
      </View>
    </View>
  </Pressable>
</Modal>

// style
  modalOverlay: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: 'rgba(0, 0, 0, 0.6)', // 반투명 배경
  },
  modalView: {
    position: 'absolute',
    justifyContent: 'center',
    alignItems: 'center',
    width: '80%', // 모달의 폭
    height: 'auto', // 모달의 높이
    backgroundColor: colors.mainContainerColor,
    padding: 20,
    borderRadius: 10,
    shadowColor: '#000',
    shadowOffset: {width: 0, height: 2},
    shadowOpacity: 0.25,
    shadowRadius: 4,
    elevation: 5,
  },

 

onStartShouldSetResponder={() => true}
// 모달의 콘텐츠쪽을 눌러도 Pressable의 onClose가 클릭 안되도록

 

 

모달 애니메이션 바꾼 예제

useEffect(() => {
  if (isVisible) {
    // 모달을 보여줄 때 애니메이션
    Animated.timing(animationValue, {
      toValue: 0,
      duration: 300,
      useNativeDriver: true,
    }).start();
  } else {
    // 모달을 숨길 때 애니메이션
    Animated.timing(animationValue, {
      toValue: -windowHeight,
      duration: 300,
      useNativeDriver: true,
    }).start();
  }
}, [isVisible, animationValue, windowHeight]);

const modalStyle = {
  transform: [{translateX: animationValue}],
};



<Modal
  visible={isVisible}
  transparent={true}
  animationType="none" // 기본 애니메이션 사용 안함
  onRequestClose={onClose}>
  <Pressable onPress={onClose} style={{flex: 1}}>
    <Animated.View style={[styles.modalOverlay, modalStyle]}>
      {/* 모달의 콘텐츠 부분 */}
      <View
        onStartShouldSetResponder={() => true}
        style={styles.modalView}>
        <Pressable
          style={{
            flexDirection: 'row',
            alignItems: 'center',
          }}
          onPress={() => setIsVisibleGoogleDriveModal(true)}>
          <MaterialCommunityIcons
            name="cloud-sync"
            size={30}
            style={{marginRight: margin.defaultMargin}}
            color={colors.defaultIconrColor}
          />
          <CustomText text={'백업과 복구'} />
        </Pressable>
      </View>
    </Animated.View>
  </Pressable>
</Modal>