react-native-toast-message 2.3.1 → 2.3.2

package/lib/src/Toast.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { LoggerProvider } from './contexts';
+import { LoggerProvider, GestureProvider } from './contexts';
 import { ToastUI } from './ToastUI';
 import { useToast } from './useToast';
 const ToastRoot = React.forwardRef((props, ref) => {
@@ -53,7 +53,9 @@ export function Toast(props) {
         }
     }, []);
     return (<LoggerProvider enableLogs={false}>
-      <ToastRoot ref={setRef} {...props}/>
+      <GestureProvider>
+        <ToastRoot ref={setRef} {...props}/>
+      </GestureProvider>
     </LoggerProvider>);
 }
 /**

package/lib/src/components/AnimatedContainer.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Animated, Dimensions } from 'react-native';
-import { useLogger } from '../contexts';
+import { useLogger, useGesture } from '../contexts';
 import { usePanResponder, useSlideAnimation, useViewDimensions } from '../hooks';
 import { noop } from '../utils/func';
 import { bound } from '../utils/number';
@@ -39,6 +39,7 @@ export function animatedValueFor(gesture, position, damping) {
 }
 export function AnimatedContainer({ children, isVisible, position, topOffset, bottomOffset, keyboardOffset, avoidKeyboard, onHide, onRestorePosition = noop, swipeable }) {
     const { log } = useLogger();
+    const { panning } = useGesture();
     const { computeViewDimensions, height } = useViewDimensions();
     const { animatedValue, animate, animationStyles } = useSlideAnimation({
         position,
@@ -48,6 +49,15 @@ export function AnimatedContainer({ children, isVisible, position, topOffset, bo
         keyboardOffset,
         avoidKeyboard
     });
+    const disable = !swipeable || !isVisible;
+    const onStart = React.useCallback(() => {
+        log('Swipe, pan start');
+        panning.current = true;
+    }, [log, panning]);
+    const onEnd = React.useCallback(() => {
+        log('Swipe, pan end');
+        panning.current = false;
+    }, [log, panning]);
     const onDismiss = React.useCallback(() => {
         log('Swipe, dismissing');
         animate(0);
@@ -68,7 +78,9 @@ export function AnimatedContainer({ children, isVisible, position, topOffset, bo
         computeNewAnimatedValueForGesture,
         onDismiss,
         onRestore,
-        disable: !swipeable
+        onStart,
+        onEnd,
+        disable,
     });
     React.useLayoutEffect(() => {
         const newAnimationValue = isVisible ? 1 : 0;
@@ -77,7 +89,7 @@ export function AnimatedContainer({ children, isVisible, position, topOffset, bo
     return (<Animated.View testID={getTestId('AnimatedContainer')} onLayout={computeViewDimensions} style={[styles.base, styles[position], animationStyles]} 
     // This container View is never the target of touch events but its subviews can be.
     // By doing this, tapping buttons behind the Toast is allowed
-    pointerEvents={isVisible ? 'box-none' : 'none'} {...panResponder.panHandlers}>
+    pointerEvents='box-none' {...panResponder.panHandlers}>
       {children}
     </Animated.View>);
 }

package/lib/src/contexts/GestureContext.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import { ReactChildren } from '../types';
+export declare type GestureContextType = {
+    panning: React.MutableRefObject<boolean>;
+};
+export declare type GestureProviderProps = {
+    children: ReactChildren;
+    panning?: boolean;
+};
+declare function GestureProvider({ children, panning }: GestureProviderProps): JSX.Element;
+declare function useGesture(): GestureContextType;
+export { GestureProvider, useGesture };

package/lib/src/contexts/GestureContext.js

@@ -0,0 +1,14 @@
+import React from 'react';
+const GestureContext = React.createContext({
+    panning: { current: false }
+});
+function GestureProvider({ children, panning = false }) {
+    const panningRef = React.useRef(panning);
+    const value = { panning: panningRef };
+    return (<GestureContext.Provider value={value}>{children}</GestureContext.Provider>);
+}
+function useGesture() {
+    const ctx = React.useContext(GestureContext);
+    return ctx;
+}
+export { GestureProvider, useGesture };

package/lib/src/contexts/index.d.ts

@@ -1 +1,2 @@
 export * from './LoggerContext';
+export * from './GestureContext';

package/lib/src/contexts/index.js

@@ -1 +1,2 @@
 export * from './LoggerContext';
+export * from './GestureContext';

package/lib/src/hooks/usePanResponder.d.ts

@@ -1,16 +1,20 @@
 import { RefObject } from 'react';
 import { Animated, GestureResponderEvent, PanResponderGestureState } from 'react-native';
-export declare function shouldSetPanResponder(_event: GestureResponderEvent, gesture: PanResponderGestureState): boolean;
+export declare function startShouldSetPanResponder(): boolean;
+export declare function moveShouldSetPanResponder(_event: GestureResponderEvent, gesture: PanResponderGestureState): boolean;
 export declare function shouldDismissView(newAnimatedValue: number, gesture: PanResponderGestureState): boolean;
 export declare type UsePanResponderParams = {
     animatedValue: RefObject<Animated.Value>;
     computeNewAnimatedValueForGesture: (gesture: PanResponderGestureState) => number;
     onDismiss: () => void;
     onRestore: () => void;
+    onStart: () => void;
+    onEnd: () => void;
     disable?: boolean;
 };
-export declare function usePanResponder({ animatedValue, computeNewAnimatedValueForGesture, onDismiss, onRestore, disable }: UsePanResponderParams): {
+export declare function usePanResponder({ animatedValue, computeNewAnimatedValueForGesture, onDismiss, onRestore, onStart, onEnd, disable }: UsePanResponderParams): {
     panResponder: import("react-native").PanResponderInstance;
+    onGrant: () => void;
     onMove: (_event: GestureResponderEvent, gesture: PanResponderGestureState) => void;
     onRelease: (_event: GestureResponderEvent, gesture: PanResponderGestureState) => void;
 };

package/lib/src/hooks/usePanResponder.js

@@ -1,6 +1,9 @@
 import React from 'react';
 import { PanResponder } from 'react-native';
-export function shouldSetPanResponder(_event, gesture) {
+export function startShouldSetPanResponder() {
+    return true;
+}
+export function moveShouldSetPanResponder(_event, gesture) {
     const { dx, dy } = gesture;
     // Fixes onPress handler
     // https://github.com/calintamas/react-native-toast-message/issues/113
@@ -13,35 +16,42 @@ export function shouldDismissView(newAnimatedValue, gesture) {
     return (newAnimatedValue <= dismissThreshold ||
         (Math.abs(vy) >= dismissThreshold && dy < 0));
 }
-export function usePanResponder({ animatedValue, computeNewAnimatedValueForGesture, onDismiss, onRestore, disable }) {
+export function usePanResponder({ animatedValue, computeNewAnimatedValueForGesture, onDismiss, onRestore, onStart, onEnd, disable }) {
+    const onGrant = React.useCallback(() => {
+        if (disable)
+            return;
+        onStart();
+    }, [onStart, disable]);
     const onMove = React.useCallback((_event, gesture) => {
-        if (disable) {
+        if (disable)
             return;
-        }
         const newAnimatedValue = computeNewAnimatedValueForGesture(gesture);
         animatedValue.current?.setValue(newAnimatedValue);
     }, [animatedValue, computeNewAnimatedValueForGesture, disable]);
     const onRelease = React.useCallback((_event, gesture) => {
-        if (disable) {
+        if (disable)
             return;
-        }
         const newAnimatedValue = computeNewAnimatedValueForGesture(gesture);
+        onEnd();
         if (shouldDismissView(newAnimatedValue, gesture)) {
             onDismiss();
         }
         else {
             onRestore();
         }
-    }, [computeNewAnimatedValueForGesture, onDismiss, onRestore, disable]);
+    }, [computeNewAnimatedValueForGesture, onEnd, onDismiss, onRestore, disable]);
     const panResponder = React.useMemo(() => PanResponder.create({
-        onMoveShouldSetPanResponder: shouldSetPanResponder,
-        onMoveShouldSetPanResponderCapture: shouldSetPanResponder,
+        onStartShouldSetPanResponder: startShouldSetPanResponder,
+        onPanResponderGrant: onGrant,
+        onMoveShouldSetPanResponder: moveShouldSetPanResponder,
+        onMoveShouldSetPanResponderCapture: moveShouldSetPanResponder,
         onPanResponderMove: onMove,
         onPanResponderRelease: onRelease
-    }), [onMove, onRelease]);
+    }), [onMove, onRelease, onGrant]);
     return {
         panResponder,
+        onGrant,
         onMove,
-        onRelease
+        onRelease,
     };
 }

package/lib/src/useToast.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { useLogger } from './contexts';
+import { useLogger, useGesture } from './contexts';
 import { useTimeout } from './hooks';
 import { noop } from './utils/func';
 import { mergeIfDefined } from './utils/obj';
@@ -26,15 +26,21 @@ export const DEFAULT_OPTIONS = {
 };
 export function useToast({ defaultOptions }) {
     const { log } = useLogger();
+    const { panning } = useGesture();
     const [isVisible, setIsVisible] = React.useState(false);
     const [data, setData] = React.useState(DEFAULT_DATA);
     const initialOptions = mergeIfDefined(DEFAULT_OPTIONS, defaultOptions);
     const [options, setOptions] = React.useState(initialOptions);
     const onAutoHide = React.useCallback(() => {
-        log('Auto hiding');
-        setIsVisible(false);
-        options.onHide();
-    }, [log, options]);
+        if (panning.current) {
+            log('Auto hiding was blocked due to panning');
+        }
+        else {
+            log('Auto hiding');
+            setIsVisible(false);
+            options.onHide();
+        }
+    }, [log, options, panning]);
     const { startTimer, clearTimer } = useTimeout(onAutoHide, options.visibilityTime);
     const hide = React.useCallback(() => {
         log('Hiding');

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-toast-message",
-  "version": "2.3.1",
+  "version": "2.3.2",
   "description": "Toast message component for React Native",
   "main": "./lib/index.js",
   "types": "./lib/index.d.ts",