react-native-toast-message 1.5.0 → 2.0.0

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

@@ -0,0 +1,39 @@
+import { StyleSheet } from 'react-native';
+export const HEIGHT = 60;
+export const WIDTH = 340;
+export const BORDER_RADIUS = 6;
+export const styles = StyleSheet.create({
+    base: {
+        flexDirection: 'row',
+        height: HEIGHT,
+        width: WIDTH,
+        borderRadius: BORDER_RADIUS,
+        shadowOffset: { width: 0, height: 0 },
+        shadowOpacity: 0.1,
+        shadowRadius: BORDER_RADIUS,
+        elevation: 2,
+        backgroundColor: '#FFF'
+    },
+    leadingBorder: {
+        borderLeftWidth: 5,
+        borderLeftColor: '#D8D8D8'
+    },
+    contentContainer: {
+        paddingHorizontal: 25,
+        flex: 1,
+        justifyContent: 'center',
+        alignItems: 'flex-start' // In case of RTL, the text will start from the right
+    },
+    text1: {
+        fontSize: 12,
+        fontWeight: 'bold',
+        marginBottom: 2,
+        color: '#000',
+        width: '100%' // Fixes: https://github.com/calintamas/react-native-toast-message/issues/130
+    },
+    text2: {
+        fontSize: 10,
+        color: '#979797',
+        width: '100%' // Fixes: https://github.com/calintamas/react-native-toast-message/issues/130
+    }
+});

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

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { BaseToastProps } from '../types';
+export declare function ErrorToast(props: BaseToastProps): JSX.Element;

package/lib/src/components/ErrorToast.js

@@ -0,0 +1,5 @@
+import React from 'react';
+import { BaseToast } from './BaseToast';
+export function ErrorToast(props) {
+    return <BaseToast style={{ borderLeftColor: '#FE6301' }} {...props}/>;
+}

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

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { BaseToastProps } from '../types';
+export declare function InfoToast(props: BaseToastProps): JSX.Element;

package/lib/src/components/InfoToast.js

@@ -0,0 +1,5 @@
+import React from 'react';
+import { BaseToast } from './BaseToast';
+export function InfoToast(props) {
+    return <BaseToast style={{ borderLeftColor: '#87CEFA' }} {...props}/>;
+}

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

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { BaseToastProps } from '../types';
+export declare function SuccessToast(props: BaseToastProps): JSX.Element;

package/lib/src/components/SuccessToast.js

@@ -0,0 +1,5 @@
+import React from 'react';
+import { BaseToast } from './BaseToast';
+export function SuccessToast(props) {
+    return <BaseToast style={{ borderLeftColor: '#69C779' }} {...props}/>;
+}

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

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import { TouchableOpacityProps } from 'react-native';
+import { ReactChildren } from '../types';
+declare type TouchableProps = {
+    children: ReactChildren;
+} & TouchableOpacityProps;
+export declare function Touchable({ children, activeOpacity, ...rest }: TouchableProps): JSX.Element;
+export {};

package/lib/src/components/Touchable.js

@@ -0,0 +1,7 @@
+import React from 'react';
+import { TouchableOpacity } from 'react-native';
+export function Touchable({ children, activeOpacity = 1, ...rest }) {
+    return (<TouchableOpacity activeOpacity={activeOpacity} {...rest}>
+      {children}
+    </TouchableOpacity>);
+}

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

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+import { ReactChildren } from '../types';
+export declare type LoggerContextType = {
+    log: (...args: unknown[]) => void;
+};
+export declare type LoggerProviderProps = {
+    children: ReactChildren;
+    enableLogs?: boolean;
+};
+declare function LoggerProvider({ children, enableLogs }: LoggerProviderProps): JSX.Element;
+declare function useLogger(): LoggerContextType;
+export { LoggerProvider, useLogger };

package/lib/src/contexts/LoggerContext.js

