sonner-native/src/use-toast-position.ts

An opinionated toast component for React Native. A port of @emilkowalski's sonner.

import { useMemo } from 'react';
import { useDerivedValue, withTiming } from 'react-native-reanimated';
import { STACKING_ANIMATION_DURATION } from './animations';
import { easeOutQuartFn } from './easings';
import { calculateToastPosition } from './position-utils';
import type { ToastPosition } from './types';

export const useToastPosition = ({
  id,
  index,
  numberOfToasts,
  enableStacking,
  position,
  allToastHeights,
  gap,
  orderedToastIds,
  isExpanded,
  stackGap,
  toastHeightsVersion,
}: {
  id: string | number;
  index: number;
  numberOfToasts: number;
  enableStacking: boolean;
  position: ToastPosition;
  allToastHeights: Record<string | number, number>;
  gap: number;
  orderedToastIds: Array<string | number>;
  isExpanded: boolean;
  stackGap: number;
  toastHeightsVersion: number;
}) => {
  const orderedIdsKey = useMemo(
    () => orderedToastIds.join(','),
    [orderedToastIds]
  );

  const yPosition = useDerivedValue(() => {
    'worklet';

    const calculatedPosition = calculateToastPosition({
      index,
      numberOfToasts,
      enableStacking,
      position,
      allToastHeights,
      gap,
      orderedToastIds,
      isExpanded,
      stackGap,
    });

    return withTiming(calculatedPosition, {
      duration: STACKING_ANIMATION_DURATION,
      easing: easeOutQuartFn,
    });
  }, [
    id,
    index,
    numberOfToasts,
    enableStacking,
    position,
    toastHeightsVersion,
    gap,
    orderedIdsKey,
    isExpanded,
    stackGap,
  ]);

  return yPosition;
};