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

package/lib/src/hooks/__tests__/useSlideAnimation.test.js

@@ -0,0 +1,88 @@
+/* eslint-env jest */
+import { Animated } from 'react-native';
+import { renderHook } from '~/__helpers__/testing-library/react-hooks';
+import { translateYOutputRangeFor, useSlideAnimation } from '../useSlideAnimation';
+const defaultOffsets = {
+    topOffset: 40,
+    bottomOffset: 60,
+    keyboardOffset: 5
+};
+const setup = (props) => {
+    const utils = renderHook(() => useSlideAnimation({
+        position: 'top',
+        height: 20,
+        ...defaultOffsets,
+        ...props
+    }));
+    return {
+        ...utils
+    };
+};
+describe('test useSlideAnimation hook', () => {
+    it('returns defaults', () => {
+        const { result } = setup();
+        const { animatedValue, animate, animationStyles } = result.current;
+        expect(animatedValue.current).toBeDefined();
+        expect(animate).toBeDefined();
+        expect(animationStyles.opacity).toBeDefined();
+        expect(animationStyles.transform).toBeDefined();
+    });
+    it('animates to a new value', async () => {
+        const spy = jest.spyOn(Animated, 'spring').mockImplementation(() => ({
+            start: jest.fn(),
+            stop: jest.fn(),
+            reset: jest.fn()
+        }));
+        const { result } = setup();
+        result.current.animate(1);
+        expect(spy).toHaveBeenCalled();
+    });
+    it.each([
+        ['top', -40],
+        ['bottom', 40]
+    ])('returns default styles for position: %s', (position, translateY) => {
+        const { result } = setup({
+            position
+        });
+        expect(result.current.defaultStyles).toEqual({
+            transform: [
+                {
+                    translateY
+                }
+            ]
+        });
+    });
+});
+describe('test translateYOutputRangeFor function', () => {
+    it('returns output range for position: top', () => {
+        expect(translateYOutputRangeFor({
+            position: 'top',
+            height: 20,
+            keyboardHeight: 0,
+            ...defaultOffsets
+        })).toEqual([-40, 40]);
+    });
+    it('returns output range for position: bottom', () => {
+        expect(translateYOutputRangeFor({
+            position: 'bottom',
+            height: 20,
+            keyboardHeight: 0,
+            ...defaultOffsets
+        })).toEqual([40, -60]);
+    });
+    it('returns output range for position: bottom, with keyboard offset', () => {
+        expect(translateYOutputRangeFor({
+            position: 'bottom',
+            height: 20,
+            keyboardHeight: 400,
+            ...defaultOffsets
+        })).toEqual([40, -405]);
+    });
+    it('throws if position is not supported', () => {
+        expect(() => translateYOutputRangeFor({
+            // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+            // @ts-ignore
+            position: 'left'
+        })).toThrow(new Error(`Position 'left' not supported`));
+    });
+});

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

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

package/lib/src/hooks/__tests__/useTimeout.test.js

@@ -0,0 +1,54 @@
+/* eslint-env jest */
+import { act, renderHook } from '~/__helpers__/testing-library/react-hooks';
+import { useTimeout } from '../useTimeout';
+const setup = () => {
+    const cb = jest.fn();
+    const utils = renderHook(() => useTimeout(cb));
+    return {
+        ...utils,
+        cb
+    };
+};
+describe('test useTimeout hook', () => {
+    beforeAll(() => {
+        jest.useFakeTimers();
+    });
+    it('sets timeout', () => {
+        const { cb, result } = setup();
+        act(() => {
+            result.current.startTimer();
+        });
+        expect(cb).not.toHaveBeenCalled();
+        act(() => {
+            jest.runAllTimers();
+        });
+        expect(cb).toHaveBeenCalled();
+    });
+    it('clears timeout before running', () => {
+        const { cb, result } = setup();
+        act(() => {
+            result.current.startTimer();
+        });
+        expect(cb).not.toHaveBeenCalled();
+        act(() => {
+            result.current.clearTimer();
+        });
+        expect(cb).not.toHaveBeenCalled();
+        act(() => {
+            jest.runAllTimers();
+        });
+        expect(cb).not.toHaveBeenCalled();
+    });
+    it('clears timeout when unmounting', () => {
+        const { cb, result, unmount } = setup();
+        act(() => {
+            result.current.startTimer();
+        });
+        expect(cb).not.toHaveBeenCalled();
+        act(() => {
+            unmount();
+            jest.runAllTimers();
+        });
+        expect(cb).not.toHaveBeenCalled();
+    });
+});

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

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

package/lib/src/hooks/__tests__/useViewDimensions.test.js