@@ -0,0 +1,22 @@
+import React from 'react';
+import { noop } from '../utils/func';
+const LoggerContext = React.createContext({
+    log: noop
+});
+function LoggerProvider({ children, enableLogs = false }) {
+    const log = React.useCallback((...args) => {
+        if (enableLogs) {
+            // eslint-disable-next-line no-console
+            console.log('Toast:', ...args);
+        }
+    }, [enableLogs]);
+    const value = {
+        log
+    };
+    return (<LoggerContext.Provider value={value}>{children}</LoggerContext.Provider>);
+}
+function useLogger() {
+    const ctx = React.useContext(LoggerContext);
+    return ctx;
+}
+export { LoggerProvider, useLogger };

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

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

package/lib/src/contexts/index.js

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

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

@@ -0,0 +1,5 @@
+export * from './useViewDimensions';
+export * from './useSlideAnimation';
+export * from './useTimeout';
+export * from './usePanResponder';
+export * from './useKeyboard';

package/lib/src/hooks/index.js

@@ -0,0 +1,5 @@
+export * from './useViewDimensions';
+export * from './useSlideAnimation';
+export * from './useTimeout';
+export * from './usePanResponder';
+export * from './useKeyboard';

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

@@ -0,0 +1,4 @@
+export declare function useKeyboard(): {
+    keyboardHeight: number;
+    isKeyboardVisible: boolean;
+};

package/lib/src/hooks/useKeyboard.js

@@ -0,0 +1,31 @@
+import React from 'react';
+import { Keyboard } from 'react-native';
+import { isIOS } from '../utils/platform';
+export function useKeyboard() {
+    const [keyboardHeight, setKeyboardHeight] = React.useState(0);
+    const [isKeyboardVisible, setIsKeyboardVisible] = React.useState(false);
+    const onShow = React.useCallback((event) => {
+        const { height } = event.endCoordinates;
+        setKeyboardHeight(height);
+        setIsKeyboardVisible(true);
+    }, []);
+    const onHide = React.useCallback(() => {
+        setKeyboardHeight(0);
+        setIsKeyboardVisible(false);
+    }, []);
+    React.useEffect(() => {
+        if (!isIOS()) {
+            return () => { };
+        }
+        const didShowListener = Keyboard.addListener('keyboardDidShow', onShow);
+        const didHideListener = Keyboard.addListener('keyboardDidHide', onHide);
+        return () => {
+            didShowListener.remove();
+            didHideListener.remove();
+        };
+    }, [onHide, onShow]);
+    return {
+        keyboardHeight,
+        isKeyboardVisible
+    };
+}

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

@@ -0,0 +1,15 @@
+import { RefObject } from 'react';
+import { Animated, GestureResponderEvent, PanResponderGestureState } from 'react-native';
+export declare function shouldSetPanResponder(_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;
+};
+export declare function usePanResponder({ animatedValue, computeNewAnimatedValueForGesture, onDismiss, onRestore }: UsePanResponderParams): {
+    panResponder: import("react-native").PanResponderInstance;
+    onMove: (_event: GestureResponderEvent, gesture: PanResponderGestureState) => void;
+    onRelease: (_event: GestureResponderEvent, gesture: PanResponderGestureState) => void;
+};

package/lib/src/hooks/usePanResponder.js

