function component swip down to close is not work please help bro...

[pareshchavda]

MY CODE 👍🏻

`import React, {useState, useEffect, useRef} from 'react'; import { View, Text, StyleSheet, Dimensions, Animated, PanResponder, ScrollView, Image, Slider, } from 'react-native';

const {width, height} = Dimensions.get('window'); import Icon from 'react-native-vector-icons/Ionicons'; const App = (props) => { const [isScrollEnabled, setIsScrollEnabled] = useState(false); const animation = new Animated.ValueXY({x: 0, y: height - 90});

const scrollOffset = 0;

const pan = useRef( PanResponder.create({ onMoveShouldSetPanResponder: (evt, gestureState) => { if ( (isScrollEnabled && scrollOffset <= 0 && gestureState.dy > 0) || (!isScrollEnabled && gestureState.dy < 0) ) { return true; } else { return false; } },

  onPanResponderGrant: (evt, gestureState) => {
    animation.extractOffset();
  },
  onPanResponderMove: (evt, gestureState) => {
    animation.setValue({x: 0, y: gestureState.dy});
  },
  onPanResponderRelease: (evt, gestureState) => {
    if (gestureState.moveY > height - 120) {
      Animated.spring(animation.y, {
        toValue: 0,
        tension: 1,
        useNativeDriver: false,
      }).start();
    } else if (gestureState.moveY < 120) {
      Animated.spring(animation.y, {
        toValue: 0,
        tension: 1,
        useNativeDriver: false,
      }).start();
    } else if (gestureState.dy < 0) {
      setIsScrollEnabled(false);

      Animated.spring(animation.y, {
        toValue: -height + 120,
        tension: 1,
        useNativeDriver: false,
      }).start();
    } else if (gestureState.dy > 0) {
      setIsScrollEnabled(false);
      Animated.spring(animation.y, {
        toValue: height - 120,
        tension: 1,
        useNativeDriver: false,
      }).start();
    }
  },
}),

).current;

const [panResponder, setPanResponder] = useState(pan); useEffect(() => { setPanResponder(pan); }, []);

const animatedHeight = { transform: animation.getTranslateTransform(), };

const animatedImageHeight = animation.y.interpolate({ inputRange: [0, height - 90], outputRange: [200, 32], extrapolate: 'clamp', });

const animatedSongTitleOpacity = animation.y.interpolate({ inputRange: [0, height - 500, height - 90], outputRange: [0, 0, 1], extrapolate: 'clamp', });

const animatedImageMarginLeft = animation.y.interpolate({ inputRange: [0, height - 90], outputRange: [width / 2 - 100, 10], extrapolate: 'clamp', }); const animatedSongDetailsOpacity = animation.y.interpolate({ inputRange: [0, height - 500, height - 90], outputRange: [1, 0, 0], extrapolate: 'clamp', }); const animatedHeaderHeight = animation.y.interpolate({ inputRange: [0, height - 90], outputRange: [height / 2, 90], extrapolate: 'clamp', }); const animatedBackgroundColor = animation.y.interpolate({ inputRange: [0, height - height], outputRange: ['red', 'pink'], extrapolate: 'extend', });

return ( <Animated.View style={{flex: 1, backgroundColor: animatedBackgroundColor}}> <Animated.View {...panResponder.panHandlers} style={[ animatedHeight, { position: 'absolute', left: 0, right: 0, zIndex: 10, backgroundColor: '#d3d3', height: height, }, ]}> <ScrollView scrollEnabled={isScrollEnabled} scrollEventThrottle={16} onScroll={(event) => { scrollOffset = event.nativeEvent.contentOffset.y; }}> <Animated.View style={{ height: animatedHeaderHeight, borderTopWidth: 1, borderTopColor: '#ebe5e5', flexDirection: 'row', alignItems: 'center', }}> <View style={{flex: 4, flexDirection: 'row', alignItems: 'center'}}> <Animated.View style={{ height: animatedImageHeight, width: animatedImageHeight, marginLeft: animatedImageMarginLeft, }}> <Image style={{flex: 1, width: null, height: null}} source={{ uri: 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTfCrFGpWG5cxEH5GpVjNU8wFutQebq-sn1ww&usqp=CAU', }} /> </Animated.View> <Animated.Text style={{ opacity: animatedSongTitleOpacity, fontSize: 18, paddingLeft: 10, }}> Music Player Is (On) </Animated.Text> </View> <Animated.View style={{ opacity: animatedSongTitleOpacity, flex: 1, flexDirection: 'row', justifyContent: 'space-around', }}> <Icon name="md-pause" size={32} /> <Icon name="md-play" size={32} /> </Animated.View> </Animated.View>

      <Animated.View
        style={{
          height: animatedHeaderHeight,
          opacity: animatedSongDetailsOpacity,
        }}>
        <View
          style={{
            flex: 1,
            alignItems: 'center',
            justifyContent: 'flex-end',
          }}>
          <Text style={{fontWeight: 'bold', fontSize: 22}}>
            Music Player Is (On)
          </Text>
          <Text style={{fontSize: 18, color: '#fa95ed'}}>
            despacito despacito
          </Text>
        </View>

        <View style={{height: 40, width: width, alignItems: 'center'}}>
          <Slider
            style={{width: 300}}
            step={1}
            minimumValue={18}
            maximumValue={71}
            value={18}
          />
        </View>
        <View
          style={{
            flex: 2,
            flexDirection: 'row',
            alignItems: 'center',
            justifyContent: 'space-around',
          }}>
          <Icon name="md-rewind" size={40} />
          <Icon name="md-pause" size={50} />
          <Icon name="md-fastforward" size={40} />
        </View>
      </Animated.View>
    </ScrollView>
  </Animated.View>
</Animated.View>

); }; export default App;`