@@ -0,0 +1,51 @@
+/* eslint-env jest */
+import { act } from 'react-test-renderer';
+import { renderHook } from '~/__helpers__/testing-library/react-hooks';
+import { useViewDimensions } from '../useViewDimensions';
+const setup = (offsets) => {
+    const layoutChangeEventMock = {
+        nativeEvent: {
+            layout: {
+                height: 250,
+                width: 320
+            }
+        }
+    };
+    const utils = renderHook(() => useViewDimensions(offsets));
+    return {
+        ...utils,
+        layoutChangeEventMock
+    };
+};
+describe('test useViewDimensions hook', () => {
+    it('computes dimensions correctly', () => {
+        const { result, layoutChangeEventMock } = setup();
+        const { computeViewDimensions } = result.current;
+        act(() => {
+            computeViewDimensions(layoutChangeEventMock);
+        });
+        expect(result.current.height).toBe(250);
+        expect(result.current.width).toBe(320);
+    });
+    it('computes dimensions with offsets correctly', () => {
+        const offsets = {
+            heightOffset: -40,
+            widthOffset: 120
+        };
+        const { result, layoutChangeEventMock } = setup(offsets);
+        const { computeViewDimensions } = result.current;
+        act(() => {
+            computeViewDimensions(layoutChangeEventMock);
+        });
+        expect(result.current.height).toBe(250 + offsets.heightOffset);
+        expect(result.current.width).toBe(320 + offsets.widthOffset);
+    });
+    it('falls back to 0 when View dimensions are missing', () => {
+        const { result } = setup();
+        act(() => {
+            result.current.computeViewDimensions({});
+        });
+        expect(result.current.height).toBe(0);
+        expect(result.current.width).toBe(0);
+    });
+});

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

@@ -1,7 +1,7 @@
 import React from 'react';
 import { Animated } from 'react-native';
 import { ToastPosition } from '../types';