@@ -0,0 +1,41 @@
+import React from 'react';
+import { PanResponder } from 'react-native';
+export function shouldSetPanResponder(_event, gesture) {
+    const { dx, dy } = gesture;
+    // Fixes onPress handler
+    // https://github.com/calintamas/react-native-toast-message/issues/113
+    const offset = 2;
+    return Math.abs(dx) > offset || Math.abs(dy) > offset;
+}
+export function shouldDismissView(newAnimatedValue, gesture) {
+    const dismissThreshold = 0.65;
+    const { vy, dy } = gesture;
+    return (newAnimatedValue <= dismissThreshold ||
+        (Math.abs(vy) >= dismissThreshold && dy < 0));
+}
+export function usePanResponder({ animatedValue, computeNewAnimatedValueForGesture, onDismiss, onRestore }) {
+    const onMove = React.useCallback((_event, gesture) => {
+        const newAnimatedValue = computeNewAnimatedValueForGesture(gesture);
+        animatedValue.current?.setValue(newAnimatedValue);
+    }, [animatedValue, computeNewAnimatedValueForGesture]);
+    const onRelease = React.useCallback((_event, gesture) => {
+        const newAnimatedValue = computeNewAnimatedValueForGesture(gesture);
+        if (shouldDismissView(newAnimatedValue, gesture)) {
+            onDismiss();
+        }
+        else {
+            onRestore();
+        }
+    }, [computeNewAnimatedValueForGesture, onDismiss, onRestore]);
+    const panResponder = React.useMemo(() => PanResponder.create({
+        onMoveShouldSetPanResponder: shouldSetPanResponder,
+        onMoveShouldSetPanResponderCapture: shouldSetPanResponder,
+        onPanResponderMove: onMove,
+        onPanResponderRelease: onRelease
+    }), [onMove, onRelease]);
+    return {
+        panResponder,
+        onMove,
+        onRelease
+    };
+}

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

@@ -0,0 +1,24 @@
+import React from 'react';
+import { Animated } from 'react-native';
+import { ToastPosition } from '../types';
+declare type UseSlideAnimationParams = {
+    position: ToastPosition;
+    height: number;
+    topOffset: number;
+    bottomOffset: number;
+    keyboardOffset: number;
+};
+export declare function translateYOutputRangeFor({ position, height, topOffset, bottomOffset, keyboardHeight, keyboardOffset }: UseSlideAnimationParams & {
+    keyboardHeight: number;
+}): number[];
+export declare function useSlideAnimation({ position, height, topOffset, bottomOffset, keyboardOffset }: UseSlideAnimationParams): {
+    animatedValue: React.MutableRefObject<Animated.Value>;
+    animate: (toValue: number) => void;
+    animationStyles: {
+        opacity: Animated.AnimatedInterpolation;
+        transform: {
+            translateY: Animated.AnimatedInterpolation;
+        }[];
+    };
+};
+export {};

package/lib/src/hooks/useSlideAnimation.js

@@ -0,0 +1,49 @@
+import React from 'react';
+import { Animated } from 'react-native';
+import { additiveInverseArray } from '../utils/array';
+import { useKeyboard } from './useKeyboard';
+export function translateYOutputRangeFor({ position, height, topOffset, bottomOffset, keyboardHeight, keyboardOffset }) {
+    const offset = position === 'bottom' ? bottomOffset : topOffset;
+    const keyboardAwareOffset = position === 'bottom' ? keyboardHeight + keyboardOffset : 0;
+    const range = [-(height * 2), Math.max(offset, keyboardAwareOffset)];
+    const outputRange = position === 'bottom' ? additiveInverseArray(range) : range;
+    return outputRange;
+}
+export function useSlideAnimation({ position, height, topOffset, bottomOffset, keyboardOffset }) {
+    const animatedValue = React.useRef(new Animated.Value(0));
+    const { keyboardHeight } = useKeyboard();
+    const animate = React.useCallback((toValue) => {
+        Animated.spring(animatedValue.current, {
+            toValue,
+            useNativeDriver: true,
+            friction: 8
+        }).start();
+    }, []);
+    const translateY = animatedValue.current.interpolate({
+        inputRange: [0, 1],
+        outputRange: translateYOutputRangeFor({
+            position,
+            height,
+            topOffset,
+            bottomOffset,
+            keyboardHeight,
+            keyboardOffset
+        })
+    });
+    const opacity = animatedValue.current.interpolate({
+        inputRange: [0, 0.7, 1],
+        outputRange: [0, 1, 1]
+    });
+    return {
+        animatedValue,
+        animate,
+        animationStyles: {
+            opacity,
+            transform: [
+                {
+                    translateY
+                }
+            ]
+        }
+    };
+}

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

