react-native-toast-message 2.4.0 → 2.5.0

package/lib/src/ToastUI.js

@@ -10,7 +10,7 @@ const defaultToastConfig = {
 };
 function renderComponent({ data, options, config, isVisible, show, hide }) {
     const { text1, text2 } = data;
-    const { type, onPress, text1Style, text2Style, position, props } = options;
+    const { type, onPress, text1Style, text2Style, position, visibilityTime, props } = options;
     const toastConfig = {
         ...defaultToastConfig,
         ...config
@@ -23,6 +23,7 @@ function renderComponent({ data, options, config, isVisible, show, hide }) {
         position,
         type,
         isVisible,
+        visibilityTime,
         text1,
         text2,
         text1Style,

package/lib/src/components/AnimatedContainer.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { Animated, Dimensions } from 'react-native';
 import { useLogger, useGesture } from '../contexts';
-import { usePanResponder, useSlideAnimation, useViewDimensions } from '../hooks';
+import { useIsomorphicLayoutEffect, usePanResponder, useSlideAnimation, useViewDimensions } from '../hooks';
 import { noop } from '../utils/func';
 import { bound } from '../utils/number';
 import { getTestId } from '../utils/test-id';
@@ -83,7 +83,7 @@ export function AnimatedContainer({ children, isVisible, position, topOffset, bo
         onEnd,
         disable,
     });
-    React.useLayoutEffect(() => {
+    useIsomorphicLayoutEffect(() => {
         const newAnimationValue = isVisible ? 1 : 0;
         animate(newAnimationValue);
     }, [animate, isVisible]);

package/lib/src/components/BaseToast.d.ts

@@ -1,3 +1,3 @@
 import React from 'react';
 import { BaseToastProps } from '../types';
-export declare function BaseToast({ text1, text2, onPress, activeOpacity, style, touchableContainerProps, contentContainerStyle, contentContainerProps, text1Style, text1NumberOfLines, text1Props, text2Style, text2NumberOfLines, text2Props, renderLeadingIcon, renderTrailingIcon }: BaseToastProps): React.ReactElement;
+export declare function BaseToast({ testID, text1, text2, onPress, activeOpacity, style, touchableContainerProps, contentContainerStyle, contentContainerProps, text1Style, text1NumberOfLines, text1Props, text2Style, text2NumberOfLines, text2Props, renderLeadingIcon, renderTrailingIcon }: BaseToastProps): React.ReactElement;

package/lib/src/components/BaseToast.js

@@ -1,15 +1,15 @@
 import React from 'react';
-import { Text, View, TouchableOpacity } from 'react-native';
+import { Text, TouchableOpacity, View } from 'react-native';
 import { getTestId } from '../utils/test-id';
 import { styles } from './BaseToast.styles';
-export function BaseToast({ text1, text2, onPress, activeOpacity = 1, style, touchableContainerProps, contentContainerStyle, contentContainerProps, text1Style, text1NumberOfLines = 1, text1Props, text2Style, text2NumberOfLines = 1, text2Props, renderLeadingIcon, renderTrailingIcon }) {
-    return (<TouchableOpacity testID={getTestId('TouchableContainer')} onPress={onPress} activeOpacity={activeOpacity} style={[styles.base, styles.leadingBorder, style]} {...touchableContainerProps}>
+export function BaseToast({ testID = 'toast', text1, text2, onPress, activeOpacity = 1, style, touchableContainerProps, contentContainerStyle, contentContainerProps, text1Style, text1NumberOfLines = 1, text1Props, text2Style, text2NumberOfLines = 1, text2Props, renderLeadingIcon, renderTrailingIcon }) {
+    return (<TouchableOpacity testID={getTestId('TouchableContainer', testID)} onPress={onPress} activeOpacity={activeOpacity} style={[styles.base, styles.leadingBorder, style]} {...touchableContainerProps}>
       {renderLeadingIcon && renderLeadingIcon()}
-      <View testID={getTestId('ContentContainer')} style={[styles.contentContainer, contentContainerStyle]} {...contentContainerProps}>
-        {(text1?.length ?? 0) > 0 && (<Text testID={getTestId('Text1')} style={[styles.text1, text1Style]} numberOfLines={text1NumberOfLines} ellipsizeMode='tail' {...text1Props}>
+      <View testID={getTestId('ContentContainer', testID)} style={[styles.contentContainer, contentContainerStyle]} {...contentContainerProps}>
+        {(text1?.length ?? 0) > 0 && (<Text testID={getTestId('Text1', testID)} style={[styles.text1, text1Style]} numberOfLines={text1NumberOfLines} ellipsizeMode='tail' {...text1Props}>
             {text1}
           </Text>)}
-        {(text2?.length ?? 0) > 0 && (<Text testID={getTestId('Text2')} style={[styles.text2, text2Style]} numberOfLines={text2NumberOfLines} ellipsizeMode='tail' {...text2Props}>
+        {(text2?.length ?? 0) > 0 && (<Text testID={getTestId('Text2', testID)} style={[styles.text2, text2Style]} numberOfLines={text2NumberOfLines} ellipsizeMode='tail' {...text2Props}>
             {text2}
           </Text>)}
       </View>

package/lib/src/components/BaseToast.styles.d.ts

@@ -3,18 +3,26 @@ export declare const WIDTH = 340;
 export declare const BORDER_RADIUS = 6;
 export declare const styles: {
     base: {
+        elevation: number;
+        backgroundColor: string;
+        boxShadow: string;
         flexDirection: "row";
         height: number;
         width: number;
         borderRadius: number;
-        shadowOffset: {
-            width: number;
-            height: number;
-        };
-        shadowOpacity: number;
-        shadowRadius: number;
+    } | {
         elevation: number;
         backgroundColor: string;
+        shadowOffset?: {
+            width: number;
+            height: number;
+        } | undefined;
+        shadowOpacity?: number | undefined;
+        shadowRadius?: number | undefined;
+        flexDirection: "row";
+        height: number;
+        width: number;
+        borderRadius: number;
     };
     leadingBorder: {
         borderLeftWidth: number;

package/lib/src/components/BaseToast.styles.js

@@ -1,4 +1,4 @@
-import { StyleSheet } from 'react-native';
+import { Platform, StyleSheet } from 'react-native';
 export const HEIGHT = 60;
 export const WIDTH = 340;
 export const BORDER_RADIUS = 6;
@@ -8,9 +8,16 @@ export const styles = StyleSheet.create({
         height: HEIGHT,
         width: WIDTH,
         borderRadius: BORDER_RADIUS,
-        shadowOffset: { width: 0, height: 0 },
-        shadowOpacity: 0.1,
-        shadowRadius: BORDER_RADIUS,
+        ...Platform.select({
+            web: {
+                boxShadow: `0px 0px ${BORDER_RADIUS}px rgba(0, 0, 0, 0.1)`
+            },
+            default: {
+                shadowOffset: { width: 0, height: 0 },
+                shadowOpacity: 0.1,
+                shadowRadius: BORDER_RADIUS
+            }
+        }),
         elevation: 2,
         backgroundColor: '#FFF'
     },

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

@@ -3,3 +3,4 @@ export * from './useSlideAnimation';
 export * from './useTimeout';
 export * from './usePanResponder';
 export * from './useKeyboard';
+export * from './useIsomorphicLayoutEffect';

package/lib/src/hooks/index.js

@@ -3,3 +3,4 @@ export * from './useSlideAnimation';
 export * from './useTimeout';
 export * from './usePanResponder';
 export * from './useKeyboard';
+export * from './useIsomorphicLayoutEffect';

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

@@ -0,0 +1,2 @@
+import { useEffect } from 'react';
+export declare const useIsomorphicLayoutEffect: typeof useEffect;

package/lib/src/hooks/useIsomorphicLayoutEffect.js

@@ -0,0 +1,4 @@
+import { useEffect, useLayoutEffect } from 'react';
+export const useIsomorphicLayoutEffect = typeof globalThis.window !== 'undefined'
+    ? useLayoutEffect
+    : useEffect;

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

@@ -17,4 +17,5 @@ export declare function usePanResponder({ animatedValue, computeNewAnimatedValue
     onGrant: () => void;
     onMove: (_event: GestureResponderEvent, gesture: PanResponderGestureState) => void;
     onRelease: (_event: GestureResponderEvent, gesture: PanResponderGestureState) => void;
+    onTerminate: () => void;
 };

package/lib/src/hooks/usePanResponder.js

@@ -40,18 +40,26 @@ export function usePanResponder({ animatedValue, computeNewAnimatedValueForGestu
             onRestore();
         }
     }, [computeNewAnimatedValueForGesture, onEnd, onDismiss, onRestore, disable]);
+    const onTerminate = React.useCallback(() => {
+        onEnd();
+        if (disable)
+            return;
+        onRestore();
+    }, [onEnd, onRestore, disable]);
     const panResponder = React.useMemo(() => PanResponder.create({
         onStartShouldSetPanResponder: startShouldSetPanResponder,
         onPanResponderGrant: onGrant,
         onMoveShouldSetPanResponder: moveShouldSetPanResponder,
         onMoveShouldSetPanResponderCapture: moveShouldSetPanResponder,
         onPanResponderMove: onMove,
-        onPanResponderRelease: onRelease
-    }), [onMove, onRelease, onGrant]);
+        onPanResponderRelease: onRelease,
+        onPanResponderTerminate: onTerminate
+    }), [onMove, onRelease, onTerminate, onGrant]);
     return {
         panResponder,
         onGrant,
         onMove,
         onRelease,
+        onTerminate
     };
 }

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

@@ -109,6 +109,7 @@ export declare type ToastData = {
 export declare type ToastShowParams = ToastData & ToastOptions;
 export declare type ToastHideParams = void;
 export declare type BaseToastProps = {
+    testID?: string;
     text1?: string;
     text2?: string;
     onPress?: () => void;
@@ -130,6 +131,7 @@ export declare type ToastConfigParams<Props> = {
     position: ToastPosition;
     type: ToastType;
     isVisible: boolean;
+    visibilityTime: number;
     text1?: string;
     text2?: string;
     text1Style?: StyleProp<TextStyle>;

package/lib/src/utils/test-id.d.ts

@@ -1 +1 @@
-export declare function getTestId(elementName: string): string;
+export declare function getTestId(elementName: string, prefix?: string): string;

package/lib/src/utils/test-id.js

@@ -1,3 +1,3 @@
-export function getTestId(elementName) {
-    return `toast${elementName}`;
+export function getTestId(elementName, prefix = 'toast') {
+    return `${prefix}${elementName}`;
 }

package/package.json

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