-declare type UseSlideAnimationParams = {
+export declare type UseSlideAnimationParams = {
     position: ToastPosition;
     height: number;
     topOffset: number;
@@ -14,6 +14,11 @@ export declare function translateYOutputRangeFor({ position, height, topOffset,
 export declare function useSlideAnimation({ position, height, topOffset, bottomOffset, keyboardOffset }: UseSlideAnimationParams): {
     animatedValue: React.MutableRefObject<Animated.Value>;
     animate: (toValue: number) => void;
+    defaultStyles: {
+        transform: {
+            translateY: number;
+        }[];
+    };
     animationStyles: {
         opacity: Animated.AnimatedInterpolation;
         transform: {
@@ -21,4 +26,3 @@ export declare function useSlideAnimation({ position, height, topOffset, bottomO
         }[];
     };
 };
-export {};

package/lib/src/hooks/useSlideAnimation.js

@@ -1,26 +1,43 @@
 import React from 'react';
-import { Animated, Platform } from 'react-native';
-import { additiveInverseArray } from '../utils/array';
+import { Animated } from 'react-native';
+import { useEnvironmentContext } from '../contexts';
 import { useKeyboard } from './useKeyboard';
+const startPointFor = (position, height) => {
+    const value = height * 2;
+    if (position === 'top') {
+        return -value;
+    }
+    return value;
+};
 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;
+    const startPoint = startPointFor(position, height);
+    switch (position) {
+        case 'bottom': {
+            const keyboardAwareOffset = keyboardHeight + keyboardOffset;
+            const range = [startPoint, -Math.max(bottomOffset, keyboardAwareOffset)];
+            return range;
+        }
+        case 'top': {
+            const keyboardAwareOffset = 0;
+            const range = [startPoint, Math.max(topOffset, keyboardAwareOffset)];
+            return range;
+        }
+        default:
+            throw new Error(`Position '${position}' not supported`);
+    }
 }
-const useNativeDriver = Platform.select({ native: true, default: false });
 export function useSlideAnimation({ position, height, topOffset, bottomOffset, keyboardOffset }) {
+    const { useNativeDriver } = useEnvironmentContext();
     const animatedValue = React.useRef(new Animated.Value(0));
     const { keyboardHeight } = useKeyboard();
     const animate = React.useCallback((toValue) => {
         Animated.spring(animatedValue.current, {
             toValue,
-            useNativeDriver,
+            useNativeDriver: !!useNativeDriver,
             friction: 8
         }).start();
-    }, []);
-    const translateY = animatedValue.current.interpolate({
+    }, [useNativeDriver]);
+    const translateY = React.useMemo(() => animatedValue.current.interpolate({
         inputRange: [0, 1],
         outputRange: translateYOutputRangeFor({
             position,
@@ -30,14 +47,22 @@ export function useSlideAnimation({ position, height, topOffset, bottomOffset, k
             keyboardHeight,
             keyboardOffset
         })
-    });
+    }), [position, height, topOffset, bottomOffset, keyboardHeight, keyboardOffset]);
     const opacity = animatedValue.current.interpolate({
         inputRange: [0, 0.7, 1],
         outputRange: [0, 1, 1]
     });
+    const defaultStyles = {
+        transform: [
+            {
+                translateY: startPointFor(position, height)
+            }
+        ]
+    };
     return {
         animatedValue,
         animate,
+        defaultStyles,
         animationStyles: {
             opacity,
             transform: [

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

@@ -154,6 +154,15 @@ export declare type ToastProps = {
      * Default value: `10`
      */
     keyboardOffset?: number;
+    /**
+     * Enable / disable native driver for the slide animation.
+     *
+     * Default:
+     *  - `true` on iOS
+     *  - `false` on Android (fixes [issue #300](https://github.com/calintamas/react-native-toast-message/issues/300))
+     *  - `false` on Web (fixes [issue #311](https://github.com/calintamas/react-native-toast-message/issues/311))
+     */
+    useNativeDriver?: boolean;
     /**
      * Called when any Toast is shown
      */

package/lib/src/utils/__tests__/number.test.d.ts

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

package/lib/src/utils/__tests__/number.test.js

@@ -0,0 +1,15 @@
+/* eslint-env jest */
+import { bound, lowerBound, upperBound } from '../number';
+describe('test bound functions', () => {
+    it('ensures lower bound', () => {
+        expect(lowerBound(10, 2)).toBe(10);
+        expect(lowerBound(0, 2)).toBe(2);
+    });
+    it('ensures upper bound', () => {
+        expect(upperBound(10, 2)).toBe(2);
+        expect(upperBound(0, 2)).toBe(0);
+    });
+    it('ensures both bounds', () => {
+        expect(bound(10, 2, 5)).toBe(5);
+    });
+});

package/lib/src/utils/__tests__/obj.test.d.ts

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

package/lib/src/utils/__tests__/obj.test.js

@@ -0,0 +1,21 @@
+/* eslint-env jest */
+import { mergeIfDefined } from '../obj';
+describe('test mergeIfDefined function', () => {
+    it('merges defined values from obj2', () => {
+        const obj1 = {
+            foo: 1,
+            bar: 2,
+            baz: 3
+        };
+        const obj2 = {
+            foo: null,
+            bar: 20,
+            baz: undefined
+        };
+        expect(mergeIfDefined(obj1, obj2)).toEqual({
+            foo: 1,
+            bar: 20,
+            baz: 3
+        });
+    });
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-toast-message",
-  "version": "2.1.3",
+  "version": "2.2.0-beta.1",
   "description": "Toast message component for React Native",
   "main": "./lib/index.js",
   "types": "./lib/index.d.ts",
@@ -22,27 +22,32 @@
     "lint": "./node_modules/.bin/eslint --fix",
     "lint-staged": "./node_modules/.bin/lint-staged",
     "test": "./node_modules/.bin/jest",
-    "yalc:push": "yarn build && yalc publish --push",
-    "quality": "yarn lint && tsc --noEmit"
+    "quality": "yarn lint && tsc --noEmit",
+    "yalc:watch": "rm -rf ./lib && tsc-watch --onCompilationComplete \"yalc publish --push\""
   },
   "author": "Calin Tamas <calintamas2@gmail.com>",
   "license": "MIT",
   "devDependencies": {
     "@babel/core": "^7.15.8",
     "@testing-library/jest-native": "^4.0.4",
-    "@testing-library/react-hooks": "^7.0.2",
+    "@testing-library/react-hooks": "^8.0.0",
     "@testing-library/react-native": "^9.0.0",
     "@types/jest": "^27.0.1",
-    "@types/react-native": "^0.67.3",
+    "@types/react-native": "^0.67.7",
+    "@types/react-test-renderer": "^18.0.0",
+    "babel-plugin-module-resolver": "^4.1.0",
     "eslint-config-backpacker-react-ts": "^0.3.0",
-    "husky": "^7.0.2",
-    "import-sort-style-module": "^6.0.0",
+    "husky": "^8.0.1",
+    "import-sort-style-module-alias": "^1.1.0",
     "jest": "^27.1.1",
-    "lint-staged": "^12.1.2",
-    "metro-react-native-babel-preset": "^0.69.0",
+    "lint-staged": "^13.0.0",
+    "metro-react-native-babel-preset": "^0.71.0",
     "prettier": "^2.4.1",
     "prettier-plugin-import-sort": "^0.0.7",
+    "react": "17.0.2",
+    "react-native": "0.68.2",
     "react-test-renderer": "^17.0.2",
+    "tsc-watch": "^5.0.3",
     "typescript": "^4.4.3",
     "yalc": "^1.0.0-pre.53"
   },
@@ -52,8 +57,13 @@
   },
   "importSort": {
     ".js, .jsx, .ts, .tsx": {
-      "style": "module",
-      "parser": "typescript"
+      "style": "module-alias",
+      "parser": "typescript",
+      "options": {
+        "alias": [
+          "~"
+        ]
+      }
     }
   },
   "lint-staged": {