import React, { useState, useEffect } from 'react' import { Animated, TouchableWithoutFeedback, View, Dimensions } from 'react-native' import { PanGestureHandler, State } from 'react-native-gesture-handler' import { BottomPopUpProps } from './types' import { Container, Body, Point } from './styles' const BottomPopUp: React.FC = ({ onDismiss, maxHeight, minHeight, children, visible }) => { const [size, setSize] = useState(300) const translate = new Animated.Value(0) const opacity = new Animated.Value(1) const gestureEvent = Animated.event( [{ nativeEvent: { translationY: translate } }], { useNativeDriver: true } ) const hide = () => { Animated.sequence([ Animated.timing( translate, { toValue: size, duration: 150, useNativeDriver: true } ), Animated.timing( opacity, { toValue: 0, duration: 100, useNativeDriver: true } ) ]).start(() => { onDismiss() }) } if (!visible) return null return ( hide()} > { if (nativeEvent.oldState === State.ACTIVE) { const { translationY } = nativeEvent if (translationY >= 100) { hide() } else { Animated.timing( translate, { toValue: 0, duration: 100, useNativeDriver: true } ).start() } } }} > { const { nativeEvent: { layout: { height } } } = props setSize(height) }} > {children} ) } export default BottomPopUp