react-native-toast-message 2.1.3 → 2.2.0-beta.1

package/lib/src/Toast.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { ToastProps, ToastShowParams } from './types';
-export declare function Toast(props: ToastProps): JSX.Element;
+export declare function Toast({ useNativeDriver, ...props }: ToastProps): JSX.Element;
 export declare namespace Toast {
     var show: (params: ToastShowParams) => void;
     var hide: (params?: void | undefined) => void;

package/lib/src/Toast.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { LoggerProvider } from './contexts';
+import { EnvironmentProvider, LoggerProvider } from './contexts';
 import { ToastUI } from './ToastUI';
 import { useToast } from './useToast';
 const ToastRoot = React.forwardRef((props, ref) => {
@@ -33,7 +33,7 @@ function addNewRef(newRef) {
 function removeOldRef(oldRef) {
     refs = refs.filter((r) => r.current !== oldRef);
 }
-export function Toast(props) {
+export function Toast({ useNativeDriver, ...props }) {
     const toastRef = React.useRef(null);
     /*
       This must use `useCallback` to ensure the ref doesn't get set to null and then a new ref every render.
@@ -53,7 +53,9 @@ export function Toast(props) {
         }
     }, []);
     return (<LoggerProvider enableLogs={false}>
-      <ToastRoot ref={setRef} {...props}/>
+      <EnvironmentProvider useNativeDriver={useNativeDriver}>
+        <ToastRoot ref={setRef} {...props}/>
+      </EnvironmentProvider>
     </LoggerProvider>);
 }
 /**

package/lib/src/ToastUI.js

@@ -17,7 +17,7 @@ function renderComponent({ data, options, config, isVisible, show, hide }) {
     };
     const ToastComponent = toastConfig[type];
     if (!ToastComponent) {
-        throw new Error(`Toast type: '${type}' does not exist. You can add it via the 'config' prop on the Toast instance. Learn more: https://github.com/calintamas/react-native-toast-message/blob/master/README.md`);
+        throw new Error(`Toast type: '${type}' does not exist. You can add it via the 'config' prop on the Toast instance. Learn more: https://github.com/calintamas/react-native-toast-message/blob/HEAD/docs/custom-layouts.md`);
     }
     return ToastComponent({
         position,

package/lib/src/__helpers__/PanResponder.d.ts

@@ -0,0 +1,3 @@
+import { PanResponderGestureState } from 'react-native';
+export declare const mockGestureValues: PanResponderGestureState;
+export declare function mockPanResponder(): void;

package/lib/src/__helpers__/PanResponder.js

@@ -0,0 +1,26 @@
+import { PanResponder } from 'react-native';
+export const mockGestureValues = {
+    moveY: 0,
+    moveX: 0,
+    y0: 0,
+    x0: 0,
+    dx: 0,
+    dy: 10,
+    stateID: 123,
+    vx: 0,
+    vy: 0,
+    numberActiveTouches: 1,
+    _accountsForMovesUpTo: 1
+};
+export function mockPanResponder() {
+    jest
+        .spyOn(PanResponder, 'create')
+        .mockImplementation(({ onMoveShouldSetPanResponder, onMoveShouldSetPanResponderCapture, onPanResponderMove, onPanResponderRelease }) => ({
+        panHandlers: {
+            onMoveShouldSetResponder: onMoveShouldSetPanResponder,
+            onMoveShouldSetResponderCapture: onMoveShouldSetPanResponderCapture,
+            onResponderMove: onPanResponderMove,
+            onResponderRelease: onPanResponderRelease
+        }
+    }));
+}

package/lib/src/__helpers__/testing-library/react-hooks.d.ts

@@ -0,0 +1,9 @@
+import { renderHook as renderHookFn } from '@testing-library/react-hooks';
+/**
+ * Custom `renderHook` function implementation to be able to easily wrap test environment providers
+ *
+ * https://testing-library.com/docs/react-testing-library/setup/#custom-render
+ */
+export declare const renderHook: typeof renderHookFn;
+export { act } from '@testing-library/react-hooks';
+export type { RenderResult } from '@testing-library/react-hooks';

package/lib/src/__helpers__/testing-library/react-hooks.js

@@ -0,0 +1,13 @@
+/* eslint-disable no-restricted-imports */
+import { renderHook as renderHookFn } from '@testing-library/react-hooks';
+import { EnvironmentProviderMock } from '~/__mocks__/EnvironmentProviderMock';
+/**
+ * Custom `renderHook` function implementation to be able to easily wrap test environment providers
+ *
+ * https://testing-library.com/docs/react-testing-library/setup/#custom-render
+ */
+export const renderHook = (cb, options) => renderHookFn(cb, {
+    wrapper: EnvironmentProviderMock,
+    ...options
+});
+export { act } from '@testing-library/react-hooks';

package/lib/src/__helpers__/testing-library/react-native.d.ts

@@ -0,0 +1,9 @@
+import { render as renderFn } from '@testing-library/react-native';
+/**
+ * Custom `render` function implementation to be able to easily wrap test environment providers
+ *
+ * https://testing-library.com/docs/react-testing-library/setup/#custom-render
+ */
+export declare const render: typeof renderFn;
+export { waitFor, fireEvent, act, cleanup } from '@testing-library/react-native';
+export type { RenderOptions, RenderAPI, GetByAPI } from '@testing-library/react-native';

package/lib/src/__helpers__/testing-library/react-native.js

@@ -0,0 +1,13 @@
+/* eslint-disable no-restricted-imports */
+import { render as renderFn } from '@testing-library/react-native';
+import { EnvironmentProviderMock } from '../../__mocks__/EnvironmentProviderMock';
+/**
+ * Custom `render` function implementation to be able to easily wrap test environment providers
+ *
+ * https://testing-library.com/docs/react-testing-library/setup/#custom-render
+ */
+export const render = (component, options) => renderFn(component, {
+    wrapper: EnvironmentProviderMock,
+    ...options
+});
+export { waitFor, fireEvent, act, cleanup } from '@testing-library/react-native';

package/lib/src/__mocks__/EnvironmentProviderMock.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import { EnvironmentContextType } from '../contexts';
+export declare const environmentMock: EnvironmentContextType;
+/**
+ * Provides test implementations for injected dependencies
+ */
+export declare const EnvironmentProviderMock: React.FC;

package/lib/src/__mocks__/EnvironmentProviderMock.js

@@ -0,0 +1,9 @@
+import React from 'react';
+import { EnvironmentProvider } from '../contexts';
+export const environmentMock = {
+    useNativeDriver: false
+};
+/**
+ * Provides test implementations for injected dependencies
+ */
+export const EnvironmentProviderMock = ({ children }) => (<EnvironmentProvider {...environmentMock}>{children}</EnvironmentProvider>);

package/lib/src/__tests__/Toast.test.d.ts

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

package/lib/src/__tests__/Toast.test.js

@@ -0,0 +1,190 @@
+/* eslint-env jest */
+import React from 'react';
+import { Button, Modal, Text } from 'react-native';
+import { act, fireEvent, render, waitFor } from '~/__helpers__/testing-library/react-native';
+import { Toast } from '../Toast';
+/*
+  The Modal component is automatically mocked by RN and apparently contains a bug which makes the Modal
+  (and its children) to always be visible in the test tree.
+
+  This fixes the issue:
+ */
+jest.mock('react-native/Libraries/Modal/Modal', () => {
+    const ActualModal = jest.requireActual('react-native/Libraries/Modal/Modal');
+    return (props) => <ActualModal {...props}/>;
+});
+jest.mock('react-native/Libraries/LogBox/LogBox');
+describe('test Toast component', () => {
+    it('creates imperative handle', () => {
+        const onShow = jest.fn();
+        const onHide = jest.fn();
+        render(<Toast onShow={onShow} onHide={onHide}/>);
+        expect(Toast.show).toBeDefined();
+        expect(Toast.hide).toBeDefined();
+        act(() => {
+            Toast.show({
+                text1: 'test'
+            });
+        });
+        expect(onShow).toHaveBeenCalled();
+        act(() => {
+            Toast.hide();
+        });
+        expect(onHide).toHaveBeenCalled();
+    });
+    it('shows Toast inside a Modal', async () => {
+        const onShow = jest.fn();
+        const onHide = jest.fn();
+        const onShowInsideModal = jest.fn();
+        const onHideInsideModal = jest.fn();
+        const ModalWrapper = () => {
+            const [isVisible, setIsVisible] = React.useState(false);
+            return (<>
+          <Toast onShow={onShow} onHide={onHide}/>
+          <Text>Outside modal</Text>
+          <Button title='Show modal' onPress={() => setIsVisible(true)}/>
+          <Modal visible={isVisible}>
+            <Text>Inside modal</Text>
+            <Button title='Hide modal' onPress={() => setIsVisible(false)}/>
+            <Toast onShow={onShowInsideModal} onHide={onHideInsideModal}/>
+          </Modal>
+        </>);
+        };
+        const utils = render(<ModalWrapper />);
+        expect(utils.queryByText('Outside modal')).toBeTruthy();
+        expect(Toast.show).toBeDefined();
+        expect(Toast.hide).toBeDefined();
+        // Test the Toast instance that's outside the Modal
+        act(() => {
+            Toast.show({
+                text1: 'test'
+            });
+        });
+        expect(onShow).toHaveBeenCalled();
+        act(() => {
+            Toast.hide();
+        });
+        expect(onHide).toHaveBeenCalled();
+        // Show the Modal
+        const showModalButton = utils.getByText('Show modal');
+        expect(showModalButton).toBeTruthy();
+        fireEvent.press(showModalButton);
+        await waitFor(() => {
+            expect(utils.queryByText('Inside modal')).toBeTruthy();
+        });
+        // Test the Toast instance that's inside the Modal
+        act(() => {
+            Toast.show({
+                text1: 'test'
+            });
+        });
+        expect(onShowInsideModal).toHaveBeenCalled();
+        act(() => {
+            Toast.hide();
+        });
+        expect(onHideInsideModal).toHaveBeenCalled();
+        // Hide modal
+        const hideModalButton = utils.getByText('Hide modal');
+        expect(hideModalButton).toBeTruthy();
+        fireEvent.press(hideModalButton);
+        await waitFor(() => {
+            expect(utils.queryByText('Inside modal')).toBeFalsy();
+        });
+        // Now that the Modal is hidden, the the outside Toast instance again
+        act(() => {
+            Toast.show({
+                text1: 'test'
+            });
+        });
+        expect(onShow).toHaveBeenCalledTimes(2);
+        expect(onShowInsideModal).toHaveBeenCalledTimes(1);
+        act(() => {
+            Toast.hide();
+        });
+        expect(onHide).toHaveBeenCalledTimes(2);
+        expect(onHideInsideModal).toHaveBeenCalledTimes(1);
+    });
+    it(`doesn't show a Toast if there is no active ref`, () => {
+        const onShow = jest.fn();
+        const onHide = jest.fn();
+        const ModalWrapper = () => (<>
+        <Modal visible={false}>
+          <Text>Inside modal</Text>
+          <Toast onShow={onShow} onHide={onHide}/>
+        </Modal>
+      </>);
+        render(<ModalWrapper />);
+        act(() => {
+            Toast.show({
+                text1: 'test'
+            });
+        });
+        expect(onShow).not.toHaveBeenCalled();
+    });
+    it('when autoHide: true, the Toast only hides when timer reaches visibilityTime', () => {
+        jest.useFakeTimers();
+        const onShow = jest.fn();
+        const onHide = jest.fn();
+        const visibilityTime = 1500;
+        render(<Toast onShow={onShow} onHide={onHide} autoHide={true} visibilityTime={visibilityTime}/>);
+        act(() => {
+            Toast.show({
+                text1: 'I am auto hiding, by default'
+            });
+        });
+        expect(onShow).toHaveBeenCalled();
+        // Advance time by 1/4 visibilityTime
+        // Toast should not hide yet
+        jest.advanceTimersByTime(visibilityTime / 4);
+        expect(onHide).not.toHaveBeenCalled();
+        // Do it again 1/4 visibilityTime
+        // Toast should still be visible
+        jest.advanceTimersByTime(visibilityTime / 4);
+        expect(onHide).not.toHaveBeenCalled();
+        // Advance time by the remaining 1/2 visibilityTime
+        act(() => {
+            jest.advanceTimersByTime(visibilityTime / 2);
+        });
+        // Now the Toast should hide
+        expect(onHide).toHaveBeenCalled();
+        jest.useRealTimers();
+    });
+    it('clears previous autoHide: true timer when a new Toast is presented with autoHide: false', () => {
+        jest.useFakeTimers();
+        const onShow = jest.fn();
+        const onHide = jest.fn();
+        const visibilityTime = 1500;
+        render(<Toast onShow={onShow} onHide={onHide} autoHide={true} visibilityTime={visibilityTime}/>);
+        act(() => {
+            Toast.show({
+                text1: 'I am auto hiding, by default'
+            });
+        });
+        expect(onShow).toHaveBeenCalled();
+        // Advance by 1/2 visibilityTime
+        // Toast should not hide
+        jest.advanceTimersByTime(visibilityTime / 2);
+        expect(onHide).not.toHaveBeenCalled();
+        // Now, show another Toast, before the previous one has the chance to hide
+        act(() => {
+            Toast.show({
+                text1: 'I am NOT auto hiding',
+                autoHide: false
+            });
+        });
+        // Advance time to the end of visibilityTime
+        act(() => {
+            jest.advanceTimersByTime(visibilityTime / 2);
+        });
+        // The new Toast should NOT hide
+        // (the previous timer should have been cleared before reaching the end)
+        expect(onHide).not.toHaveBeenCalled();
+        // And even go beyond visibilityTime
+        act(() => {
+            jest.advanceTimersByTime(1000);
+        });
+        // The new Toast should still not hide
+        expect(onHide).not.toHaveBeenCalled();
+        jest.useRealTimers();
+    });
+});

package/lib/src/__tests__/ToastUI.test.d.ts

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

package/lib/src/__tests__/ToastUI.test.js

@@ -0,0 +1,52 @@
+/* eslint-env jest */
+import React from 'react';
+import { render } from '~/__helpers__/testing-library/react-native';
+import { ToastUI } from '../ToastUI';
+import { DEFAULT_OPTIONS } from '../useToast';
+const setup = (props) => {
+    const show = jest.fn();
+    const hide = jest.fn();
+    const utils = render(<ToastUI isVisible options={DEFAULT_OPTIONS} data={{
+            text1: 'text1',
+            text2: 'text2'
+        }} show={show} hide={hide} {...props}/>);
+    return {
+        ...utils
+    };
+};
+describe('test ToastUI component', () => {
+    it('renders defaults', () => {
+        const { queryByText } = setup();
+        expect(queryByText('text1')).toBeDefined();
+        expect(queryByText('text2')).toBeDefined();
+    });
+    it('renders error type Toast', () => {
+        const { queryByText } = setup({
+            options: {
+                ...DEFAULT_OPTIONS,
+                type: 'error'
+            }
+        });
+        expect(queryByText('text1')).toBeDefined();
+        expect(queryByText('text2')).toBeDefined();
+    });
+    it('renders info type Toast', () => {
+        const { queryByText } = setup({
+            options: {
+                ...DEFAULT_OPTIONS,
+                type: 'info'
+            }
+        });
+        expect(queryByText('text1')).toBeDefined();
+        expect(queryByText('text2')).toBeDefined();
+    });
+    it('throws when trying to render an undefined Toast type', () => {
+        const type = 'mock';
+        expect(() => setup({
+            options: {
+                ...DEFAULT_OPTIONS,
+                type
+            }
+        })).toThrow(new Error(`Toast type: '${type}' does not exist. You can add it via the 'config' prop on the Toast instance. Learn more: https://github.com/calintamas/react-native-toast-message/blob/HEAD/docs/custom-layouts.md`));
+    });
+});

package/lib/src/__tests__/useToast.test.d.ts

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

package/lib/src/__tests__/useToast.test.js

@@ -0,0 +1,142 @@
+/* eslint-env jest */
+import { act, renderHook } from '~/__helpers__/testing-library/react-hooks';
+import { DEFAULT_DATA, DEFAULT_OPTIONS, useToast } from '../useToast';
+const setup = () => {
+    const utils = renderHook(() => useToast({
+        defaultOptions: DEFAULT_OPTIONS
+    }));
+    return {
+        ...utils
+    };
+};
+describe('test useToast hook', () => {
+    it('returns defaults', () => {
+        const { result } = setup();
+        const { isVisible, data, options, show, hide } = result.current;
+        expect(isVisible).toBe(false);
+        expect(data).toEqual(DEFAULT_DATA);
+        expect(options).toEqual(DEFAULT_OPTIONS);
+        expect(show).toBeDefined();
+        expect(hide).toBeDefined();
+    });
+    it('set isVisible: true when show is called', () => {
+        const { result } = setup();
+        act(() => {
+            result.current.show({
+                text1: 'test'
+            });
+        });
+        expect(result.current.isVisible).toBe(true);
+        expect(result.current.data.text1).toBe('test');
+    });
+    it('calls onShow when Toast is shown', () => {
+        const { result } = setup();
+        const onShow = jest.fn();
+        act(() => {
+            result.current.show({
+                text1: 'test',
+                onShow
+            });
+        });
+        expect(result.current.isVisible).toBe(true);
+        expect(result.current.data.text1).toBe('test');
+        expect(onShow).toHaveBeenCalled();
+    });
+    it('set isVisible: false when hide is called', () => {
+        const { result } = setup();
+        act(() => {
+            result.current.show({
+                text1: 'test'
+            });
+        });
+        expect(result.current.isVisible).toBe(true);
+        expect(result.current.data.text1).toBe('test');
+        act(() => {
+            result.current.hide();
+        });
+        expect(result.current.isVisible).toBe(false);
+    });
+    it('calls onHide when Toast is shown', () => {
+        const { result } = setup();
+        const onHide = jest.fn();
+        act(() => {
+            result.current.show({
+                text1: 'test',
+                onHide
+            });
+        });
+        expect(result.current.isVisible).toBe(true);
+        expect(result.current.data.text1).toBe('test');
+        act(() => {
+            result.current.hide();
+        });
+        expect(result.current.isVisible).toBe(false);
+        expect(onHide).toHaveBeenCalled();
+    });
+    it('sets data values on show', () => {
+        const { result } = setup();
+        act(() => {
+            result.current.show({
+                text1: 'text1',
+                text2: 'text2'
+            });
+        });
+        expect(result.current.isVisible).toBe(true);
+        expect(result.current.data.text1).toBe('text1');
+        expect(result.current.data.text2).toBe('text2');
+    });
+    it('sets option values on show', () => {
+        const { result } = setup();
+        const options = {
+            type: 'info',
+            position: 'bottom',
+            autoHide: false,
+            visibilityTime: 20,
+            topOffset: 120,
+            bottomOffset: 130,
+            keyboardOffset: 5,
+            onShow: jest.fn(),
+            onHide: jest.fn(),
+            onPress: jest.fn(),
+            props: {
+                foo: 'bar'
+            }
+        };
+        act(() => {
+            result.current.show({
+                text1: 'test',
+                ...options
+            });
+        });
+        expect(result.current.isVisible).toBe(true);
+        expect(result.current.options).toEqual(options);
+    });
+    it('automatically hides when autoHide: true', () => {
+        jest.useFakeTimers();
+        const { result } = setup();
+        const onHide = jest.fn();
+        act(() => {
+            result.current.show({
+                text1: 'test',
+                autoHide: true,
+                onHide
+            });
+        });
+        expect(result.current.isVisible).toBe(true);
+        act(() => {
+            jest.runAllTimers();
+        });
+        expect(result.current.isVisible).toBe(false);
+        expect(onHide).toHaveBeenCalled();
+    });
+    it('shows using only text2', () => {
+        const { result } = setup();
+        act(() => {
+            result.current.show({
+                text2: 'text2'
+            });
+        });
+        expect(result.current.isVisible).toBe(true);
+        expect(result.current.data.text2).toBe('text2');
+    });
+});

package/lib/src/components/AnimatedContainer.js

@@ -40,7 +40,7 @@ export function animatedValueFor(gesture, position, damping) {
 export function AnimatedContainer({ children, isVisible, position, topOffset, bottomOffset, keyboardOffset, onHide, onRestorePosition = noop }) {
     const { log } = useLogger();
     const { computeViewDimensions, height } = useViewDimensions();
-    const { animatedValue, animate, animationStyles } = useSlideAnimation({
+    const { animatedValue, animate, defaultStyles, animationStyles } = useSlideAnimation({
         position,
         height,
         topOffset,
@@ -72,7 +72,7 @@ export function AnimatedContainer({ children, isVisible, position, topOffset, bo
         const newAnimationValue = isVisible ? 1 : 0;
         animate(newAnimationValue);
     }, [animate, isVisible]);
-    return (<Animated.View testID={getTestId('AnimatedContainer')} onLayout={computeViewDimensions} style={[styles.base, styles[position], animationStyles]} 
+    return (<Animated.View testID={getTestId('AnimatedContainer')} onLayout={computeViewDimensions} style={[styles.base, styles[position], defaultStyles, 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='box-none' {...panResponder.panHandlers}>

package/lib/src/components/BaseToast.js

@@ -7,10 +7,10 @@ export function BaseToast({ text1, text2, onPress, activeOpacity, style, touchab
     return (<Touchable testID={getTestId('TouchableContainer')} onPress={onPress} activeOpacity={activeOpacity} style={[styles.base, styles.leadingBorder, style]} {...touchableContainerProps}>
       {renderLeadingIcon && renderLeadingIcon()}
       <View testID={getTestId('ContentContainer')} style={[styles.contentContainer, contentContainerStyle]} {...contentContainerProps}>
-        {text1 && text1.length > 0 && (<Text testID={getTestId('Text1')} style={[styles.text1, text1Style]} numberOfLines={text1NumberOfLines} ellipsizeMode='tail' {...text1Props}>
+        {(text1?.length ?? 0) > 0 && (<Text testID={getTestId('Text1')} style={[styles.text1, text1Style]} numberOfLines={text1NumberOfLines} ellipsizeMode='tail' {...text1Props}>
             {text1}
           </Text>)}
-        {text2 && text2?.length > 0 && (<Text testID={getTestId('Text2')} style={[styles.text2, text2Style]} numberOfLines={text2NumberOfLines} ellipsizeMode='tail' {...text2Props}>
+        {(text2?.length ?? 0) > 0 && (<Text testID={getTestId('Text2')} style={[styles.text2, text2Style]} numberOfLines={text2NumberOfLines} ellipsizeMode='tail' {...text2Props}>
             {text2}
           </Text>)}
       </View>

package/lib/src/components/__tests__/AnimatedContainer.test.d.ts

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