fix: update to allow for more granular customizability

Author: nickdebaise

README.md

@@ -264,6 +264,11 @@ toast('Hello World', {
     text: TextStyle,
     indicator: ViewStyle
   },
+  animationType: 'timing' | 'spring',
+  animationConfig: {
+    flingPositionReturnDuration: number,
+    ...(springConfig | timingConfig)
+  },
 });
 ```
 
@@ -402,6 +407,63 @@ Every type has its own duration. You can overwrite them `duration` with the toas
 
 <br />
 
+### Animation Options
+You can now control the animation type and configuration for toasts.
+
+#### Props
+
+- **animationType** (`'spring' | 'timing'`, optional): Choose the animation type for toast appearance. By default, toasts positioned at the bottom use spring, and those at the top use timing.
+- **animationConfig** (object, optional): Customize the animation configuration for spring or timing.
+
+#### Example Usage
+
+```javascript
+import { toast } from 'react-native-toast';
+
+// Show a toast with custom animation settings
+toast.show('This is a toast message', {
+  animationType: 'spring',
+  animationConfig: {
+    duration: 500,
+    stiffness: 100,
+  },
+  position: 'top',
+});
+````
+
+### Global Animation Configuration/Type
+
+You can define a `globalAnimationType` and a `globalAnimationConfig` that sets the default animation configuration for all toasts. If an individual toast specifies its own `animationConfig`, it will override this global setting.
+
+#### Props
+
+- **globalAnimationConfig** (object, optional): Provides a default configuration for toast animations using either spring or timing options.
+
+#### Example Usage
+
+```javascript
+import { Toasts } from 'react-native-toast';
+
+// In your component
+<Toasts
+  globalAnimationType="spring"
+  globalAnimationConfig={{
+    duration: 500,
+    stiffness: 120,
+  }}
+/>
+
+// Or when showing a toast
+toast.show('This is a toast message', {
+  position: 'bottom',
+  animationType: 'spring',
+  animationConfig: {
+    duration: 400,
+    damping: 10,
+  },
+});
+```
+
 
 ### Dismiss toast programmatically
 

src/components/Toast.tsx

