react-native-toast-message 2.3.3 → 2.4.0

package/README.md

@@ -20,8 +20,6 @@ Animated toast message component for React Native.
 
 ## Documentation
 
-> This is the documentation for `react-native-toast-message@v2`, which has a similar API to v1, but contains a few important changes. [Read the complete changelog](https://github.com/calintamas/react-native-toast-message/releases/tag/v2.0.0).
-
 - [Quick start](./docs/quick-start.md)
 - [API](./docs/api.md)
 - [Create custom layouts](./docs/custom-layouts.md)

package/lib/src/ToastUI.js

@@ -35,8 +35,8 @@ function renderComponent({ data, options, config, isVisible, show, hide }) {
 }
 export function ToastUI(props) {
     const { isVisible, options, hide } = props;
-    const { position, topOffset, bottomOffset, keyboardOffset, avoidKeyboard, swipeable } = options;
-    return (<AnimatedContainer isVisible={isVisible} position={position} topOffset={topOffset} bottomOffset={bottomOffset} keyboardOffset={keyboardOffset} avoidKeyboard={avoidKeyboard} swipeable={swipeable} onHide={hide}>
+    const { position, topOffset, bottomOffset, keyboardOffset, avoidKeyboard, swipeable, animationConfig } = options;
+    return (<AnimatedContainer isVisible={isVisible} position={position} topOffset={topOffset} bottomOffset={bottomOffset} keyboardOffset={keyboardOffset} avoidKeyboard={avoidKeyboard} swipeable={swipeable} animationConfig={animationConfig} onHide={hide}>
       {renderComponent(props)}
     </AnimatedContainer>);
 }

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

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { PanResponderGestureState } from 'react-native';
-import { ReactChildren, ToastPosition } from '../types';
+import { ReactChildren, ToastAnimationConfig, ToastPosition } from '../types';
 export declare type AnimatedContainerProps = {
     children: ReactChildren;
     isVisible: boolean;
@@ -10,6 +10,7 @@ export declare type AnimatedContainerProps = {
     bottomOffset: number;
     keyboardOffset: number;
     avoidKeyboard: boolean;
+    animationConfig?: ToastAnimationConfig;
     onHide: () => void;
     onRestorePosition?: () => void;
 };
@@ -21,4 +22,4 @@ export declare type AnimatedContainerProps = {
  */
 export declare function dampingFor(gesture: PanResponderGestureState, position: ToastPosition): number;
 export declare function animatedValueFor(gesture: PanResponderGestureState, position: ToastPosition, damping: number): number;
-export declare function AnimatedContainer({ children, isVisible, position, topOffset, bottomOffset, keyboardOffset, avoidKeyboard, onHide, onRestorePosition, swipeable }: AnimatedContainerProps): JSX.Element;
+export declare function AnimatedContainer({ children, isVisible, position, topOffset, bottomOffset, keyboardOffset, avoidKeyboard, animationConfig, onHide, onRestorePosition, swipeable }: AnimatedContainerProps): JSX.Element;

package/lib/src/components/AnimatedContainer.js

@@ -37,7 +37,7 @@ export function animatedValueFor(gesture, position, damping) {
             throw new Error(`Toast position: ${position} not implemented`);
     }
 }
-export function AnimatedContainer({ children, isVisible, position, topOffset, bottomOffset, keyboardOffset, avoidKeyboard, onHide, onRestorePosition = noop, swipeable }) {
+export function AnimatedContainer({ children, isVisible, position, topOffset, bottomOffset, keyboardOffset, avoidKeyboard, animationConfig, onHide, onRestorePosition = noop, swipeable }) {
     const { log } = useLogger();
     const { panning } = useGesture();
     const { computeViewDimensions, height } = useViewDimensions();
@@ -47,7 +47,8 @@ export function AnimatedContainer({ children, isVisible, position, topOffset, bo
         topOffset,
         bottomOffset,
         keyboardOffset,
-        avoidKeyboard
+        avoidKeyboard,
+        animationConfig
     });
     const disable = !swipeable || !isVisible;
     const onStart = React.useCallback(() => {

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Animated } from 'react-native';
-import { ToastPosition } from '../types';
+import { ToastAnimationConfig, ToastPosition } from '../types';
 declare type UseSlideAnimationParams = {
     position: ToastPosition;
     height: number;
@@ -8,11 +8,12 @@ declare type UseSlideAnimationParams = {
     bottomOffset: number;
     keyboardOffset: number;
     avoidKeyboard: boolean;
+    animationConfig?: ToastAnimationConfig;
 };
 export declare function translateYOutputRangeFor({ position, height, topOffset, bottomOffset, keyboardHeight, keyboardOffset, avoidKeyboard }: UseSlideAnimationParams & {
     keyboardHeight: number;
 }): number[];
-export declare function useSlideAnimation({ position, height, topOffset, bottomOffset, keyboardOffset, avoidKeyboard }: UseSlideAnimationParams): {
+export declare function useSlideAnimation({ position, height, topOffset, bottomOffset, keyboardOffset, avoidKeyboard, animationConfig }: UseSlideAnimationParams): {
     animatedValue: React.MutableRefObject<Animated.Value>;
     animate: (toValue: number) => void;
     animationStyles: {

package/lib/src/hooks/useSlideAnimation.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import { Animated, Platform } from 'react-native';
 import { additiveInverseArray } from '../utils/array';
+import { resolveAnimationConfig } from '../utils/animationConfig';
 import { useKeyboard } from './useKeyboard';
 export function translateYOutputRangeFor({ position, height, topOffset, bottomOffset, keyboardHeight, keyboardOffset, avoidKeyboard }) {
     const offset = position === 'bottom' ? bottomOffset : topOffset;
@@ -13,16 +14,28 @@ const useNativeDriver = Platform.select({
     ios: true,
     default: false
 });
-export function useSlideAnimation({ position, height, topOffset, bottomOffset, keyboardOffset, avoidKeyboard }) {
+export function useSlideAnimation({ position, height, topOffset, bottomOffset, keyboardOffset, avoidKeyboard, animationConfig }) {
     const animatedValue = React.useRef(new Animated.Value(0));
     const { keyboardHeight } = useKeyboard();
     const animate = React.useCallback((toValue) => {
-        Animated.spring(animatedValue.current, {
-            toValue,
-            useNativeDriver,
-            friction: 8
-        }).start();
-    }, []);
+        const resolved = resolveAnimationConfig(animationConfig, toValue === 1 ? 'enter' : 'exit');
+        if (resolved.type === 'timing') {
+            const { type: _type, ...timingConfig } = resolved;
+            Animated.timing(animatedValue.current, {
+                ...timingConfig,
+                toValue,
+                useNativeDriver
+            }).start();
+        }
+        else {
+            const { type: _type, ...springConfig } = resolved;
+            Animated.spring(animatedValue.current, {
+                ...springConfig,
+                toValue,
+                useNativeDriver
+            }).start();
+        }
+    }, [animationConfig]);
     const translateY = React.useMemo(() => animatedValue.current.interpolate({
         inputRange: [0, 1],
         outputRange: translateYOutputRangeFor({

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

@@ -1,8 +1,19 @@
 import React from 'react';
-import { StyleProp, TextProps, TextStyle, TouchableOpacityProps, ViewProps, ViewStyle } from 'react-native';
+import { Animated, StyleProp, TextProps, TextStyle, TouchableOpacityProps, ViewProps, ViewStyle } from 'react-native';
 export declare type ReactChildren = React.ReactNode;
 export declare type ToastType = 'success' | 'error' | 'info' | (string & {});
 export declare type ToastPosition = 'top' | 'bottom';
+export declare type ToastSpringAnimationConfig = {
+    type: 'spring';
+} & Omit<Parameters<typeof Animated.spring>[1], 'useNativeDriver' | 'toValue'>;
+export declare type ToastTimingAnimationConfig = {
+    type: 'timing';
+} & Omit<Parameters<typeof Animated.timing>[1], 'useNativeDriver' | 'toValue'>;
+export declare type ToastSingleAnimationConfig = ToastSpringAnimationConfig | ToastTimingAnimationConfig;
+export declare type ToastAnimationConfig = ToastSingleAnimationConfig | {
+    enter?: ToastSingleAnimationConfig;
+    exit?: ToastSingleAnimationConfig;
+};
 export declare type ToastOptions = {
     /**
      * Toast type.
@@ -64,9 +75,9 @@ export declare type ToastOptions = {
      */
     avoidKeyboard?: boolean;
     /**
-     * Called when Toast is shown
+     * Called when Toast is shown, receives the show params
      */
-    onShow?: () => void;
+    onShow?: (params: ToastShowParams) => void;
     /**
      * Called when Toast hides
      */
@@ -81,6 +92,15 @@ export declare type ToastOptions = {
      * on the Toast instance) that uses the `props` parameter
      */
     props?: any;
+    /**
+     * Configures the enter/exit animation.
+     *
+     * Pass a single `{ type: 'spring' | 'timing', ...config }` to use the same animation
+     * for both phases, or `{ enter, exit }` to configure them separately.
+     *
+     * Default: `{ type: 'spring', friction: 8 }`
+     */
+    animationConfig?: ToastAnimationConfig;
 };
 export declare type ToastData = {
     text1?: string;
@@ -187,9 +207,9 @@ export declare type ToastProps = {
      */
     avoidKeyboard?: boolean;
     /**
-     * Called when any Toast is shown
+     * Called when any Toast is shown, receives the show params
      */
-    onShow?: () => void;
+    onShow?: (params: ToastShowParams) => void;
     /**
      * Called when any Toast hides
      */
@@ -198,4 +218,11 @@ export declare type ToastProps = {
      * Called on any Toast press
      */
     onPress?: () => void;
+    /**
+     * Default enter/exit animation configuration applied to every Toast.
+     * Can be overridden per-call via `Toast.show({ animationConfig })`.
+     *
+     * Default: `{ type: 'spring', friction: 8 }`
+     */
+    animationConfig?: ToastAnimationConfig;
 };

package/lib/src/useToast.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import { useLogger, useGesture } from './contexts';
 import { useTimeout } from './hooks';
+import { DEFAULT_ANIMATION_CONFIG } from './utils/animationConfig';
 import { noop } from './utils/func';
 import { mergeIfDefined } from './utils/obj';
 export const DEFAULT_DATA = {
@@ -22,7 +23,8 @@ export const DEFAULT_OPTIONS = {
     onShow: noop,
     onHide: noop,
     onPress: noop,
-    props: {}
+    props: {},
+    animationConfig: DEFAULT_ANIMATION_CONFIG
 };
 export function useToast({ defaultOptions }) {
     const { log } = useLogger();
@@ -50,7 +52,7 @@ export function useToast({ defaultOptions }) {
     }, [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, text1Style = initialOptions.text1Style, text2Style = initialOptions.text2Style, position = initialOptions.position, autoHide = initialOptions.autoHide, visibilityTime = initialOptions.visibilityTime, topOffset = initialOptions.topOffset, bottomOffset = initialOptions.bottomOffset, keyboardOffset = initialOptions.keyboardOffset, avoidKeyboard = initialOptions.avoidKeyboard, onShow = initialOptions.onShow, onHide = initialOptions.onHide, onPress = initialOptions.onPress, swipeable = initialOptions.swipeable, props = initialOptions.props } = params;
+        const { text1 = DEFAULT_DATA.text1, text2 = DEFAULT_DATA.text2, type = initialOptions.type, text1Style = initialOptions.text1Style, text2Style = initialOptions.text2Style, position = initialOptions.position, autoHide = initialOptions.autoHide, visibilityTime = initialOptions.visibilityTime, topOffset = initialOptions.topOffset, bottomOffset = initialOptions.bottomOffset, keyboardOffset = initialOptions.keyboardOffset, avoidKeyboard = initialOptions.avoidKeyboard, onShow = initialOptions.onShow, onHide = initialOptions.onHide, onPress = initialOptions.onPress, swipeable = initialOptions.swipeable, props = initialOptions.props, animationConfig = initialOptions.animationConfig } = params;
         setData({
             text1,
             text2
@@ -70,12 +72,13 @@ export function useToast({ defaultOptions }) {
             onHide,
             onPress,
             swipeable,
-            props
+            props,
+            animationConfig
         }));
         // TODO: validate input
         // TODO: use a queue when Toast is already visible
         setIsVisible(true);
-        onShow();
+        onShow(params);
     }, [initialOptions, log]);
     React.useEffect(() => {
         const { autoHide } = options;

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

@@ -0,0 +1,4 @@
+import { ToastAnimationConfig, ToastSingleAnimationConfig, ToastSpringAnimationConfig } from '../types';
+export declare const DEFAULT_ANIMATION_CONFIG: ToastSpringAnimationConfig;
+export declare type AnimationPhase = 'enter' | 'exit';
+export declare function resolveAnimationConfig(config: ToastAnimationConfig | undefined, phase: AnimationPhase): ToastSingleAnimationConfig;

package/lib/src/utils/animationConfig.js

@@ -0,0 +1,13 @@
+export const DEFAULT_ANIMATION_CONFIG = {
+    type: 'spring',
+    friction: 8
+};
+export function resolveAnimationConfig(config, phase) {
+    if (!config) {
+        return DEFAULT_ANIMATION_CONFIG;
+    }
+    if ('type' in config) {
+        return config;
+    }
+    return config[phase] ?? DEFAULT_ANIMATION_CONFIG;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-toast-message",
-  "version": "2.3.3",
+  "version": "2.4.0",
   "description": "Toast message component for React Native",
   "main": "./lib/index.js",
   "types": "./lib/index.d.ts",
@@ -17,13 +17,14 @@
   ],
   "scripts": {
     "prepare": "husky install",
+    "setup": "./scripts/setup.sh",
+    "bump": "./scripts/bump.sh",
     "build": "rm -rf ./lib && tsc",
     "prettier": "./node_modules/.bin/prettier --write",
-    "lint": "./node_modules/.bin/eslint --fix",
-    "lint-staged": "./node_modules/.bin/lint-staged",
+    "lint": "./node_modules/.bin/eslint --fix --cache",
     "test": "./node_modules/.bin/jest",
-    "yalc:push": "yarn build && yalc publish --push",
-    "quality": "yarn lint && tsc --noEmit"
+    "type-check": "tsc --build --incremental",
+    "quality": "yarn type-check && yarn lint && yarn test --coverage"
   },
   "author": "Calin Tamas <calintamas2@gmail.com>",
   "license": "MIT",
@@ -43,8 +44,7 @@
     "prettier": "^2.4.1",
     "prettier-plugin-import-sort": "^0.0.7",
     "react-test-renderer": "^17.0.2",
-    "typescript": "^4.4.3",
-    "yalc": "^1.0.0-pre.53"
+    "typescript": "^4.4.3"
   },
   "peerDependencies": {
     "react": "*",