@@ -0,0 +1,6 @@
+declare function useTimeout<CbParams>(cb: (params?: CbParams) => void, delayMs?: number): {
+    startTimer: () => void;
+    clearTimer: () => void;
+    isActive: boolean;
+};
+export { useTimeout };

package/lib/src/hooks/useTimeout.js

@@ -0,0 +1,29 @@
+import React from 'react';
+import { useLogger } from '../contexts';
+function useTimeout(cb, delayMs = 0) {
+    const { log } = useLogger();
+    const ref = React.useRef();
+    const clearTimer = React.useCallback(() => {
+        if (ref.current) {
+            log('Clearing timer', ref.current);
+            clearTimeout(ref.current);
+            ref.current = undefined;
+        }
+    }, [log]);
+    const startTimer = React.useCallback(() => {
+        clearTimer();
+        ref.current = setTimeout(() => {
+            cb();
+            log('Running timer', ref.current);
+            ref.current = undefined;
+        }, delayMs);
+        log('Starting timer', ref.current);
+    }, [clearTimer, delayMs, log, cb]);
+    React.useEffect(() => () => clearTimer(), [clearTimer]);
+    return {
+        startTimer,
+        clearTimer,
+        isActive: ref.current !== undefined
+    };
+}
+export { useTimeout };

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

@@ -0,0 +1,13 @@
+import { LayoutChangeEvent } from 'react-native';
+export declare type UseViewDimensionsParams = {
+    heightOffset?: number;
+    widthOffset?: number;
+};
+/**
+ * Retrieves View dimensions (height, width) from a LayoutChangeEvent and sets them on state
+ */
+export declare function useViewDimensions({ heightOffset, widthOffset }?: UseViewDimensionsParams): {
+    computeViewDimensions: (event: LayoutChangeEvent) => void;
+    height: number;
+    width: number;
+};

package/lib/src/hooks/useViewDimensions.js

@@ -0,0 +1,20 @@
+import React from 'react';
+const getLayoutValue = (key) => (event) => event?.nativeEvent?.layout?.[key] ?? 0;
+/**
+ * Retrieves View dimensions (height, width) from a LayoutChangeEvent and sets them on state
+ */
+export function useViewDimensions({ heightOffset = 0, widthOffset = 0 } = {}) {
+    const [height, setHeight] = React.useState(0);
+    const [width, setWidth] = React.useState(0);
+    const computeViewDimensions = React.useCallback((event) => {
+        const h = getLayoutValue('height')(event);
+        const w = getLayoutValue('width')(event);
+        setHeight(h + heightOffset);
+        setWidth(w + widthOffset);
+    }, [heightOffset, widthOffset]);
+    return {
+        computeViewDimensions,
+        height,
+        width
+    };
+}

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