@@ -116,37 +116,32 @@ export const Toast: FC<Props> = ({
   }, []);
 
   const setPosition = useCallback(() => {
-    //control the position of the toast when rendering
-    //based on offset, visibility, keyboard, and toast height
-    let timingConfig: WithTimingConfig = {
-      duration: 300,
-    };
-    let springConfig: WithSpringConfig = {
-      stiffness: 80,
-    };
+    let timingConfig: WithTimingConfig = { duration: 300 };
+    let springConfig: WithSpringConfig = { stiffness: 80 };
+
     if (toast.animationConfig) {
       const {
         duration = 300,
         easing = Easing.inOut(Easing.quad),
         reduceMotion = ReduceMotion.System,
         ...spring
       } = toast.animationConfig;
-      timingConfig = {
-        duration,
-        easing,
-        reduceMotion,
-      };
+      timingConfig = { duration, easing, reduceMotion };
       springConfig = spring;
     }
 
+    const useSpringAnimation = toast.animationType === 'spring';
+
+    const animation = useSpringAnimation ? withSpring : withTiming;
+
     if (toast.position === ToastPosition.TOP) {
-      offsetY.value = withTiming(
+      offsetY.value = animation(
         toast.visible ? offset : startingY,
-        timingConfig
+        useSpringAnimation ? springConfig : timingConfig
       );
-      position.value = withTiming(
+      position.value = animation(
         toast.visible ? offset : startingY,
-        timingConfig
+        useSpringAnimation ? springConfig : timingConfig
       );
     } else {
       let kbHeight = keyboardVisible ? keyboardHeight : 0;
@@ -160,9 +155,14 @@ export const Toast: FC<Props> = ({
           24
         : startingY;
 
-      offsetY.value = withSpring(val, springConfig);
-
-      position.value = withSpring(val, springConfig);
+      offsetY.value = animation(
+        val,
+        useSpringAnimation ? springConfig : timingConfig
+      );
+      position.value = animation(
+        val,
+        useSpringAnimation ? springConfig : timingConfig
+      );
     }
   }, [
     offset,
@@ -177,6 +177,7 @@ export const Toast: FC<Props> = ({
     offsetY,
     extraInsets,
     toast.animationConfig,
+    toast.animationType,
   ]);
 
   const composedGesture = useMemo(() => {
@@ -215,19 +216,16 @@ export const Toast: FC<Props> = ({
   ]);
 
   useEffect(() => {
-    //set the toast height if it updates while rendered
     setToastHeight(toast?.height ? toast.height : DEFAULT_TOAST_HEIGHT);
   }, [toast.height]);
 
   useEffect(() => {
-    //set the toast width if it updates while rendered
     setToastWidth(
       toast?.width ? toast.width : width - 32 > 360 ? 360 : width - 32
     );
   }, [toast.width, width]);
 
   useEffect(() => {
-    //Control visibility of toast when rendering
     opacity.value = withTiming(toast.visible ? 1 : 0, {
       duration: toast?.animationConfig?.duration ?? 300,
     });

src/components/Toasts.tsx

@@ -4,7 +4,11 @@ import { TextStyle, View, ViewStyle } from 'react-native';
 import { Toast as T, useToaster } from '../headless';
 import { Toast } from './Toast';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
-import { ExtraInsets } from '../core/types';
+import {
+  ExtraInsets,
+  ToastAnimationConfig,
+  ToastAnimationType,
+} from '../core/types';
 import { useScreenReader } from 'src/core/utils';
 
 type Props = {
@@ -21,6 +25,8 @@ type Props = {
     text?: TextStyle;
     indicator?: ViewStyle;
   };
+  globalAnimationType?: ToastAnimationType;
+  globalAnimationConfig?: ToastAnimationConfig;
 };
 
 export const Toasts: FunctionComponent<Props> = ({
@@ -32,6 +38,8 @@ export const Toasts: FunctionComponent<Props> = ({
   providerKey = 'DEFAULT',
   preventScreenReaderFromHiding,
   defaultStyle,
+  globalAnimationType,
+  globalAnimationConfig,
 }) => {
   const { toasts, handlers } = useToaster({ providerKey });
   const { startPause, endPause } = handlers;
@@ -56,7 +64,11 @@ export const Toasts: FunctionComponent<Props> = ({
       {toasts.map((t) => (
         <Toast
           key={t.id}
-          toast={t}
+          toast={{
+            ...t,
+            animationType: t.animationType || globalAnimationType,
+            animationConfig: t.animationConfig || globalAnimationConfig,
+          }}
           startPause={startPause}
           endPause={endPause}
           updateHeight={handlers.updateHeight}

src/core/toast.ts

@@ -28,6 +28,8 @@ const createToast = (
   position: ToastPosition.TOP,
   providerKey: 'DEFAULT',
   isSwipeable: true,
+  animationType: opts?.animationType ?? 'timing',
+  animationConfig: opts?.animationConfig,
   ...opts,
   id: opts?.id || genId(),
 });

src/core/types.ts

@@ -1,8 +1,5 @@
 import type { TextStyle, ViewStyle } from 'react-native';
-import type {
-  WithTimingConfig,
-  WithSpringConfig,
-} from 'react-native-reanimated';
+import { WithSpringConfig, WithTimingConfig } from 'react-native-reanimated';
 
 export type ToastType = 'success' | 'error' | 'loading' | 'blank';
 export enum ToastPosition {
@@ -16,6 +13,12 @@ export interface IconTheme {
   primary: string;
   secondary: string;
 }
+export type ToastAnimationType = 'spring' | 'timing';
+
+export type ToastAnimationConfig = {
+  flingPositionReturnDuration?: number;
+} & WithSpringConfig &
+  WithTimingConfig;
 
 export type ValueFunction<TValue, TArg> = (arg: TArg) => TValue;
 export type ValueOrFunction<TValue, TArg> =
@@ -55,10 +58,8 @@ export interface Toast {
   customToast?: (toast: Toast) => JSX.Element;
   providerKey: string;
   isSwipeable?: boolean;
-  animationConfig?: {
-    flingPositionReturnDuration?: number;
-  } & WithSpringConfig &
-    WithTimingConfig;
+  animationType?: ToastAnimationType;
+  animationConfig?: ToastAnimationConfig;
 }
 
 export type ToastOptions = Partial<
@@ -77,6 +78,7 @@ export type ToastOptions = Partial<
     | 'providerKey'
     | 'isSwipeable'
     | 'animationConfig'
+    | 'animationType'
   >
 >;
 

src/index.tsx

@@ -1,4 +1,4 @@
 export { useToaster } from './core/use-toaster';
 export { Toasts } from './components';
 export * from './headless';
-export { ToastPosition } from './core/types';
+export { ToastPosition, ToastAnimationType } from './core/types';