feat(toast): adjust entering exiting animation

Author: vvv-sss

example/package.json

@@ -38,6 +38,7 @@
     "react-native-svg": "^15.12.1",
     "react-native-web": "^0.21.0",
     "react-native-worklets": "^0.5.1",
+    "sonner-native": "^0.21.1",
     "tailwind-merge": "^3.3.1",
     "tailwind-variants": "^3.1.0",
     "tailwindcss": "^4.1.14",

example/src/app/(home)/components/toast.tsx

@@ -6,6 +6,7 @@ import {
   type ToastComponentProps,
 } from 'heroui-native';
 import { View } from 'react-native';
+import { toast as sonnerToast } from 'sonner-native';
 import type { UsageVariant } from '../../../components/component-presentation/types';
 import { UsageVariantFlatList } from '../../../components/component-presentation/usage-variant-flatlist';
 
@@ -76,7 +77,6 @@ import { UsageVariantFlatList } from '../../../components/component-presentation
 
 const MyToast = (props: ToastComponentProps) => {
   const { id, hide } = props;
-  console.log('🔴 🔴', id); // VS remove
 
   return (
     <Toast
@@ -123,6 +123,10 @@ const InteractiveDemoContent = () => {
         <Button onPress={() => toast.hide()} variant="destructive">
           Hide All Toasts
         </Button>
+
+        {/* <Button onPress={() => sonnerToast('Hello, World!')}>
+          Sonner Toast
+        </Button> */}
       </View>
     </View>
   );

example/src/app/_layout.tsx

@@ -14,6 +14,7 @@ import {
   configureReanimatedLogger,
   ReanimatedLogLevel,
 } from 'react-native-reanimated';
+import { Toaster } from 'sonner-native';
 import '../../global.css';
 import { AppThemeProvider } from '../contexts/app-theme-context';
 
@@ -40,6 +41,7 @@ export default function Layout() {
         <AppThemeProvider>
           <HeroUINativeProvider>
             <Slot />
+            <Toaster />
           </HeroUINativeProvider>
         </AppThemeProvider>
       </KeyboardProvider>

src/components/toast/toast.tsx

@@ -1,9 +1,10 @@
 import { forwardRef, useMemo } from 'react';
 import { View } from 'react-native';
 import Animated, {
+  Easing,
   FadeInDown,
-  FadeOutDown,
   interpolate,
+  Keyframe,
   useAnimatedStyle,
   withTiming,
 } from 'react-native-reanimated';
@@ -24,6 +25,18 @@ import type {
   ToastRootProps,
 } from './toast.types';
 
+const exiting = new Keyframe({
+  0: {
+    opacity: 1,
+    transform: [{ translateY: 0 }, { scale: 1 }],
+  },
+  100: {
+    opacity: 0.5,
+    transform: [{ translateY: 100 }, { scale: 0.97 }],
+    easing: Easing.in(Easing.ease),
+  },
+});
+
 const AnimatedToastRoot = Animated.createAnimatedComponent(ToastPrimitive.Root);
 
 const [ToastProvider, useToast] = createContext<ToastContextValue>({
@@ -84,8 +97,13 @@ const ToastRoot = forwardRef<ViewRef, ToastRootProps>((props, ref) => {
     <ToastProvider value={contextValue}>
       <Animated.View
         className="absolute left-0 right-0 bottom-0"
-        entering={FadeInDown.springify().delay(50)}
-        exiting={FadeOutDown.springify()}
+        entering={FadeInDown.springify()
+          .withInitialValues({
+            opacity: 1,
+            transform: [{ translateY: 100 }],
+          })
+          .mass(3)}
+        exiting={exiting.duration(200)}
       >
         <AnimatedToastRoot
           ref={ref}

yarn.lock

@@ -8872,6 +8872,7 @@ __metadata:
     react-native-svg: ^15.12.1
     react-native-web: ^0.21.0
     react-native-worklets: ^0.5.1
+    sonner-native: ^0.21.1
     tailwind-merge: ^3.3.1
     tailwind-variants: ^3.1.0
     tailwindcss: ^4.1.14
@@ -14556,6 +14557,21 @@ __metadata:
   languageName: node
   linkType: hard
 
+"sonner-native@npm:^0.21.1":
+  version: 0.21.1
+  resolution: "sonner-native@npm:0.21.1"
+  peerDependencies:
+    react: "*"
+    react-native: "*"
+    react-native-gesture-handler: ">=2.16.1"
+    react-native-reanimated: ">=3.10.1"
+    react-native-safe-area-context: ">=4.10.5"
+    react-native-screens: ">=3.31.1"
+    react-native-svg: ">=15.6.0"
+  checksum: 02f75400859efc0e90f0fa7c7b46833ec990975b58f53dbce79d43142f5c506b89b1de66e980f088aef7039f6b5f7395c8ad538d06ad0c900e821336e08460d7
+  languageName: node
+  linkType: hard
+
 "source-map-js@npm:^1.2.1":
   version: 1.2.1
   resolution: "source-map-js@npm:1.2.1"