@@ -0,0 +1,165 @@
+import React from 'react';
+import { TextStyle, TouchableOpacityProps, ViewStyle } from 'react-native';
+export declare type ReactChildren = React.ReactNode;
+export declare type ToastType = string;
+export declare type ToastPosition = 'top' | 'bottom';
+export declare type ToastOptions = {
+    /**
+     * Toast type.
+     * Default value: `success`
+     */
+    type?: ToastType;
+    /**
+     * Toast position.
+     * Default value: `top`
+     */
+    position?: ToastPosition;
+    /**
+     * When `true`, the visible Toast automatically hides after a certain number of seconds,
+     * specified by the `visibilityTime` prop.
+     * Default value: `true`
+     */
+    autoHide?: boolean;
+    /**
+     * Number of seconds after which Toast automatically hides.
+     * Has effect only in conjunction with `autoHide` prop set to `true`.
+     * Default value: `4000`
+     */
+    visibilityTime?: number;
+    /**
+     * Offset from the top of the screen (in px).
+     * Has effect only when `position` is `top`
+     * Default value: `40`
+     */
+    topOffset?: number;
+    /**
+     * Offset from the bottom of the screen (in px)
+     * Has effect only when `position` is `bottom`
+     * Default value: `40`
+     */
+    bottomOffset?: number;
+    /**
+     * Offset from the Keyboard (in px)
+     * Has effect only when `position` is `bottom` and Keyboard is visible
+     * Default value: `10`
+     */
+    keyboardOffset?: number;
+    /**
+     * Called when Toast is shown
+     */
+    onShow?: () => void;
+    /**
+     * Called when Toast hides
+     */
+    onHide?: () => void;
+    /**
+     * Called on Toast press
+     */
+    onPress?: () => void;
+    /**
+     * Any custom props passed to the specified Toast type.
+     * Has effect only when there is a custom Toast type (configured via the `config` prop
+     * on the Toast instance) that uses the `props` parameter
+     */
+    props?: any;
+};
+export declare type ToastData = {
+    text1?: string;
+    text2?: string;
+};
+export declare type ToastShowParams = ToastData & ToastOptions;
+export declare type ToastHideParams = void;
+export declare type BaseToastProps = {
+    text1?: string;
+    text2?: string;
+    onPress?: () => void;
+    activeOpacity?: number;
+    style?: ViewStyle;
+    touchableContainerProps?: TouchableOpacityProps;
+    contentContainerStyle?: ViewStyle;
+    contentContainerProps?: ViewStyle;
+    text1Style?: TextStyle;
+    text1NumberOfLines?: number;
+    text1Props?: TextStyle;
+    text2Style?: TextStyle;
+    text2NumberOfLines?: number;
+    text2Props?: TextStyle;
+    renderLeadingIcon?: () => React.ReactNode;
+    renderTrailingIcon?: () => React.ReactNode;
+};
+export declare type ToastConfigParams<Props> = {
+    position: ToastPosition;
+    type: ToastType;
+    isVisible: boolean;
+    text1?: string;
+    text2?: string;
+    show: (params: ToastShowParams) => void;
+    hide: (params: ToastHideParams) => void;
+    onPress: () => void;
+    props: Props;
+};
+export declare type ToastConfig = {
+    [key: string]: (params: ToastConfigParams<any>) => React.ReactNode;
+};
+/**
+ * `props` that can be set on the Toast instance.
+ * They act as defaults for all Toasts that are shown.
+ */
+export declare type ToastProps = {
+    /**
+     * Layout configuration for custom Toast types
+     */
+    config?: ToastConfig;
+    /**
+     * Toast type.
+     * Default value: `success`
+     */
+    type?: ToastType;
+    /**
+     * Toast position.
+     * Default value: `top`
+     */
+    position?: ToastPosition;
+    /**
+     * Number of milliseconds after which Toast automatically hides.
+     * Has effect only in conjunction with `autoHide` prop set to `true`.
+     * Default value: `4000`
+     */
+    visibilityTime?: number;
+    /**
+     * When `true`, the visible Toast automatically hides after a certain number of milliseconds,
+     * specified by the `visibilityTime` prop.
+     * Default value: `true`
+     */
+    autoHide?: boolean;
+    /**
+     * Offset from the top of the screen (in px).
+     * Has effect only when `position` is `top`
+     * Default value: `40`
+     */
+    topOffset?: number;
+    /**
+     * Offset from the bottom of the screen (in px)
+     * Has effect only when `position` is `bottom`
+     * Default value: `40`
+     */
+    bottomOffset?: number;
+    /**
+     * Offset from the Keyboard (in px)
+     * Has effect only when `position` is `bottom` and Keyboard is visible (iOS only)
+     * Default value: `10`
+     */
+    keyboardOffset?: number;
+    /**
+     * Called when any Toast is shown
+     */
+    onShow?: () => void;
+    /**
+     * Called when any Toast hides
+     */
+    onHide?: () => void;
+    /**
+     * Called on any Toast press
+     */
+    onPress?: () => void;
+};

