diff --git a/src/components/Toast.tsx b/src/components/Toast.tsx index c598db6..d287361 100644 --- a/src/components/Toast.tsx +++ b/src/components/Toast.tsx @@ -10,11 +10,15 @@ import { ViewStyle, } from 'react-native'; import Animated, { + Easing, + ReduceMotion, runOnJS, useAnimatedStyle, useSharedValue, withSpring, + type WithSpringConfig, withTiming, + type WithTimingConfig, } from 'react-native-reanimated'; import { useSafeAreaInsets } from 'react-native-safe-area-context'; import { @@ -114,13 +118,36 @@ export const Toast: FC = ({ 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, + }; + if (toast.animationConfig) { + const { + duration = 300, + easing = Easing.inOut(Easing.quad), + reduceMotion = ReduceMotion.System, + ...spring + } = toast.animationConfig; + timingConfig = { + duration, + easing, + reduceMotion, + }; + springConfig = spring; + } + if (toast.position === ToastPosition.TOP) { - offsetY.value = withTiming(toast.visible ? offset : startingY, { - duration: toast?.animationConfig?.animationDuration ?? 300, - }); - position.value = withTiming(toast.visible ? offset : startingY, { - duration: toast?.animationConfig?.animationDuration ?? 300, - }); + offsetY.value = withTiming( + toast.visible ? offset : startingY, + timingConfig + ); + position.value = withTiming( + toast.visible ? offset : startingY, + timingConfig + ); } else { let kbHeight = keyboardVisible ? keyboardHeight : 0; const val = toast.visible @@ -133,13 +160,9 @@ export const Toast: FC = ({ 24 : startingY; - offsetY.value = withSpring(val, { - stiffness: toast?.animationConfig?.animationStiffness ?? 80, - }); + offsetY.value = withSpring(val, springConfig); - position.value = withSpring(val, { - stiffness: toast?.animationConfig?.animationStiffness ?? 80, - }); + position.value = withSpring(val, springConfig); } }, [ offset, @@ -206,7 +229,7 @@ export const Toast: FC = ({ useEffect(() => { //Control visibility of toast when rendering opacity.value = withTiming(toast.visible ? 1 : 0, { - duration: toast?.animationConfig?.animationDuration ?? 300, + duration: toast?.animationConfig?.duration ?? 300, }); }, [toast.visible, opacity, toast.animationConfig]); diff --git a/src/core/types.ts b/src/core/types.ts index 0b58003..bc6d0d6 100644 --- a/src/core/types.ts +++ b/src/core/types.ts @@ -1,4 +1,8 @@ import type { TextStyle, ViewStyle } from 'react-native'; +import type { + WithTimingConfig, + WithSpringConfig, +} from 'react-native-reanimated'; export type ToastType = 'success' | 'error' | 'loading' | 'blank'; export enum ToastPosition { @@ -53,9 +57,8 @@ export interface Toast { isSwipeable?: boolean; animationConfig?: { flingPositionReturnDuration?: number; - animationStiffness?: number; - animationDuration?: number; - }; + } & WithSpringConfig & + WithTimingConfig; } export type ToastOptions = Partial<