From 095a1fda259bdbaba13a06efc12aabfcd1de375f Mon Sep 17 00:00:00 2001
From: Jakub Grzywacz <kontakt@jakubgrzywacz.pl>
Date: Sat, 10 Jul 2021 15:55:01 +0200
Subject: [PATCH] refactor: close animation

---
 src/components/ModalWithBackdrop.tsx | 15 +++++++++++----
 1 file changed, 11 insertions(+), 4 deletions(-)

diff --git a/src/components/ModalWithBackdrop.tsx b/src/components/ModalWithBackdrop.tsx
index 1951282..dd531da 100644
--- a/src/components/ModalWithBackdrop.tsx
+++ b/src/components/ModalWithBackdrop.tsx
@@ -23,24 +23,31 @@ export const ModalWithBackdrop = ({
   children,
 }: ModalWithBackdropProps) => {
   const { height: screenHeight } = useWindowDimensions();
-  const translateY = React.useRef(new Animated.Value(0)).current;
+  const translateY = React.useRef(new Animated.Value(screenHeight)).current;
   const ctx = React.useContext(KeyboardContext);
 
   React.useEffect(() => {
-    Animated.timing(translateY, {
+    Animated.spring(translateY, {
       toValue: isOpen ? 0 : screenHeight,
       useNativeDriver: true,
-      duration: 500,
     }).start();
   }, [isOpen, screenHeight, translateY]);
 
+  const handleClose = () => {
+    Animated.spring(translateY, {
+      toValue: screenHeight,
+      useNativeDriver: true,
+    }).start();
+    setTimeout(() => backdropPress(), 200);
+  };
+
   return (
     <Modal visible={isOpen} animationType="fade" transparent={true}>
       <GestureHandlerRootView style={styles.modalContainer}>
         <TouchableOpacity
           style={styles.modalContainer}
           activeOpacity={1}
-          onPress={backdropPress}
+          onPress={handleClose}
         >
           <View
             style={[