package/lib/src/types/index.js

@@ -0,0 +1 @@
+export {};

package/lib/src/useToast.d.ts

@@ -0,0 +1,13 @@
+import { ToastData, ToastOptions, ToastProps, ToastShowParams } from './types';
+export declare const DEFAULT_DATA: ToastData;
+export declare const DEFAULT_OPTIONS: Required<ToastOptions>;
+export declare type UseToastParams = {
+    defaultOptions: Omit<ToastProps, 'config'>;
+};
+export declare function useToast({ defaultOptions }: UseToastParams): {
+    isVisible: boolean;
+    data: ToastData;
+    options: Required<ToastOptions>;
+    show: (params: ToastShowParams) => void;
+    hide: () => void;
+};

package/lib/src/useToast.js

@@ -0,0 +1,79 @@
+import React from 'react';
+import { useLogger } from './contexts';
+import { useTimeout } from './hooks';
+import { noop } from './utils/func';
+import { mergeIfDefined } from './utils/obj';
+export const DEFAULT_DATA = {
+    text1: undefined,
+    text2: undefined
+};
+export const DEFAULT_OPTIONS = {
+    type: 'success',
+    position: 'top',
+    autoHide: true,
+    visibilityTime: 4000,
+    topOffset: 40,
+    bottomOffset: 40,
+    keyboardOffset: 10,
+    onShow: noop,
+    onHide: noop,
+    onPress: noop,
+    props: {}
+};
+export function useToast({ defaultOptions }) {
+    const { log } = useLogger();
+    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]);
+    const { startTimer, clearTimer } = useTimeout(onAutoHide, options.visibilityTime);
+    const hide = React.useCallback(() => {
+        log('Hiding');
+        setIsVisible(false);
+        clearTimer();
+        options.onHide();
+    }, [clearTimer, log, options]);
+    const show = React.useCallback((params) => {
+        log(`Showing with params: ${JSON.stringify(params)}`);
+        const { text1 = DEFAULT_DATA.text1, text2 = DEFAULT_DATA.text2, type = initialOptions.type, position = initialOptions.position, autoHide = initialOptions.autoHide, visibilityTime = initialOptions.visibilityTime, topOffset = initialOptions.topOffset, bottomOffset = initialOptions.bottomOffset, keyboardOffset = initialOptions.keyboardOffset, onShow = initialOptions.onShow, onHide = initialOptions.onHide, onPress = initialOptions.onPress, props = initialOptions.props } = params;
+        // TODO: validate input
+        // TODO: use a queue when Toast is already visible
+        setIsVisible(true);
+        setData({
+            text1,
+            text2
+        });
+        setOptions(mergeIfDefined(initialOptions, {
+            type,
+            position,
+            autoHide,
+            visibilityTime,
+            topOffset,
+            bottomOffset,
+            keyboardOffset,
+            onShow,
+            onHide,
+            onPress,
+            props
+        }));
+        onShow();
+    }, [initialOptions, log]);
+    React.useEffect(() => {
+        const { autoHide } = options;
+        if (isVisible && autoHide) {
+            startTimer();
+        }
+    }, [isVisible, options, startTimer]);
+    return {
+        isVisible,
+        data,
+        options,
+        show,
+        hide
+    };
+}

package/lib/src/utils/array.d.ts

@@ -0,0 +1,2 @@
+declare function additiveInverseArray(arr: number[]): number[];
+export { additiveInverseArray };

package/lib/src/utils/array.js

@@ -0,0 +1,4 @@
+function additiveInverseArray(arr) {
+    return arr.map((i) => -i);
+}
+export { additiveInverseArray };