fix: bottom bars weren't tappable with custom offset

gunnartorfis · Sep 8, 2024 · cc664a5 · cc664a5
1 parent af6cb40
commit cc664a5
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 16 deletions.
diff --git a/src/animations.ts b/src/animations.ts
@@ -7,40 +7,36 @@ import type { ToastPosition } from './types';
 export const ANIMATION_DURATION = 300;
 
 export const useToastLayoutAnimations = () => {
-  const { position, offset } = useToastContext();
+  const { position } = useToastContext();
 
   return React.useMemo(
     () => ({
       entering: () => {
         'worklet';
-        return getToastEntering({ position, offset });
+        return getToastEntering({ position });
       },
       exiting: () => {
         'worklet';
-        return getToastExiting({ position, offset });
+        return getToastExiting({ position });
       },
     }),
-    [offset, position]
+    [position]
   );
 };
 
 type GetToastAnimationParams = {
   position: ToastPosition;
-  offset: number;
 };
 
-export const getToastEntering = ({
-  position,
-  offset,
-}: GetToastAnimationParams) => {
+export const getToastEntering = ({ position }: GetToastAnimationParams) => {
   'worklet';
 
   const animations = {
     opacity: withTiming(1, { easing: easeOutCirc }),
     transform: [
       { scale: withTiming(1, { easing: easeOutCirc }) },
       {
-        translateY: withTiming(position === 'top-center' ? offset : -offset, {
+        translateY: withTiming(0, {
           easing: easeOutCirc,
         }),
       },
@@ -63,10 +59,7 @@ export const getToastEntering = ({
   };
 };
 
-export const getToastExiting = ({
-  position,
-  offset,
-}: GetToastAnimationParams) => {
+export const getToastExiting = ({ position }: GetToastAnimationParams) => {
   'worklet';
 
   const animations = {
@@ -84,7 +77,7 @@ export const getToastExiting = ({
     opacity: 1,
     transform: [
       {
-        translateY: position === 'top-center' ? offset : -offset,
+        translateY: 0,
       },
     ],
   };

diff --git a/src/toaster.tsx b/src/toaster.tsx
@@ -167,21 +167,28 @@ export const ToasterUI: React.FC<ToasterProps> = ({
 
   const insetValues = React.useMemo(() => {
     if (position === 'bottom-center') {
+      if (offset) {
+        return { bottom: offset };
+      }
+
       if (bottom > 0) {
         return { bottom };
       }
       return { bottom: 40 };
     }
 
     if (position === 'top-center') {
+      if (offset) {
+        return { top: offset };
+      }
       if (top > 0) {
         return { top };
       }
       return { top: 40 };
     }
 
     return {};
-  }, [position, bottom, top]);
+  }, [position, bottom, top, offset]);
 
   const onDismiss = React.useCallback<
     NonNullable<React.ComponentProps<typeof Toast>['onDismiss']>