Add theme-aware toasts

app/(tabs)/index.tsx

@@ -1,4 +1,7 @@
+import Toast from "react-native-toast-message"
+
 import { EditScreenInfo } from "@/components/edit-screen-info"
+import { Pressable } from "@/components/pressable"
 import { Text } from "@/components/text"
 import { View } from "@/components/view"
 
@@ -8,6 +11,18 @@ export default function TabOneScreen() {
       <Text className="text-xl font-bold">Tab One</Text>
       <View className="my-7 h-px w-4/5" />
       <EditScreenInfo path="app/(tabs)/index.tsx" />
+
+      <Pressable
+        onPress={() => {
+          Toast.show({
+            type: "success",
+            text1: "Scucess",
+            text2: "This is a success toast 👋"
+          })
+        }}
+      >
+        <Text>Launch a toast</Text>
+      </Pressable>
     </View>
   )
 }

app/(tabs)/two.tsx

@@ -1,4 +1,7 @@
+import Toast from "react-native-toast-message"
+
 import { EditScreenInfo } from "@/components/edit-screen-info"
+import { Pressable } from "@/components/pressable"
 import { Text } from "@/components/text"
 import { View } from "@/components/view"
 
@@ -8,6 +11,17 @@ export default function TabTwoScreen() {
       <Text className="text-xl font-bold">Tab Two</Text>
       <View className="my-7 h-px w-4/5" />
       <EditScreenInfo path="app/(tabs)/two.tsx" />
+      <Pressable
+        onPress={() => {
+          Toast.show({
+            type: "error",
+            text1: "Uh oh!",
+            text2: "This is an error toast 😱"
+          })
+        }}
+      >
+        <Text>Launch an Error toast</Text>
+      </Pressable>
     </View>
   )
 }

app/_layout.tsx

@@ -11,6 +11,8 @@ import { SplashScreen, Stack } from "expo-router"
 import { useColorScheme } from "nativewind"
 import { useEffect } from "react"
 
+import { ToastContainer } from "@/components/toast-container"
+
 export {
   // Catch any errors thrown by the Layout component.
   ErrorBoundary
@@ -57,6 +59,9 @@ function RootLayoutNav() {
         <Stack.Screen name="(tabs)" options={{ headerShown: false }} />
         <Stack.Screen name="modal" options={{ presentation: "modal" }} />
       </Stack>
+
+      {/* Toast should be the last item */}
+      <ToastContainer />
     </ThemeProvider>
   )
 }

assets/globals.css

@@ -9,6 +9,9 @@
 
     --primary: 346.8 77.2% 49.8%; /* #CF364C */
     --primary-foreground: 355.7 100% 97.3%; /* #fff1f2 */
+
+    --destructive: 0 84.2% 60.2%; /* #ef4444 */
+    --destructive-foreground: 0 0% 98%; /* #fafafa */
   }
 
   .dark:root {
@@ -17,5 +20,8 @@
 
     --primary: 346.8 77.2% 49.8%; /* #CF364C */
     --primary-foreground: 355.7 100% 97.3%; /* #fff1f2 */
+
+    --destructive: 0 62.8% 30.6%; /* #7f1d1d */
+    --destructive-foreground: 0 85.7% 97.3%; /* #fef2f2 */
   }
 }

components/toast-container.tsx

@@ -0,0 +1,64 @@
+import { useSafeAreaInsets } from "react-native-safe-area-context"
+import OriginalToast, {
+  type ToastConfig,
+  type ToastConfigParams,
+  type ToastProps
+} from "react-native-toast-message"
+
+import { cls } from "@/lib/utils/cls"
+
+import { Pressable, type PressableProps } from "./pressable"
+import { Text } from "./text"
+
+function BaseToast({
+  text1,
+  text2,
+  type,
+  hide,
+  props,
+  ..._rest
+}: ToastConfigParams<PressableProps>) {
+  return (
+    <Pressable
+      className={cls(
+        "mx-auto rounded-lg px-4 py-2",
+        type === "error" ? "bg-destructive" : "bg-foreground"
+      )}
+      onPress={() => {
+        hide()
+      }}
+      {...props}
+    >
+      <Text
+        className={cls(
+          "text-xl font-bold",
+          type === "error" ? "text-destructive-foreground" : "text-background"
+        )}
+      >
+        {text1}
+      </Text>
+      {text2 ? (
+        <Text
+          className={cls(
+            "text-lg",
+            type === "error" ? "text-destructive-foreground" : "text-background"
+          )}
+        >
+          {text2}
+        </Text>
+      ) : null}
+    </Pressable>
+  )
+}
+
+const toastConfig: ToastConfig = {
+  success: (props) => <BaseToast {...props} />,
+  error: (props) => <BaseToast {...props} />,
+  info: (props) => <BaseToast {...props} />
+}
+
+export function ToastContainer(props: ToastProps) {
+  const { top } = useSafeAreaInsets()
+
+  return <OriginalToast {...props} config={toastConfig} topOffset={top} />
+}

package.json

@@ -45,6 +45,7 @@
     "react-native-reanimated": "~3.6.0",
     "react-native-safe-area-context": "4.7.4",
     "react-native-screens": "~3.27.0",
+    "react-native-toast-message": "^2.2.0",
     "react-native-web": "~0.19.9",
     "tailwind-merge": "^2.2.0",
     "zod": "^3.22.4"

tailwind.config.js

@@ -12,6 +12,11 @@ module.exports = {
         primary: {
           DEFAULT: "hsl(var(--primary))",
           foreground: "hsl(var(--primary-foreground))"
+        },
+
+        destructive: {
+          DEFAULT: "hsl(var(--destructive))",
+          foreground: "hsl(var(--destructive-foreground))"
         }
       },
       fontFamily: {