react-native-bread 0.6.1 → 0.7.0

package/README.md

@@ -16,9 +16,10 @@ An extremely lightweight, opinionated toast component for React Native.
 - Promise handling with automatic loading → success/error states
 - Toast stacking with configurable limits
 - **Works above modals** - automatic on iOS, simple setup on Android
-- **RTL support** - perfect for Arabic and other RTL languages
+- **RTL support** - code-level RTL for when you're not using native RTL (`I18nManager`)
 - Completely customizable - colors, icons, styles, animations
 - Full Expo compatibility
+- **React Compiler compatible** - uses `.set()` / `.value` API for shared values
 
 
 
@@ -181,7 +182,7 @@ Customize all toasts globally via the `config` prop on `<BreadLoaf />`:
 <BreadLoaf
   config={{
     position: 'bottom',
-    rtl: false, // Enable for RTL languages
+    rtl: false, // Code-level RTL — not needed if using native RTL (I18nManager)
     stacking: true,
     maxStack: 3,
     defaultDuration: 4000,

package/lib/commonjs/toast-icons.js

@@ -61,10 +61,10 @@ const AnimatedIcon = exports.AnimatedIcon = /*#__PURE__*/(0, _react.memo)(({
 }) => {
   const progress = (0, _reactNativeReanimated.useSharedValue)(0);
   (0, _react.useEffect)(() => {
-    progress.value = (0, _reactNativeReanimated.withTiming)(1, {
+    progress.set((0, _reactNativeReanimated.withTiming)(1, {
       duration: _constants.ICON_ANIMATION_DURATION,
       easing: _reactNativeReanimated.Easing.out(_reactNativeReanimated.Easing.back(1.5))
-    });
+    }));
   }, [progress]);
   const style = (0, _reactNativeReanimated.useAnimatedStyle)(() => ({
     opacity: progress.value,

package/lib/commonjs/toast.js

@@ -28,69 +28,69 @@ const ToastContainer = () => {
     theme,
     toastsWithIndex,
     isBottom,
-    topToastRef,
-    isBottomRef,
-    isDismissibleRef
+    topToastMutable,
+    isBottomMutable,
+    isDismissibleMutable
   } = (0, _useToastState.useToastState)();
   const shouldDismiss = (0, _reactNativeReanimated.useSharedValue)(false);
-  const panGesture = (0, _react.useMemo)(() => _reactNativeGestureHandler.Gesture.Pan().onStart(() => {
+  const panGesture = _reactNativeGestureHandler.Gesture.Pan().onStart(() => {
     "worklet";
 
     shouldDismiss.set(false);
   }).onUpdate(event => {
     "worklet";
 
-    if (!isDismissibleRef.current.value) return;
-    const ref = topToastRef.current.value;
+    if (!isDismissibleMutable.value) return;
+    const ref = topToastMutable.value;
     if (!ref) return;
     const {
       slot
     } = ref;
-    const bottom = isBottomRef.current.value;
+    const bottom = isBottomMutable.value;
     const rawY = event.translationY;
     const dismissDrag = bottom ? rawY : -rawY;
     const resistDrag = bottom ? -rawY : rawY;
     if (dismissDrag > 0) {
       const clampedY = bottom ? Math.min(rawY, _constants.MAX_DRAG_CLAMP) : Math.max(rawY, -_constants.MAX_DRAG_CLAMP);
-      slot.translationY.value = clampedY;
+      slot.translationY.set(clampedY);
       const shouldTriggerDismiss = dismissDrag > _constants.DISMISS_THRESHOLD || (bottom ? event.velocityY > _constants.DISMISS_VELOCITY_THRESHOLD : event.velocityY < -_constants.DISMISS_VELOCITY_THRESHOLD);
       shouldDismiss.set(shouldTriggerDismiss);
     } else {
       const exponentialDrag = _constants.MAX_DRAG_RESISTANCE * (1 - Math.exp(-resistDrag / 250));
-      slot.translationY.value = bottom ? -Math.min(exponentialDrag, _constants.MAX_DRAG_RESISTANCE) : Math.min(exponentialDrag, _constants.MAX_DRAG_RESISTANCE);
-      shouldDismiss.value = false;
+      slot.translationY.set(bottom ? -Math.min(exponentialDrag, _constants.MAX_DRAG_RESISTANCE) : Math.min(exponentialDrag, _constants.MAX_DRAG_RESISTANCE));
+      shouldDismiss.set(false);
     }
   }).onEnd(() => {
     "worklet";
 
-    if (!isDismissibleRef.current.value) return;
-    const ref = topToastRef.current.value;
+    if (!isDismissibleMutable.value) return;
+    const ref = topToastMutable.value;
     if (!ref) return;
     const {
       slot
     } = ref;
-    const bottom = isBottomRef.current.value;
+    const bottom = isBottomMutable.value;
     if (shouldDismiss.value) {
-      slot.progress.value = (0, _reactNativeReanimated.withTiming)(0, {
+      slot.progress.set((0, _reactNativeReanimated.withTiming)(0, {
         duration: _constants.EXIT_DURATION,
         easing: _constants.EASING
-      });
+      }));
       const exitOffset = bottom ? _constants.SWIPE_EXIT_OFFSET : -_constants.SWIPE_EXIT_OFFSET;
-      slot.translationY.value = (0, _reactNativeReanimated.withTiming)(slot.translationY.value + exitOffset, {
+      slot.translationY.set((0, _reactNativeReanimated.withTiming)(slot.translationY.value + exitOffset, {
         duration: _constants.EXIT_DURATION,
         easing: _constants.EASING
-      });
+      }));
       (0, _reactNativeWorklets.scheduleOnRN)(ref.dismiss);
     } else {
-      slot.translationY.value = (0, _reactNativeReanimated.withTiming)(0, {
+      slot.translationY.set((0, _reactNativeReanimated.withTiming)(0, {
         duration: _constants.SPRING_BACK_DURATION,
         easing: _constants.EASING
-      });
+      }));
     }
-  }), [shouldDismiss, isDismissibleRef, topToastRef, isBottomRef]);
+  });
   const registerTopToast = (0, _react.useCallback)(values => {
-    topToastRef.current.value = values;
-  }, [topToastRef]);
+    topToastMutable.set(values);
+  }, [topToastMutable]);
   if (visibleToasts.length === 0) return null;
   const inset = isBottom ? bottom : top;
   const positionStyle = isBottom ? {
@@ -137,13 +137,13 @@ const ToastItem = ({
 
   // biome-ignore lint/correctness/useExhaustiveDependencies: mount-only effect
   (0, _react.useEffect)(() => {
-    slot.progress.value = 0;
-    slot.translationY.value = 0;
-    slot.stackIndex.value = index;
-    slot.progress.value = (0, _reactNativeReanimated.withTiming)(1, {
+    slot.progress.set(0);
+    slot.translationY.set(0);
+    slot.stackIndex.set(index);
+    slot.progress.set((0, _reactNativeReanimated.withTiming)(1, {
       duration: _constants.ENTRY_DURATION,
       easing: _constants.EASING
-    });
+    }));
     const iconTimeout = setTimeout(() => setShowIcon(true), 50);
     return () => {
       clearTimeout(iconTimeout);
@@ -157,20 +157,20 @@ const ToastItem = ({
     let loadingTimeout = null;
     if (toast.isExiting && !tracker.wasExiting) {
       tracker.wasExiting = true;
-      slot.progress.value = (0, _reactNativeReanimated.withTiming)(0, {
+      slot.progress.set((0, _reactNativeReanimated.withTiming)(0, {
         duration: _constants.EXIT_DURATION,
         easing: _constants.EASING
-      });
-      slot.translationY.value = (0, _reactNativeReanimated.withTiming)(exitToY, {
+      }));
+      slot.translationY.set((0, _reactNativeReanimated.withTiming)(exitToY, {
         duration: _constants.EXIT_DURATION,
         easing: _constants.EASING
-      });
+      }));
     }
     if (tracker.initialized && index !== tracker.prevIndex) {
-      slot.stackIndex.value = (0, _reactNativeReanimated.withTiming)(index, {
+      slot.stackIndex.set((0, _reactNativeReanimated.withTiming)(index, {
         duration: _constants.STACK_TRANSITION_DURATION,
         easing: _constants.EASING
-      });
+      }));
     }
     tracker.prevIndex = index;
     tracker.initialized = true;

package/lib/commonjs/use-toast-state.js

@@ -10,9 +10,9 @@ var _toastStore = require("./toast-store.js");
 const useToastState = () => {
   const [visibleToasts, setVisibleToasts] = (0, _react.useState)([]);
   const [theme, setTheme] = (0, _react.useState)(() => _toastStore.toastStore.getTheme());
-  const topToastRef = (0, _react.useRef)((0, _reactNativeReanimated.makeMutable)(null));
-  const isBottomRef = (0, _react.useRef)((0, _reactNativeReanimated.makeMutable)(theme.position === "bottom"));
-  const isDismissibleRef = (0, _react.useRef)((0, _reactNativeReanimated.makeMutable)(true));
+  const [topToastMutable] = (0, _react.useState)(() => (0, _reactNativeReanimated.makeMutable)(null));
+  const [isBottomMutable] = (0, _react.useState)(() => (0, _reactNativeReanimated.makeMutable)(theme.position === "bottom"));
+  const [isDismissibleMutable] = (0, _react.useState)(() => (0, _reactNativeReanimated.makeMutable)(true));
   const isBottom = theme.position === "bottom";
   const topToast = visibleToasts.find(t => !t.isExiting);
   const isTopDismissible = topToast?.options?.dismissible ?? theme.dismissible;
@@ -21,8 +21,8 @@ const useToastState = () => {
     const initialTheme = _toastStore.toastStore.getTheme();
     setVisibleToasts(initialToasts);
     const initialTopToast = initialToasts.find(t => !t.isExiting);
-    isBottomRef.current.value = initialTheme.position === "bottom";
-    isDismissibleRef.current.value = initialTopToast?.options?.dismissible ?? initialTheme.dismissible;
+    isBottomMutable.set(initialTheme.position === "bottom");
+    isDismissibleMutable.set(initialTopToast?.options?.dismissible ?? initialTheme.dismissible);
     let pendingToasts = null;
     let rafId = null;
     const unsubscribe = _toastStore.toastStore.subscribe(state => {
@@ -38,13 +38,13 @@ const useToastState = () => {
           rafId = null;
           setTheme(prev => prev === currentTheme ? prev : currentTheme);
           const topToast = currentToasts.find(t => !t.isExiting);
-          isBottomRef.current.value = currentTheme.position === "bottom";
-          isDismissibleRef.current.value = topToast?.options?.dismissible ?? currentTheme.dismissible;
+          isBottomMutable.set(currentTheme.position === "bottom");
+          isDismissibleMutable.set(topToast?.options?.dismissible ?? currentTheme.dismissible);
         });
       }
     });
     return unsubscribe;
-  }, []);
+  }, [isBottomMutable, isDismissibleMutable]);
   const toastsWithIndex = (0, _react.useMemo)(() => {
     const indices = new Map();
     let visualIndex = 0;
@@ -63,9 +63,9 @@ const useToastState = () => {
     toastsWithIndex,
     isBottom,
     isTopDismissible,
-    topToastRef,
-    isBottomRef,
-    isDismissibleRef
+    topToastMutable,
+    isBottomMutable,
+    isDismissibleMutable
   };
 };
 exports.useToastState = useToastState;

package/lib/module/toast-icons.js

@@ -55,10 +55,10 @@ export const AnimatedIcon = /*#__PURE__*/memo(({
 }) => {
   const progress = useSharedValue(0);
   useEffect(() => {
-    progress.value = withTiming(1, {
+    progress.set(withTiming(1, {
       duration: ICON_ANIMATION_DURATION,
       easing: Easing.out(Easing.back(1.5))
-    });
+    }));
   }, [progress]);
   const style = useAnimatedStyle(() => ({
     opacity: progress.value,

package/lib/module/toast.js

@@ -1,6 +1,6 @@
 "use strict";
 
-import { memo, useCallback, useEffect, useMemo, useState } from "react";
+import { memo, useCallback, useEffect, useState } from "react";
 import { Pressable, StyleSheet, Text, View } from "react-native";
 import { Gesture, GestureDetector } from "react-native-gesture-handler";
 import Animated, { interpolate, useAnimatedStyle, useSharedValue, withTiming } from "react-native-reanimated";
@@ -23,69 +23,69 @@ export const ToastContainer = () => {
     theme,
     toastsWithIndex,
     isBottom,
-    topToastRef,
-    isBottomRef,
-    isDismissibleRef
+    topToastMutable,
+    isBottomMutable,
+    isDismissibleMutable
   } = useToastState();
   const shouldDismiss = useSharedValue(false);
-  const panGesture = useMemo(() => Gesture.Pan().onStart(() => {
+  const panGesture = Gesture.Pan().onStart(() => {
     "worklet";
 
     shouldDismiss.set(false);
   }).onUpdate(event => {
     "worklet";
 
-    if (!isDismissibleRef.current.value) return;
-    const ref = topToastRef.current.value;
+    if (!isDismissibleMutable.value) return;
+    const ref = topToastMutable.value;
     if (!ref) return;
     const {
       slot
     } = ref;
-    const bottom = isBottomRef.current.value;
+    const bottom = isBottomMutable.value;
     const rawY = event.translationY;
     const dismissDrag = bottom ? rawY : -rawY;
     const resistDrag = bottom ? -rawY : rawY;
     if (dismissDrag > 0) {
       const clampedY = bottom ? Math.min(rawY, MAX_DRAG_CLAMP) : Math.max(rawY, -MAX_DRAG_CLAMP);
-      slot.translationY.value = clampedY;
+      slot.translationY.set(clampedY);
       const shouldTriggerDismiss = dismissDrag > DISMISS_THRESHOLD || (bottom ? event.velocityY > DISMISS_VELOCITY_THRESHOLD : event.velocityY < -DISMISS_VELOCITY_THRESHOLD);
       shouldDismiss.set(shouldTriggerDismiss);
     } else {
       const exponentialDrag = MAX_DRAG_RESISTANCE * (1 - Math.exp(-resistDrag / 250));
-      slot.translationY.value = bottom ? -Math.min(exponentialDrag, MAX_DRAG_RESISTANCE) : Math.min(exponentialDrag, MAX_DRAG_RESISTANCE);
-      shouldDismiss.value = false;
+      slot.translationY.set(bottom ? -Math.min(exponentialDrag, MAX_DRAG_RESISTANCE) : Math.min(exponentialDrag, MAX_DRAG_RESISTANCE));
+      shouldDismiss.set(false);
     }
   }).onEnd(() => {
     "worklet";
 
-    if (!isDismissibleRef.current.value) return;
-    const ref = topToastRef.current.value;
+    if (!isDismissibleMutable.value) return;
+    const ref = topToastMutable.value;
     if (!ref) return;
     const {
       slot
     } = ref;
-    const bottom = isBottomRef.current.value;
+    const bottom = isBottomMutable.value;
     if (shouldDismiss.value) {
-      slot.progress.value = withTiming(0, {
+      slot.progress.set(withTiming(0, {
         duration: EXIT_DURATION,
         easing: EASING
-      });
+      }));
       const exitOffset = bottom ? SWIPE_EXIT_OFFSET : -SWIPE_EXIT_OFFSET;
-      slot.translationY.value = withTiming(slot.translationY.value + exitOffset, {
+      slot.translationY.set(withTiming(slot.translationY.value + exitOffset, {
         duration: EXIT_DURATION,
         easing: EASING
-      });
+      }));
       scheduleOnRN(ref.dismiss);
     } else {
-      slot.translationY.value = withTiming(0, {
+      slot.translationY.set(withTiming(0, {
         duration: SPRING_BACK_DURATION,
         easing: EASING
-      });
+      }));
     }
-  }), [shouldDismiss, isDismissibleRef, topToastRef, isBottomRef]);
+  });
   const registerTopToast = useCallback(values => {
-    topToastRef.current.value = values;
-  }, [topToastRef]);
+    topToastMutable.set(values);
+  }, [topToastMutable]);
   if (visibleToasts.length === 0) return null;
   const inset = isBottom ? bottom : top;
   const positionStyle = isBottom ? {
@@ -131,13 +131,13 @@ const ToastItem = ({
 
   // biome-ignore lint/correctness/useExhaustiveDependencies: mount-only effect
   useEffect(() => {
-    slot.progress.value = 0;
-    slot.translationY.value = 0;
-    slot.stackIndex.value = index;
-    slot.progress.value = withTiming(1, {
+    slot.progress.set(0);
+    slot.translationY.set(0);
+    slot.stackIndex.set(index);
+    slot.progress.set(withTiming(1, {
       duration: ENTRY_DURATION,
       easing: EASING
-    });
+    }));
     const iconTimeout = setTimeout(() => setShowIcon(true), 50);
     return () => {
       clearTimeout(iconTimeout);
@@ -151,20 +151,20 @@ const ToastItem = ({
     let loadingTimeout = null;
     if (toast.isExiting && !tracker.wasExiting) {
       tracker.wasExiting = true;
-      slot.progress.value = withTiming(0, {
+      slot.progress.set(withTiming(0, {
         duration: EXIT_DURATION,
         easing: EASING
-      });
-      slot.translationY.value = withTiming(exitToY, {
+      }));
+      slot.translationY.set(withTiming(exitToY, {
         duration: EXIT_DURATION,
         easing: EASING
-      });
+      }));
     }
     if (tracker.initialized && index !== tracker.prevIndex) {
-      slot.stackIndex.value = withTiming(index, {
+      slot.stackIndex.set(withTiming(index, {
         duration: STACK_TRANSITION_DURATION,
         easing: EASING
-      });
+      }));
     }
     tracker.prevIndex = index;
     tracker.initialized = true;

package/lib/module/use-toast-state.js

@@ -1,14 +1,14 @@
 "use strict";
 
-import { useEffect, useMemo, useRef, useState } from "react";
+import { useEffect, useMemo, useState } from "react";
 import { makeMutable } from "react-native-reanimated";
 import { toastStore } from "./toast-store.js";
 export const useToastState = () => {
   const [visibleToasts, setVisibleToasts] = useState([]);
   const [theme, setTheme] = useState(() => toastStore.getTheme());
-  const topToastRef = useRef(makeMutable(null));
-  const isBottomRef = useRef(makeMutable(theme.position === "bottom"));
-  const isDismissibleRef = useRef(makeMutable(true));
+  const [topToastMutable] = useState(() => makeMutable(null));
+  const [isBottomMutable] = useState(() => makeMutable(theme.position === "bottom"));
+  const [isDismissibleMutable] = useState(() => makeMutable(true));
   const isBottom = theme.position === "bottom";
   const topToast = visibleToasts.find(t => !t.isExiting);
   const isTopDismissible = topToast?.options?.dismissible ?? theme.dismissible;
@@ -17,8 +17,8 @@ export const useToastState = () => {
     const initialTheme = toastStore.getTheme();
     setVisibleToasts(initialToasts);
     const initialTopToast = initialToasts.find(t => !t.isExiting);
-    isBottomRef.current.value = initialTheme.position === "bottom";
-    isDismissibleRef.current.value = initialTopToast?.options?.dismissible ?? initialTheme.dismissible;
+    isBottomMutable.set(initialTheme.position === "bottom");
+    isDismissibleMutable.set(initialTopToast?.options?.dismissible ?? initialTheme.dismissible);
     let pendingToasts = null;
     let rafId = null;
     const unsubscribe = toastStore.subscribe(state => {
@@ -34,13 +34,13 @@ export const useToastState = () => {
           rafId = null;
           setTheme(prev => prev === currentTheme ? prev : currentTheme);
           const topToast = currentToasts.find(t => !t.isExiting);
-          isBottomRef.current.value = currentTheme.position === "bottom";
-          isDismissibleRef.current.value = topToast?.options?.dismissible ?? currentTheme.dismissible;
+          isBottomMutable.set(currentTheme.position === "bottom");
+          isDismissibleMutable.set(topToast?.options?.dismissible ?? currentTheme.dismissible);
         });
       }
     });
     return unsubscribe;
-  }, []);
+  }, [isBottomMutable, isDismissibleMutable]);
   const toastsWithIndex = useMemo(() => {
     const indices = new Map();
     let visualIndex = 0;
@@ -59,9 +59,9 @@ export const useToastState = () => {
     toastsWithIndex,
     isBottom,
     isTopDismissible,
-    topToastRef,
-    isBottomRef,
-    isDismissibleRef
+    topToastMutable,
+    isBottomMutable,
+    isDismissibleMutable
   };
 };
 //# sourceMappingURL=use-toast-state.js.map

package/lib/typescript/types.d.ts

@@ -1,5 +1,6 @@
 import type { ReactNode } from "react";
 import type { TextStyle, ViewStyle } from "react-native";
+import type { SharedValue } from "react-native-reanimated";
 export type ToastType = "success" | "error" | "info" | "loading";
 export type ToastPosition = "top" | "bottom";
 export interface ToastTypeColors {
@@ -35,7 +36,11 @@ export interface ToastTheme {
     position: ToastPosition;
     /** Extra offset from safe area edge (in addition to safe area insets) */
     offset: number;
-    /** Enable right-to-left layout (reverses icon/text order) */
+    /**
+     * Enable right-to-left layout at the code level (reverses icon/text order and text alignment).
+     * Only needed when you handle RTL in JavaScript — native RTL (e.g. via `I18nManager.forceRTL`)
+     * already flips the entire layout automatically, so this option is unnecessary in that case.
+     */
     rtl: boolean;
     /** Whether to show multiple toasts stacked (default: true). When false, only one toast shows at a time. */
     stacking: boolean;
@@ -121,15 +126,9 @@ export interface PromiseResult<T> {
 }
 export interface TopToastRef {
     slot: {
-        progress: {
-            value: number;
-        };
-        translationY: {
-            value: number;
-        };
-        stackIndex: {
-            value: number;
-        };
+        progress: SharedValue<number>;
+        translationY: SharedValue<number>;
+        stackIndex: SharedValue<number>;
     };
     dismiss: () => void;
 }

package/lib/typescript/use-toast-state.d.ts

@@ -9,8 +9,8 @@ export declare const useToastState: () => {
     }[];
     isBottom: boolean;
     isTopDismissible: boolean;
-    topToastRef: import("react").RefObject<import("react-native-reanimated/lib/typescript/commonTypes").Mutable<TopToastRef | null>>;
-    isBottomRef: import("react").RefObject<import("react-native-reanimated/lib/typescript/commonTypes").Mutable<boolean>>;
-    isDismissibleRef: import("react").RefObject<import("react-native-reanimated/lib/typescript/commonTypes").Mutable<boolean>>;
+    topToastMutable: import("react-native-reanimated/lib/typescript/commonTypes").Mutable<TopToastRef | null>;
+    isBottomMutable: import("react-native-reanimated/lib/typescript/commonTypes").Mutable<boolean>;
+    isDismissibleMutable: import("react-native-reanimated/lib/typescript/commonTypes").Mutable<boolean>;
 };
 //# sourceMappingURL=use-toast-state.d.ts.map

package/package.json

@@ -1,12 +1,20 @@
 {
   "name": "react-native-bread",
-  "version": "0.6.1",
+  "version": "0.7.0",
   "description": "A lightweight toast library for React Native with premium feeling animations and complex gesture support",
   "main": "lib/commonjs/index.js",
   "module": "lib/module/index.js",
   "types": "lib/typescript/index.d.ts",
   "react-native": "lib/module/index.js",
-  "files": ["lib", "!**/__tests__", "!**/__fixtures__", "!**/__mocks__", "!**/*.map"],
+  "files": [
+    "lib",
+    "src",
+    "!**/__tests__",
+    "!**/__fixtures__",
+    "!**/__mocks__",
+    "!**/*.map",
+    "README.md"
+  ],
   "sideEffects": false,
   "repository": {
     "type": "git",
@@ -31,21 +39,55 @@
     "reanimated"
   ],
   "scripts": {
+    "prepack": "cp ../README.md ./README.md",
+    "postpack": "rm ./README.md",
     "build": "bob build",
     "typecheck": "tsc --noEmit",
     "clean": "rm -rf lib",
-    "prepare": "bob build"
+    "prepare": "bob build",
+    "release": "release-it"
+  },
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org/"
+  },
+  "release-it": {
+    "git": {
+      "commitMessage": "chore: release v${version}",
+      "tagName": "v${version}"
+    },
+    "npm": {
+      "publish": true,
+      "skipChecks": true,
+      "publishArgs": [
+        "--provenance --access public"
+      ]
+    },
+    "github": {
+      "release": true
+    },
+    "hooks": {
+      "before:init": "bun run build"
+    },
+    "plugins": {
+      "@release-it/conventional-changelog": {
+        "preset": "conventionalcommits",
+        "infile": "../CHANGELOG.md"
+      }
+    }
   },
   "devDependencies": {
+    "@release-it/conventional-changelog": "^10.0.5",
+    "@types/react": "^19.1.0",
     "react": "19.1.0",
     "react-native": "0.81.5",
     "react-native-builder-bob": "^0.35.2",
     "react-native-gesture-handler": "~2.28.0",
     "react-native-reanimated": "~4.2.1",
-    "react-native-safe-area-context": "~5.4.0",
+    "react-native-safe-area-context": "~5.6.0",
     "react-native-screens": "~4.16.0",
     "react-native-svg": "15.12.1",
     "react-native-worklets": "0.7.2",
+    "release-it": "^19.2.4",
     "terser": "^5.44.1",
     "typescript": "~5.9.2"
   },

package/src/constants.ts

@@ -0,0 +1,23 @@
+import { Easing } from "react-native-reanimated";
+
+export const ICON_SIZE = 28;
+export const POOL_SIZE = 5;
+
+export const ENTRY_DURATION = 400;
+export const EXIT_DURATION = 350;
+export const STACK_TRANSITION_DURATION = 300;
+export const SPRING_BACK_DURATION = 650;
+export const ICON_ANIMATION_DURATION = 350;
+
+export const ENTRY_OFFSET = 80;
+export const EXIT_OFFSET = 100;
+export const SWIPE_EXIT_OFFSET = 200;
+export const MAX_DRAG_CLAMP = 180;
+export const MAX_DRAG_RESISTANCE = 60;
+export const DISMISS_THRESHOLD = 40;
+export const DISMISS_VELOCITY_THRESHOLD = 300;
+
+export const STACK_OFFSET_PER_ITEM = 10;
+export const STACK_SCALE_PER_ITEM = 0.05;
+
+export const EASING = Easing.bezier(0.25, 0.1, 0.25, 1.0);

package/src/icons/CloseIcon.tsx

@@ -0,0 +1,10 @@
+import Svg, { Path, type SvgProps } from "react-native-svg";
+
+export const CloseIcon = (props: SvgProps) => (
+  <Svg viewBox="0 0 24 24" width={24} height={24} fill="none" {...props}>
+    <Path
+      fill={props.fill ?? "#8993A4"}
+      d="M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41Z"
+    />
+  </Svg>
+);

package/src/icons/GreenCheck.tsx

@@ -0,0 +1,16 @@
+import Svg, { Path, type SvgProps } from "react-native-svg";
+
+export const GreenCheck = (props: SvgProps) => (
+  <Svg viewBox="0 0 30 31" width={30} height={31} fill="none" {...props}>
+    <Path
+      fill={props.fill ?? "#28B770"}
+      fillRule="evenodd"
+      d="m19.866 13.152-5.772 5.773a.933.933 0 0 1-1.326 0L9.88 16.039a.938.938 0 0 1 1.325-1.327l2.225 2.224 5.109-5.11a.938.938 0 1 1 1.326 1.326Zm.28-9.652H9.602C5.654 3.5 3 6.276 3 10.409v9.935c0 4.131 2.654 6.906 6.602 6.906h10.543c3.95 0 6.605-2.775 6.605-6.906v-9.935c0-4.133-2.654-6.909-6.604-6.909Z"
+      clipRule="evenodd"
+    />
+    <Path
+      fill="#fff"
+      d="m19.866 13.152-5.772 5.773a.933.933 0 0 1-1.326 0L9.88 16.039a.938.938 0 0 1 1.325-1.327l2.225 2.224 5.109-5.11a.938.938 0 1 1 1.326 1.326Z"
+    />
+  </Svg>
+);

package/src/icons/InfoIcon.tsx

@@ -0,0 +1,12 @@
+import Svg, { Path, type SvgProps } from "react-native-svg";
+
+export const InfoIcon = (props: SvgProps) => (
+  <Svg viewBox="0 0 24 24" width={24} height={24} fill="none" {...props}>
+    <Path
+      fill={props.fill ?? "#EDBE43"}
+      fillRule="evenodd"
+      d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2Zm1 15h-2v-6h2v6Zm0-8h-2V7h2v2Z"
+      clipRule="evenodd"
+    />
+  </Svg>
+);