Feat/new pan view improve animations

generatedTypes/src/incubator/TransitionView/index.d.ts

@@ -1,7 +1,7 @@
 import React, { PropsWithChildren } from 'react';
 import { ViewProps } from '../../components/view';
 import { ForwardRefInjectedProps } from '../../commons/new';
-import { Direction } from './useHiddenLocation';
+import { Direction } from '../hooks/useHiddenLocation';
 import { TransitionViewAnimationType } from './useAnimationEndNotifier';
 import { AnimatedTransitionProps } from './useAnimatedTransition';
 export { Direction, TransitionViewAnimationType };

generatedTypes/src/incubator/TransitionView/useAnimatedTransition.d.ts

@@ -1,4 +1,4 @@
-import { Direction, HiddenLocation } from './useHiddenLocation';
+import { Direction, HiddenLocation } from '../hooks/useHiddenLocation';
 import { AnimationNotifierEndProps } from './useAnimationEndNotifier';
 export interface AnimatedTransitionProps extends AnimationNotifierEndProps {
     /**

generatedTypes/src/incubator/TransitionView/useAnimatedTranslator.d.ts

@@ -1,4 +1,4 @@
-import { Direction } from './useHiddenLocation';
+import { Direction } from '../hooks/useHiddenLocation';
 export interface TranslatorProps {
     initialVisibility: boolean;
 }

src/incubator/TransitionView/index.tsx

@@ -3,7 +3,7 @@ import {View as RNView, LayoutChangeEvent} from 'react-native';
 import Animated from 'react-native-reanimated';
 import View, {ViewProps} from '../../components/view';
 import {forwardRef, ForwardRefInjectedProps} from '../../commons/new';
-import useHiddenLocation, {Direction} from './useHiddenLocation';
+import useHiddenLocation, {Direction} from '../hooks/useHiddenLocation';
 import {TransitionViewAnimationType} from './useAnimationEndNotifier';
 import useAnimatedTransition, {AnimatedTransitionProps} from './useAnimatedTransition';
 const AnimatedView = Animated.createAnimatedComponent(View);

src/incubator/TransitionView/useAnimatedTransition.ts

@@ -1,6 +1,6 @@
 /* eslint-disable react-hooks/exhaustive-deps */
 import {useEffect, useCallback} from 'react';
-import {Direction, HiddenLocation} from './useHiddenLocation';
+import {Direction, HiddenLocation} from '../hooks/useHiddenLocation';
 import useAnimatedTranslator from './useAnimatedTranslator';
 import useAnimationEndNotifier, {AnimationNotifierEndProps} from './useAnimationEndNotifier';
 

src/incubator/TransitionView/useAnimatedTranslator.ts

@@ -1,6 +1,6 @@
 import {useCallback} from 'react';
 import {useSharedValue, useAnimatedStyle, withSpring, withTiming} from 'react-native-reanimated';
-import {Direction} from './useHiddenLocation';
+import {Direction} from '../hooks/useHiddenLocation';
 
 export interface TranslatorProps {
   initialVisibility: boolean;

src/incubator/panView/index.tsx

@@ -1,16 +1,16 @@
 import {isEmpty} from 'lodash';
 import React, {useCallback} from 'react';
-import {StyleProp, ViewStyle} from 'react-native';
+import {StyleProp, View as RNView, ViewStyle} from 'react-native';
 import {PanGestureHandler, PanGestureHandlerEventPayload} from 'react-native-gesture-handler';
 import Animated, {
   useSharedValue,
   useAnimatedStyle,
   withSpring,
+  withTiming,
   useAnimatedGestureHandler,
   runOnJS
 } from 'react-native-reanimated';
 import {asBaseComponent} from '../../commons/new';
-import {Constants} from '../../helpers';
 import View, {ViewProps} from '../../components/view';
 import {
   PanViewDirections,
@@ -20,6 +20,7 @@ import {
   getDismissVelocity,
   DEFAULT_THRESHOLD
 } from './panningUtil';
+import useHiddenLocation from '../hooks/useHiddenLocation';
 export {PanViewDirections, PanViewDismissThreshold};
 
 export interface PanViewProps extends ViewProps {
@@ -64,7 +65,7 @@ const PanView = (props: Props) => {
   const {
     directions = [PanViewDirections.UP, PanViewDirections.DOWN, PanViewDirections.LEFT, PanViewDirections.RIGHT],
     dismissible,
-    springBack,
+    springBack: propsSpringBack,
     onDismiss,
     directionLock,
     threshold,
@@ -82,6 +83,9 @@ const PanView = (props: Props) => {
     };
   }, []);
 
+  const containerRef = React.createRef<RNView>();
+  const {onLayout, hiddenLocation} = useHiddenLocation({containerRef});
+
   const getTranslationOptions = () => {
     'worklet';
     return {
@@ -105,27 +109,17 @@ const PanView = (props: Props) => {
       runOnJS(onDismiss)();
     }
   },
+  // eslint-disable-next-line react-hooks/exhaustive-deps
   [onDismiss]);
 
-  const shouldDismissX = useCallback((isFinished: boolean) => {
-    'worklet';
-    dismiss(isFinished);
-  },
-  [dismiss]);
-
-  const shouldDismissY = useCallback((isFinished: boolean) => {
+  const springBack = useCallback(() => {
     'worklet';
-    dismiss(isFinished);
-  },
-  [dismiss]);
-
-  const springBackIfNeeded = useCallback(() => {
-    'worklet';
-    if (springBack) {
+    if (propsSpringBack) {
       translationX.value = withSpring(0, SPRING_BACK_ANIMATION_CONFIG);
       translationY.value = withSpring(0, SPRING_BACK_ANIMATION_CONFIG);
     }
-  }, [springBack]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [propsSpringBack]);
 
   const onGestureEvent = useAnimatedGestureHandler({
     onStart: (_event: PanGestureHandlerEventPayload, context: {initialTranslation: Frame}) => {
@@ -139,28 +133,30 @@ const PanView = (props: Props) => {
         const velocity = getDismissVelocity(event, directions, getTranslationOptions(), threshold);
         if (velocity) {
           waitingForDismiss.value = true;
-          if (velocity.x !== 0) {
-            const toX = Math.sign(translationX.value) * (Math.abs(translationX.value) + Constants.screenWidth);
-            translationX.value = withSpring(toX, {velocity: velocity.x, damping: 50}, shouldDismissX);
+          if (translationX.value !== 0 && velocity.x !== undefined && velocity.x !== 0) {
+            const toX = velocity.x > 0 ? hiddenLocation.right : hiddenLocation.left;
+            const duration = Math.abs((toX - translationX.value) / velocity.x) * 1000;
+            translationX.value = withTiming(toX, {duration}, dismiss);
           }
-          if (velocity.y !== 0) {
-            const toY = Math.sign(translationY.value) * (Math.abs(translationY.value) + Constants.screenHeight);
-            translationY.value = withSpring(toY, {velocity: velocity.y, damping: 50}, shouldDismissY);
+
+          if (translationY.value !== 0 && velocity.y !== undefined && velocity.y !== 0) {
+            const toY = velocity.y > 0 ? hiddenLocation.bottom : hiddenLocation.top;
+            const duration = Math.abs((toY - translationY.value) / velocity.y) * 1000;
+            translationY.value = withTiming(toY, {duration}, dismiss);
           }
         } else {
-          springBackIfNeeded();
+          springBack();
         }
       } else {
-        springBackIfNeeded();
+        springBack();
       }
     }
   },
-  [directions, dismissible, setTranslation, springBackIfNeeded]);
+  [directions, dismissible, setTranslation, springBack]);
 
   return (
     // TODO: delete comments once completed
-    // <View ref={containerRef} style={containerStyle} onLayout={onLayout}>
-    <View style={containerStyle}>
+    <RNView ref={containerRef} style={containerStyle} onLayout={onLayout}>
       <PanGestureHandler onGestureEvent={isEmpty(directions) ? undefined : onGestureEvent}>
         <Animated.View
           // !visible.current && styles.hidden is done to fix a bug is iOS
@@ -171,7 +167,7 @@ const PanView = (props: Props) => {
           <View {...others}>{children}</View>
         </Animated.View>
       </PanGestureHandler>
-    </View>
+    </RNView>
   );
 };