diff --git a/app/screens/snack_bar/index.tsx b/app/screens/snack_bar/index.tsx index 3746c64ec6..16a1348ef7 100644 --- a/app/screens/snack_bar/index.tsx +++ b/app/screens/snack_bar/index.tsx @@ -52,6 +52,7 @@ const SnackBar = ({barType, componentId, onUndoPress, sourceScreen}: SnackBarPro const isTablet = useIsTablet(); const {width: windowWidth} = useWindowDimensions(); const offset = useSharedValue(0); + const isPanned = useSharedValue(false); const baseTimer = useRef(); const dismissTimer = useRef(); @@ -109,11 +110,13 @@ const SnackBar = ({barType, componentId, onUndoPress, sourceScreen}: SnackBarPro }, [theme, barType]); const animatedMotion = useAnimatedStyle(() => { + const transform = [ + {translateY: offset.value}, + {scale: interpolate(offset.value, [0, 100], [1, 0], Extrapolation.EXTEND)}, + ]; + return { - transform: [ - {translateY: offset.value}, - {scale: interpolate(offset.value, [0, 100], [1, 0], Extrapolation.EXTEND)}, - ], + ...(isPanned.value && transform), opacity: interpolate(offset.value, [0, 100], [1, 0], Extrapolation.EXTEND), }; }, [offset.value]); @@ -137,6 +140,7 @@ const SnackBar = ({barType, componentId, onUndoPress, sourceScreen}: SnackBarPro activeOffsetY(20). onStart(() => { offset.value = withTiming(100, {duration: 200}); + isPanned.value = true; // animated just started, we'll stop the timer runOnJS(stopTimers)(); @@ -158,7 +162,6 @@ const SnackBar = ({barType, componentId, onUndoPress, sourceScreen}: SnackBarPro setShowSnackBar(true); baseTimer.current = setTimeout(() => { animateHiding(false); - console.log('>>> called from base timer in use effect'); }, 3000); return () => { if (baseTimer.current) {