android back button 시 축소기능

src/components/Player.js

@@ -10,7 +10,8 @@ import {
   Platform,
   StatusBar,
   TouchableOpacity,
-  Share
+  Share,
+  BackHandler
 } from 'react-native';
 import Modal from 'react-native-modal';
 import { Slider, Icon } from 'react-native-elements';
@@ -157,6 +158,14 @@ const onShare = async () => {
   }
 };
 
+/**
+ *  애니메이션 offset 값 설정
+ */
+const animatedOffset = {y:0};
+const getAnimatedOffset = (v) => {
+  animatedOffset.y = v[0];
+}
+
 export default props => {
   const [modalVisible, setModalVisible] = useState(null);
   const { y: tabY } = props.tabPosition;
@@ -177,7 +186,8 @@ export default props => {
     mainPlayerContainerHeight,
     PlayerHeadWidth,
     PlayerHeadHeight,
-    PlayerHeadOpacity
+    PlayerHeadOpacity,
+    slideDown
   } = useMemo(() => {
 
     const translationY = new Value(0);
@@ -187,6 +197,7 @@ export default props => {
     const gestureState = new Value(State.UNDETERMINED);
     const clockY = new Clock();
     const finalTranslateY = add(translationY, multiply(0.2, velocityY));
+    const absoluteY = new Value(0);
     /**
      *  snapPoint 제스처가 끝날 때 위치 지정을 해주는 값
      *  TabBar 의 높이가 해상도와 스크린에서 그려지는 값이 틀려 TabBar 에서
@@ -201,6 +212,7 @@ export default props => {
     const ty = cond(
       and(eq(gestureState, State.END), neq(translationY, 0)),
       [
+        call([offsetY],getAnimatedOffset),
         set(
           translationY,
           runSpring(clockY, add(offsetY, translationY), snapPoint)
@@ -209,34 +221,36 @@ export default props => {
         translationY
       ],
       [
-        cond(eq(gestureState, State.BEGAN), stopClock(clockY)),
+        cond(eq(gestureState, State.BEGAN), 
+        [
+          stopClock(clockY),
+          cond(neq(offsetY2, 0), [
+            
+          ]),
+        ]),
         add(offsetY, translationY)
       ]
     );
 
     const translateY = add(ty, offsetY2);
-    // const onGestureEvent = event(
-    //   [
-    //     {
-    //       nativeEvent: {
-    //         translationY,
-    //         velocityY,
-    //         state: gestureState
-    //       }
-    //     }
-    //   ],
-    //   { useNativeDriver: true }
-    // );
+
+    const slideDown = () => timing(offsetY, {
+      toValue: destination,
+      duration: 500,
+      easing: Easing.inOut(Easing.ease),
+    }).start();
 
     return {
       translateY,
+      slideDown,
       onGestureEvent: event(
         [
           {
             nativeEvent: {
               translationY,
               velocityY,
-              state: gestureState
+              state: gestureState,
+              absoluteY
             }
           }
         ],
@@ -300,15 +314,25 @@ export default props => {
     };
   }, []);
 
+  /**
+   *  android backbutton handle
+   */
+  const backButtonHandler = () => {
+    if(~~animatedOffset.y < ~~destination) {
+      slideDown();
+    }
+    return true;
+  }
+
   useEffect(() => {
+    BackHandler.addEventListener('hardwareBackPress', backButtonHandler)
     playerDispatch({type:'currentTime', setCurrentTime: 0});
     return () => {
+      BackHandler.removeEventListener('hardwareBackPress', backButtonHandler)
       playerDispatch({type:'currentTime', setCurrentTime: 0});
     };
   },[playerData.soundURI]);
 
-  const slideUp = () => {};
-
   const player = useRef(null);
   
   const playerDispatch = useContext(PlayerDispatchContext);
@@ -320,7 +344,7 @@ export default props => {
     console.log(e);
   }
   const playerOnLoad = (data) => {
-    // console.log(data.duration)
+    //console.log(data)
     let duration=0;
     data.duration < 0 ? duration=1 : duration=data.duration
     playerDispatch({type:'paused', setPaused:false});
@@ -330,8 +354,8 @@ export default props => {
     // console.log(data.currentTime)
     playerDispatch({type:'currentTime', setCurrentTime: data.currentTime});
   }
-  const onLoadStart = () => {
-    // console.log('onload start');
+  const onLoadStart = (e) => {
+    //console.log('onload start',e);
     playerDispatch({type:'player', player: player});
   }
   const playerOnEnd = () => {