From dbc2db21fd5106d6bd31a0e8d5f091a22641977d Mon Sep 17 00:00:00 2001
From: Thierry <skodathierry@gmail.com>
Date: Mon, 4 Nov 2024 20:08:50 -0500
Subject: [PATCH 1/9] snackbar design system + remove index of theme folder

---
 App.tsx                                       |   2 +
 .../NewAccount/NewAccountScreenComp.tsx       |   6 +-
 .../ConnectViaWallet/ConnectViaWallet.tsx     |   5 +-
 .../Onboarding/OnboardingScreenComp.tsx       |   6 +-
 components/Screen/ScreenComp/Screen.tsx       |   8 +-
 components/Snackbar/Snackbar.constants.ts     |  15 ++
 components/Snackbar/Snackbar.example.tsx      |  99 +++++++
 components/Snackbar/Snackbar.service.ts       |  69 +++++
 components/Snackbar/Snackbar.store.ts         |  23 ++
 components/Snackbar/Snackbar.tsx              | 254 ++++++++++++++++++
 components/Snackbar/Snackbar.types.ts         |  10 +
 .../SnackbarBackdrop.android.tsx              |  41 +++
 .../SnackbarBackdrop/SnackbarBackdrop.tsx     |  71 +++++
 .../SnackbarBackdrop.utils.ts                 |  29 ++
 components/Snackbar/Snackbars.tsx             |  33 +++
 design-system/Button/Button.props.ts          |   2 +-
 design-system/Button/Button.styles.ts         |  27 +-
 design-system/Text/Text.props.ts              |   5 +-
 design-system/Text/Text.styles.ts             |   2 +-
 design-system/Text/Text.tsx                   |   7 +-
 design-system/Text/Text.utils.ts              |  13 +-
 hooks/usePressInOut.tsx                       |  14 +-
 ios/Podfile.lock                              |  20 +-
 package.json                                  |   4 +
 .../NewAccount/NewAccountPrivateKeyScreen.tsx |   8 +-
 screens/NewAccount/NewAccountScreen.tsx       |   7 +-
 .../NewAccountUserProfileScreen.tsx           |   6 +-
 .../OnboardingNotificationsScreen.tsx         |   6 +-
 .../OnboardingUserProfileScreen.tsx           |   8 +-
 screens/ShareProfile.tsx                      |   6 +-
 theme/index.ts                                |   4 -
 theme/shadow.ts                               |  15 ++
 theme/useAppTheme.ts                          |  21 ++
 yarn.lock                                     |  15 ++
 34 files changed, 801 insertions(+), 60 deletions(-)
 create mode 100644 components/Snackbar/Snackbar.constants.ts
 create mode 100644 components/Snackbar/Snackbar.example.tsx
 create mode 100644 components/Snackbar/Snackbar.service.ts
 create mode 100644 components/Snackbar/Snackbar.store.ts
 create mode 100644 components/Snackbar/Snackbar.tsx
 create mode 100644 components/Snackbar/Snackbar.types.ts
 create mode 100644 components/Snackbar/SnackbarBackdrop/SnackbarBackdrop.android.tsx
 create mode 100644 components/Snackbar/SnackbarBackdrop/SnackbarBackdrop.tsx
 create mode 100644 components/Snackbar/SnackbarBackdrop/SnackbarBackdrop.utils.ts
 create mode 100644 components/Snackbar/Snackbars.tsx
 delete mode 100644 theme/index.ts
 create mode 100644 theme/shadow.ts

diff --git a/App.tsx b/App.tsx
index 11fdee059..35fb40473 100644
--- a/App.tsx
+++ b/App.tsx
@@ -47,6 +47,7 @@ import { registerBackgroundFetchTask } from "./utils/background";
 import { privySecureStorage } from "./utils/keychain/helpers";
 import { initSentry } from "./utils/sentry";
 import "./utils/splash/splash";
+import { Snackbars } from "@components/Snackbar/Snackbars";
 
 LogBox.ignoreLogs([
   "Privy: Expected status code 200, received 400", // Privy
@@ -161,6 +162,7 @@ export default function AppWithProviders() {
                     <BottomSheetModalProvider>
                       <PortalProvider>
                         <App />
+                        <Snackbars />
                       </PortalProvider>
                     </BottomSheetModalProvider>
                   </GestureHandlerRootView>
diff --git a/components/NewAccount/NewAccountScreenComp.tsx b/components/NewAccount/NewAccountScreenComp.tsx
index a20551d59..f2f9b3ee3 100644
--- a/components/NewAccount/NewAccountScreenComp.tsx
+++ b/components/NewAccount/NewAccountScreenComp.tsx
@@ -1,11 +1,11 @@
+import { useAppTheme } from "@theme/useAppTheme";
 import { memo } from "react";
-
-import { spacing } from "../../theme";
 import { Screen } from "../Screen/ScreenComp/Screen";
 import { IScreenProps } from "../Screen/ScreenComp/Screen.props";
 
 export const NewAccountScreenComp = memo(function (props: IScreenProps) {
   const { contentContainerStyle, ...restProps } = props;
+  const { theme } = useAppTheme();
 
   return (
     <Screen
@@ -13,7 +13,7 @@ export const NewAccountScreenComp = memo(function (props: IScreenProps) {
       safeAreaEdges={["bottom"]}
       contentContainerStyle={[
         {
-          paddingHorizontal: spacing.md,
+          paddingHorizontal: theme.spacing.md,
         },
         contentContainerStyle,
       ]}
diff --git a/components/Onboarding/ConnectViaWallet/ConnectViaWallet.tsx b/components/Onboarding/ConnectViaWallet/ConnectViaWallet.tsx
index 8c29b1855..f0026b970 100644
--- a/components/Onboarding/ConnectViaWallet/ConnectViaWallet.tsx
+++ b/components/Onboarding/ConnectViaWallet/ConnectViaWallet.tsx
@@ -8,7 +8,6 @@ import { ActivityIndicator } from "react-native";
 import { Center } from "../../../design-system/Center";
 import { VStack } from "../../../design-system/VStack";
 import { useRouter } from "../../../navigation/useNavigation";
-import { spacing } from "../../../theme";
 import { useAppTheme } from "../../../theme/useAppTheme";
 import { PictoTitleSubtitle } from "../../PictoTitleSubtitle";
 import { Terms } from "../Terms";
@@ -194,8 +193,8 @@ const ConnectViaWalletUI = memo(function ConnectViaWalletUI(props: object) {
       {showValueProps && <ValueProps />}
       <VStack
         style={{
-          rowGap: spacing.sm,
-          marginTop: spacing.lg,
+          rowGap: theme.spacing.sm,
+          marginTop: theme.spacing.lg,
         }}
       >
         <Button
diff --git a/components/Onboarding/OnboardingScreenComp.tsx b/components/Onboarding/OnboardingScreenComp.tsx
index aec7b2753..65a60199a 100644
--- a/components/Onboarding/OnboardingScreenComp.tsx
+++ b/components/Onboarding/OnboardingScreenComp.tsx
@@ -1,6 +1,6 @@
 import { memo } from "react";
 
-import { spacing } from "../../theme";
+import { useAppTheme } from "@theme/useAppTheme";
 import { Screen } from "../Screen/ScreenComp/Screen";
 import { IScreenProps } from "../Screen/ScreenComp/Screen.props";
 
@@ -9,13 +9,15 @@ export const OnboardingScreenComp = memo(function OnboardingScreenComp(
 ) {
   const { contentContainerStyle, ...rest } = props;
 
+  const { theme } = useAppTheme();
+
   return (
     <Screen
       preset="scroll"
       safeAreaEdges={["bottom"]}
       contentContainerStyle={[
         {
-          paddingHorizontal: spacing.lg,
+          paddingHorizontal: theme.spacing.lg,
         },
         contentContainerStyle,
       ]}
diff --git a/components/Screen/ScreenComp/Screen.tsx b/components/Screen/ScreenComp/Screen.tsx
index 8cffa2711..10ceb5181 100644
--- a/components/Screen/ScreenComp/Screen.tsx
+++ b/components/Screen/ScreenComp/Screen.tsx
@@ -5,6 +5,8 @@ import { ScrollView, View, ViewStyle } from "react-native";
 import { KeyboardAwareScrollView } from "react-native-keyboard-controller";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 
+import { VStack } from "../../../design-system/VStack";
+import { useAppTheme } from "../../../theme/useAppTheme";
 import {
   isNonScrolling,
   useAutoPreset,
@@ -15,9 +17,6 @@ import {
   IScreenProps,
   ScrollScreenProps,
 } from "./Screen.props";
-import { VStack } from "../../../design-system/VStack";
-import { spacing } from "../../../theme";
-import { useAppTheme } from "../../../theme/useAppTheme";
 
 function ScreenWithoutScrolling(props: IScreenProps) {
   const { style, contentContainerStyle, children } = props;
@@ -30,6 +29,7 @@ function ScreenWithoutScrolling(props: IScreenProps) {
 
 function ScreenWithScrolling(props: IScreenProps) {
   const insets = useSafeAreaInsets();
+  const { theme } = useAppTheme();
 
   const {
     children,
@@ -38,7 +38,7 @@ function ScreenWithScrolling(props: IScreenProps) {
     ScrollViewProps,
     keyboardOffset = insets.bottom +
       // By default we never want the input hugging the keyboard
-      spacing.xs,
+      theme.spacing.xs,
     style,
   } = props as ScrollScreenProps;
 
diff --git a/components/Snackbar/Snackbar.constants.ts b/components/Snackbar/Snackbar.constants.ts
new file mode 100644
index 000000000..a5a3a5e9c
--- /dev/null
+++ b/components/Snackbar/Snackbar.constants.ts
@@ -0,0 +1,15 @@
+import { spacing } from "@theme/spacing";
+import { initialWindowMetrics } from "react-native-safe-area-context";
+
+export const SNACKBAR_HEIGHT = 50;
+
+export const SNACKBAR_LARGE_TEXT_HEIGHT = 100;
+
+export const SNACKBARS_MAX_VISIBLE = 3;
+
+export const SNACKBAR_SPACE_BETWEEN_SNACKBARS = spacing.sm;
+
+export const SNACKBAR_BACKDROP_ADDITIONAL_HEIGHT = 90;
+
+export const SNACKBAR_BOTTOM_OFFSET =
+  initialWindowMetrics?.insets.bottom ?? spacing.md;
diff --git a/components/Snackbar/Snackbar.example.tsx b/components/Snackbar/Snackbar.example.tsx
new file mode 100644
index 000000000..2882240f4
--- /dev/null
+++ b/components/Snackbar/Snackbar.example.tsx
@@ -0,0 +1,99 @@
+import { Screen } from "@components/Screen/ScreenComp/Screen";
+import { showSnackbar } from "@components/Snackbar/Snackbar.service";
+import { Button } from "@design-system/Button/Button";
+import { Text } from "@design-system/Text";
+import { VStack } from "@design-system/VStack";
+import { useAppTheme } from "@theme/useAppTheme";
+import { memo } from "react";
+
+export const SnackbarExample = memo(function SnackbarExample() {
+  const { theme } = useAppTheme();
+
+  return (
+    <Screen safeAreaEdges={["bottom", "top"]}>
+      <VStack style={{ padding: theme.spacing.md, rowGap: theme.spacing.md }}>
+        <Button
+          text="Show Basic"
+          onPress={() => showSnackbar({ message: "This is a basic snackbar" })}
+        />
+        <Button
+          text="Show Error"
+          onPress={() =>
+            showSnackbar({
+              message: "Something went wrong!",
+              type: "error",
+            })
+          }
+        />
+        <Button
+          text="Show Info"
+          onPress={() =>
+            showSnackbar({
+              message: "Here's some useful information",
+              type: "info",
+            })
+          }
+        />
+        <Button
+          text="Show Large Text"
+          onPress={() =>
+            showSnackbar({
+              message:
+                "This is a longer message that will wrap to multiple lines and show how the snackbar handles longer content in a more spacious layout",
+              isMultiLine: true,
+            })
+          }
+        />
+        <Button
+          text="Show with Actions"
+          onPress={() =>
+            showSnackbar({
+              message: "Do you want to proceed?",
+              type: "info",
+              actions: [
+                {
+                  label: "Learn more",
+                  onPress: () => console.log("Learn more pressed"),
+                },
+              ],
+            })
+          }
+        />
+        <Button
+          text="Show with actions large text"
+          onPress={() =>
+            showSnackbar({
+              message:
+                "This is a longer message that will wrap to multiple lines and show how the snackbar handles longer content in a more spacious layout",
+              isMultiLine: true,
+              type: "info",
+              actions: [
+                {
+                  label: "Learn more",
+                  onPress: () => console.log("Learn more pressed"),
+                },
+              ],
+            })
+          }
+        />
+
+        <Text>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do
+          eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
+          minim veniam, quis nostrud exercitation ullamco laboris nisi ut
+          aliquip ex ea commodo consequat. Duis aute irure dolor in
+          reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
+          pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
+          culpa qui officia deserunt mollit anim id est laborum. Sed ut
+          perspiciatis unde omnis iste natus error sit voluptatem accusantium
+          doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo
+          inventore veritatis et quasi architecto beatae vitae dicta sunt
+          explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut
+          odit aut fugit. Nemo enim ipsam voluptatem quia voluptas sit
+          aspernatur aut odit aut fugit. Nemo enim ipsam voluptatem quia
+          voluptas sit aspernatur aut odit aut fugit.
+        </Text>
+      </VStack>
+    </Screen>
+  );
+});
diff --git a/components/Snackbar/Snackbar.service.ts b/components/Snackbar/Snackbar.service.ts
new file mode 100644
index 000000000..b46d69e56
--- /dev/null
+++ b/components/Snackbar/Snackbar.service.ts
@@ -0,0 +1,69 @@
+import { useSnackBarStore } from "@components/Snackbar/Snackbar.store";
+import { ISnackbar } from "@components/Snackbar/Snackbar.types";
+import { Haptics } from "@utils/haptics";
+import { v4 as uuidv4 } from "uuid";
+
+export type INewSnackbar = Partial<Exclude<ISnackbar, "key">> & {
+  message: string;
+};
+
+export function showSnackbar(newSnackbar: INewSnackbar) {
+  Haptics.softImpactAsync();
+
+  useSnackBarStore.setState((prev) => {
+    return {
+      snackbars: [
+        {
+          message: newSnackbar.message,
+          isMultiLine: newSnackbar.isMultiLine || false,
+          key: uuidv4(),
+          type: newSnackbar.type ?? "info",
+          actions: newSnackbar.actions ?? [],
+        },
+        ...prev.snackbars,
+      ],
+    };
+  });
+}
+
+export function clearAllSnackbars() {
+  useSnackBarStore.getState().clearAllSnackbars();
+}
+
+export function useSnackbars() {
+  return useSnackBarStore((state) => state.snackbars);
+}
+
+export function dismissSnackbar(key: string) {
+  useSnackBarStore.setState((prev) => {
+    return {
+      snackbars: prev.snackbars.filter((item) => item.key !== key),
+    };
+  });
+}
+
+export function onSnackbarsChange(callback: (snackbars: ISnackbar[]) => void) {
+  return useSnackBarStore.subscribe((state) => state.snackbars, callback);
+}
+
+export function onNewSnackbar(callback: (snackbar: ISnackbar) => void) {
+  return useSnackBarStore.subscribe(
+    (state) => state.snackbars,
+    (snackbars, previousSnackbars) => {
+      const firstSnackbar = snackbars[0];
+      if (firstSnackbar) {
+        callback(firstSnackbar);
+      }
+    }
+  );
+}
+
+export function getNumberOfSnackbars() {
+  return useSnackBarStore.getState().snackbars.length;
+}
+
+export function getSnackbarIndex(key: string) {
+  return useSnackBarStore
+    .getState()
+    .snackbars.findIndex((item) => item.key === key);
+}
diff --git a/components/Snackbar/Snackbar.store.ts b/components/Snackbar/Snackbar.store.ts
new file mode 100644
index 000000000..a5fc0c3b4
--- /dev/null
+++ b/components/Snackbar/Snackbar.store.ts
@@ -0,0 +1,23 @@
+import { ISnackbar } from "@components/Snackbar/Snackbar.types";
+import { create } from "zustand";
+import { subscribeWithSelector } from "zustand/middleware";
+
+export interface ISnackBarStore {
+  snackbars: ISnackbar[];
+  showSnackbar: (snackbar: ISnackbar) => void;
+  clearAllSnackbars: () => void;
+}
+
+export const useSnackBarStore = create<ISnackBarStore>()(
+  subscribeWithSelector((set, get) => ({
+    snackbars: [],
+    showSnackbar: (snackbar) => {
+      set((state) => ({
+        snackbars: [...state.snackbars, snackbar],
+      }));
+    },
+    clearAllSnackbars: () => {
+      set({ snackbars: [] });
+    },
+  }))
+);
diff --git a/components/Snackbar/Snackbar.tsx b/components/Snackbar/Snackbar.tsx
new file mode 100644
index 000000000..b4140e8b0
--- /dev/null
+++ b/components/Snackbar/Snackbar.tsx
@@ -0,0 +1,254 @@
+import {
+  SNACKBARS_MAX_VISIBLE,
+  SNACKBAR_BOTTOM_OFFSET,
+  SNACKBAR_HEIGHT,
+  SNACKBAR_LARGE_TEXT_HEIGHT,
+} from "@components/Snackbar/Snackbar.constants";
+import {
+  getNumberOfSnackbars,
+  onSnackbarsChange,
+} from "@components/Snackbar/Snackbar.service";
+import { ISnackbar } from "@components/Snackbar/Snackbar.types";
+import { Button } from "@design-system/Button/Button";
+import { Center } from "@design-system/Center";
+import { AnimatedHStack, HStack } from "@design-system/HStack";
+import { IconButton } from "@design-system/IconButton/IconButton";
+import { Text } from "@design-system/Text";
+import { AnimatedVStack } from "@design-system/VStack";
+import { useAppTheme } from "@theme/useAppTheme";
+import { memo, useCallback, useEffect } from "react";
+import { useWindowDimensions } from "react-native";
+import { Gesture, GestureDetector } from "react-native-gesture-handler";
+import {
+  runOnJS,
+  useAnimatedStyle,
+  useSharedValue,
+  withSpring,
+  withTiming,
+} from "react-native-reanimated";
+import { SNACKBAR_SPACE_BETWEEN_SNACKBARS } from "./Snackbar.constants";
+
+const withSpringConfig = {
+  duration: 500,
+  dampingRatio: 1.5,
+  stiffness: 1,
+  overshootClamping: false,
+  restSpeedThreshold: 50,
+};
+
+type SnackbarProps = {
+  snackbar: ISnackbar;
+  onDismiss: () => void;
+};
+
+export const Snackbar = memo(
+  function Snackbar(props: SnackbarProps) {
+    const { snackbar, onDismiss } = props;
+    const { theme } = useAppTheme();
+    const { width: windowWidth } = useWindowDimensions();
+
+    const isFirstSnack = getNumberOfSnackbars() === 1;
+    const initialBottomPosition = isFirstSnack
+      ? -SNACKBAR_HEIGHT
+      : SNACKBAR_BOTTOM_OFFSET;
+
+    const snackbarIndexAV = useSharedValue(0);
+    const bottomAV = useSharedValue(initialBottomPosition);
+    const translateXAV = useSharedValue(0);
+    const isSwipingAV = useSharedValue(false);
+
+    useEffect(() => {
+      bottomAV.value = withSpring(SNACKBAR_BOTTOM_OFFSET, withSpringConfig);
+    }, [bottomAV]);
+
+    useEffect(() => {
+      const unsubscribe = onSnackbarsChange((snackbars) => {
+        const snackbarIndex = snackbars.findIndex(
+          (item) => item.key === snackbar.key
+        );
+
+        console.log("snackbarIndex:", snackbarIndex);
+
+        // Set the new new index of the current snackbar
+        snackbarIndexAV.value = snackbarIndex;
+
+        if (snackbarIndex === -1) {
+          return;
+        }
+
+        const totalHeightBeforeThisSnackbar = snackbars
+          .slice(0, Math.min(snackbarIndex, SNACKBARS_MAX_VISIBLE))
+          .reduce((acc, item) => {
+            const snackbarHeight = item.isMultiLine
+              ? SNACKBAR_LARGE_TEXT_HEIGHT
+              : SNACKBAR_HEIGHT;
+            return acc + snackbarHeight + SNACKBAR_SPACE_BETWEEN_SNACKBARS;
+          }, 0);
+
+        bottomAV.value = withSpring(
+          SNACKBAR_BOTTOM_OFFSET + totalHeightBeforeThisSnackbar,
+          withSpringConfig
+        );
+      });
+
+      return unsubscribe;
+    }, [snackbar.key, bottomAV, snackbarIndexAV]);
+
+    const dismissItem = useCallback(() => {
+      "worklet";
+      translateXAV.value = withTiming(
+        -windowWidth,
+        { duration: 250 },
+        (isFinished) => {
+          if (isFinished) {
+            runOnJS(onDismiss)();
+          }
+        }
+      );
+    }, [onDismiss, translateXAV, windowWidth]);
+
+    const gesture = Gesture.Pan()
+      .onBegin(() => {
+        isSwipingAV.value = true;
+      })
+      .onUpdate((event) => {
+        if (event.translationX <= 0) {
+          translateXAV.value = event.translationX;
+        }
+      })
+      .onEnd((event) => {
+        if (event.translationX < -50) {
+          dismissItem();
+        } else {
+          translateXAV.value = withSpring(0);
+        }
+      })
+      .onFinalize(() => {
+        isSwipingAV.value = false;
+      });
+
+    const containerAS = useAnimatedStyle(
+      () => ({
+        bottom: bottomAV.value + theme.spacing.md,
+        zIndex: withTiming(100 - snackbarIndexAV.value),
+        // Animate shadow radius based on snackbar position in stack
+        // - Starts at 16 for first snackbar and decreases by 2.5 for each subsequent one
+        // - Has minimum value of 2 to maintain some depth
+        shadowRadius: withTiming(Math.max(16 - snackbarIndexAV.value * 2.5, 2)),
+        // Animate shadow opacity based on snackbar position
+        // - First 3 snackbars have opacity of 1
+        // - After 3rd snackbar, opacity decreases linearly by 0.05
+        // - This creates a nice fading effect for stacked snackbars
+        shadowOpacity: withTiming(
+          snackbarIndexAV.value > 3 ? 1 - snackbarIndexAV.value * 0.15 : 1
+        ),
+        // The content of the first two StackedToasts is visible
+        // The content of the other StackedToasts is hidden
+        opacity: withTiming(
+          snackbarIndexAV.value < SNACKBARS_MAX_VISIBLE ? 1 : 0
+        ),
+        // For the dragging animation
+        transform: [{ translateX: translateXAV.value }],
+      }),
+      []
+    );
+
+    const SnackContainer = snackbar.isMultiLine
+      ? AnimatedVStack
+      : AnimatedHStack;
+    const snackbarHeight = snackbar.isMultiLine
+      ? SNACKBAR_LARGE_TEXT_HEIGHT
+      : SNACKBAR_HEIGHT;
+
+    return (
+      <GestureDetector gesture={gesture}>
+        <AnimatedVStack
+          style={[
+            {
+              // ...debugBorder(),
+              left: theme.spacing.md,
+              zIndex: -1,
+              position: "absolute",
+              width: windowWidth - theme.spacing.md * 2,
+              backgroundColor: theme.colors.background.surface,
+              borderRadius: theme.borderRadius.sm,
+              borderCurve: "continuous",
+              ...theme.shadow.big,
+            },
+            containerAS,
+          ]}
+        >
+          <AnimatedVStack>
+            <SnackContainer
+              style={{
+                // ...debugBorder(),
+                marginHorizontal: theme.spacing.xxs,
+                borderCurve: "continuous",
+                overflow: "hidden",
+                borderRadius: theme.borderRadius.sm,
+                height: snackbarHeight,
+                paddingHorizontal: theme.spacing.xxxs,
+                ...(!snackbar.isMultiLine && { alignItems: "center" }),
+              }}
+            >
+              <HStack
+                style={{
+                  paddingHorizontal: theme.spacing.xs,
+                  ...(!snackbar.isMultiLine && { flex: 1 }),
+                  ...(snackbar.isMultiLine && { paddingTop: theme.spacing.xs }),
+                }}
+              >
+                <Text
+                  preset="small"
+                  numberOfLines={snackbar.isMultiLine ? 2 : 1}
+                  {...(snackbar.type === "error" && { color: "caution" })}
+                >
+                  {snackbar.message}
+                </Text>
+              </HStack>
+
+              <HStack
+                style={{
+                  alignSelf: "flex-end",
+                  columnGap: theme.spacing.xxxs,
+                  alignItems: "center",
+                  ...(!snackbar.isMultiLine && { height: "100%" }),
+                }}
+              >
+                {snackbar.actions?.map((action) => (
+                  <Button
+                    withHapticFeedback
+                    key={action.label}
+                    text={action.label}
+                    variant="link"
+                    size="sm"
+                    onPress={action.onPress}
+                    textStyle={{ color: theme.colors.text.secondary }}
+                  />
+                ))}
+
+                <Center
+                  style={{
+                    marginLeft: theme.spacing.xxxs,
+                    width: theme.spacing.xxl,
+                    height: theme.spacing.xxl,
+                  }}
+                >
+                  <IconButton
+                    withHaptics
+                    onPress={dismissItem}
+                    variant="ghost"
+                    iconName="xmark"
+                    size="md"
+                  />
+                </Center>
+              </HStack>
+            </SnackContainer>
+          </AnimatedVStack>
+        </AnimatedVStack>
+      </GestureDetector>
+    );
+  },
+  // We don't need to rerender a snackbar
+  () => true
+);
diff --git a/components/Snackbar/Snackbar.types.ts b/components/Snackbar/Snackbar.types.ts
new file mode 100644
index 000000000..db335dbb6
--- /dev/null
+++ b/components/Snackbar/Snackbar.types.ts
@@ -0,0 +1,10 @@
+export type ISnackbar = {
+  key: string;
+  message: string | React.ReactNode;
+  type?: "error" | "success" | "info";
+  isMultiLine?: boolean;
+  actions?: {
+    label: string;
+    onPress: () => void;
+  }[];
+};
diff --git a/components/Snackbar/SnackbarBackdrop/SnackbarBackdrop.android.tsx b/components/Snackbar/SnackbarBackdrop/SnackbarBackdrop.android.tsx
new file mode 100644
index 000000000..46769f561
--- /dev/null
+++ b/components/Snackbar/SnackbarBackdrop/SnackbarBackdrop.android.tsx
@@ -0,0 +1,41 @@
+import { useSnackbars } from "@components/Snackbar/Snackbar.service";
+import { useGradientHeight } from "@components/Snackbar/SnackbarBackdrop/SnackbarBackdrop.utils";
+import { AnimatedVStack } from "@design-system/VStack";
+import { LinearGradient } from "expo-linear-gradient";
+import React from "react";
+import { StyleSheet, useWindowDimensions } from "react-native";
+import { useAnimatedStyle, withTiming } from "react-native-reanimated";
+
+/**
+ * On Android, blur doesn't work
+ */
+
+export const Backdrop = () => {
+  const snackbars = useSnackbars();
+
+  const { height: windowHeight } = useWindowDimensions();
+
+  const gradientHeight = useGradientHeight();
+
+  const rAnimatedStyle = useAnimatedStyle(() => {
+    const top = windowHeight - gradientHeight;
+    return {
+      top: withTiming(top, {
+        duration: 500,
+      }),
+    };
+  }, [windowHeight, snackbars.length]);
+
+  return (
+    <AnimatedVStack
+      pointerEvents="none"
+      style={[StyleSheet.absoluteFill, rAnimatedStyle]}
+    >
+      <LinearGradient
+        locations={[0, 0.55]}
+        colors={["rgba(255, 255,255,0.0)", "rgba(255, 255,255,0.5)"]}
+        style={StyleSheet.absoluteFill}
+      />
+    </AnimatedVStack>
+  );
+};
diff --git a/components/Snackbar/SnackbarBackdrop/SnackbarBackdrop.tsx b/components/Snackbar/SnackbarBackdrop/SnackbarBackdrop.tsx
new file mode 100644
index 000000000..3f4e20a27
--- /dev/null
+++ b/components/Snackbar/SnackbarBackdrop/SnackbarBackdrop.tsx
@@ -0,0 +1,71 @@
+import {
+  SNACKBARS_MAX_VISIBLE,
+  SNACKBAR_LARGE_TEXT_HEIGHT,
+  SNACKBAR_SPACE_BETWEEN_SNACKBARS,
+} from "@components/Snackbar/Snackbar.constants";
+import { useSnackbars } from "@components/Snackbar/Snackbar.service";
+import { useGradientHeight } from "@components/Snackbar/SnackbarBackdrop/SnackbarBackdrop.utils";
+import MaskedView from "@react-native-masked-view/masked-view";
+import { BlurView } from "expo-blur";
+import { LinearGradient } from "expo-linear-gradient";
+import { memo } from "react";
+import { StyleSheet, useWindowDimensions } from "react-native";
+import Animated, {
+  useAnimatedStyle,
+  withTiming,
+} from "react-native-reanimated";
+
+// The Backdrop component creates a visually appealing background for stacked snackbars.
+// It uses a combination of a masked view, linear gradient, and blur effect to create
+// a semi-transparent, animated backdrop that adjusts based on the number of snackbars.
+// The backdrop animates from the bottom of the screen, creating a smooth transition
+// as snackbars are added or removed.
+
+export const SnackbarBackdrop = memo(() => {
+  const snackbars = useSnackbars();
+  const { height: windowHeight } = useWindowDimensions();
+  const gradientHeight = useGradientHeight();
+
+  const rAnimatedStyle = useAnimatedStyle(() => {
+    const top = windowHeight - gradientHeight;
+    return {
+      top: withTiming(top, {
+        duration: 500,
+      }),
+    };
+  }, [windowHeight, snackbars.length]);
+
+  return (
+    <Animated.View
+      style={[
+        StyleSheet.absoluteFill,
+        rAnimatedStyle,
+        // debugBorder()
+      ]}
+    >
+      <MaskedView
+        pointerEvents="none"
+        maskElement={
+          <LinearGradient
+            locations={[0, 0.55]}
+            colors={["rgba(255, 255,255,0.0)", "rgba(255, 255,255,1)"]}
+            style={StyleSheet.absoluteFill}
+          />
+        }
+        style={{
+          height:
+            (SNACKBAR_LARGE_TEXT_HEIGHT + SNACKBAR_SPACE_BETWEEN_SNACKBARS) *
+              SNACKBARS_MAX_VISIBLE +
+            90,
+          width: "100%",
+        }}
+      >
+        <BlurView
+          intensity={80}
+          tint="systemChromeMaterialLight"
+          style={StyleSheet.absoluteFill}
+        />
+      </MaskedView>
+    </Animated.View>
+  );
+});
diff --git a/components/Snackbar/SnackbarBackdrop/SnackbarBackdrop.utils.ts b/components/Snackbar/SnackbarBackdrop/SnackbarBackdrop.utils.ts
new file mode 100644
index 000000000..a70af42fe
--- /dev/null
+++ b/components/Snackbar/SnackbarBackdrop/SnackbarBackdrop.utils.ts
@@ -0,0 +1,29 @@
+import {
+  SNACKBARS_MAX_VISIBLE,
+  SNACKBAR_BACKDROP_ADDITIONAL_HEIGHT,
+  SNACKBAR_BOTTOM_OFFSET,
+  SNACKBAR_HEIGHT,
+  SNACKBAR_LARGE_TEXT_HEIGHT,
+  SNACKBAR_SPACE_BETWEEN_SNACKBARS,
+} from "@components/Snackbar/Snackbar.constants";
+import { useSnackbars } from "@components/Snackbar/Snackbar.service";
+
+export const useGradientHeight = () => {
+  const snackbars = useSnackbars();
+
+  if (snackbars.length === 0) {
+    return 0;
+  }
+
+  const gradientHeight = snackbars
+    .slice(0, SNACKBARS_MAX_VISIBLE)
+    .reduce(
+      (acc, snackbar) =>
+        acc +
+        (snackbar.isMultiLine ? SNACKBAR_LARGE_TEXT_HEIGHT : SNACKBAR_HEIGHT) +
+        SNACKBAR_SPACE_BETWEEN_SNACKBARS,
+      SNACKBAR_BACKDROP_ADDITIONAL_HEIGHT + SNACKBAR_BOTTOM_OFFSET
+    );
+
+  return gradientHeight;
+};
diff --git a/components/Snackbar/Snackbars.tsx b/components/Snackbar/Snackbars.tsx
new file mode 100644
index 000000000..3d62aabe4
--- /dev/null
+++ b/components/Snackbar/Snackbars.tsx
@@ -0,0 +1,33 @@
+import {
+  dismissSnackbar,
+  useSnackbars,
+} from "@components/Snackbar/Snackbar.service";
+import React, { memo } from "react";
+import { Snackbar } from "./Snackbar";
+import { SnackbarBackdrop } from "@components/Snackbar/SnackbarBackdrop/SnackbarBackdrop";
+
+export type InternalSnackbarContextType = {
+  snackbars: SnackbarType[];
+};
+
+export const InternalSnackbarContext =
+  React.createContext<InternalSnackbarContextType>({
+    snackbars: [],
+  });
+
+export const Snackbars = memo(function Snackbars() {
+  const snackbars = useSnackbars();
+
+  return (
+    <>
+      {snackbars.map((snackbar) => (
+        <Snackbar
+          key={snackbar.key}
+          snackbar={snackbar}
+          onDismiss={() => dismissSnackbar(snackbar.key)}
+        />
+      ))}
+      <SnackbarBackdrop />
+    </>
+  );
+});
diff --git a/design-system/Button/Button.props.ts b/design-system/Button/Button.props.ts
index e3afe1b8e..b88fedaa0 100644
--- a/design-system/Button/Button.props.ts
+++ b/design-system/Button/Button.props.ts
@@ -19,7 +19,7 @@ export type IButtonVariant =
   | "secondary-danger"
   | "text";
 
-export type IButtonSize = "md" | "lg";
+export type IButtonSize = "sm" | "md" | "lg";
 
 export type IButtonAction = "primary" | "danger";
 
diff --git a/design-system/Button/Button.styles.ts b/design-system/Button/Button.styles.ts
index 3cc17878f..2f2ca092e 100644
--- a/design-system/Button/Button.styles.ts
+++ b/design-system/Button/Button.styles.ts
@@ -1,6 +1,10 @@
 import { TextStyle, ViewStyle } from "react-native";
 
-import { Theme, ThemedStyle } from "../../theme/useAppTheme";
+import {
+  Theme,
+  ThemedStyle,
+  flattenThemedStyles,
+} from "../../theme/useAppTheme";
 import { textPresets } from "./../Text/Text.presets";
 import { IButtonAction, IButtonSize, IButtonVariant } from "./Button.props";
 
@@ -43,8 +47,10 @@ export const getButtonViewStyle =
       alignItems: "center",
       borderRadius: borderRadius.sm,
       overflow: "hidden",
-      paddingVertical: size === "md" ? spacing.xxs : spacing.xs,
-      paddingHorizontal: size === "md" ? spacing.xs : spacing.sm,
+      paddingVertical:
+        size === "md" || size === "sm" ? spacing.xxs : spacing.xs,
+      paddingHorizontal:
+        size === "md" || size === "sm" ? spacing.xs : spacing.sm,
     };
 
     if (action === "primary") {
@@ -90,12 +96,23 @@ export const getButtonViewStyle =
   };
 
 export const getButtonTextStyle =
-  ({ variant, action, pressed = false, disabled = false }: IButtonStyleProps) =>
+  ({
+    size,
+    variant,
+    action,
+    pressed = false,
+    disabled = false,
+  }: IButtonStyleProps) =>
   (theme: Theme): TextStyle => {
     const { colors } = theme;
 
     const style: TextStyle = {
-      ...textPresets.body,
+      // ...(size === "sm" ? textPresets.title.flat(3) : textPresets.body.flat(3)),
+      ...flattenThemedStyles({
+        styles:
+          size === "sm" || size === "md" ? textPresets.small : textPresets.body,
+        theme,
+      }),
       textAlign: "center",
       flexShrink: 1,
       flexGrow: 0,
diff --git a/design-system/Text/Text.props.ts b/design-system/Text/Text.props.ts
index a1f10358c..d9e68fbfa 100644
--- a/design-system/Text/Text.props.ts
+++ b/design-system/Text/Text.props.ts
@@ -1,9 +1,10 @@
 import { TextProps as RNTextProps, StyleProp, TextStyle } from "react-native";
 
+import { IColors } from "@theme/colorsLight";
+import { typography } from "@theme/typography";
+import { i18n, TxKeyPath } from "../../i18n";
 import { IPresets } from "./Text.presets";
 import { textSizeStyles } from "./Text.styles";
-import { i18n, TxKeyPath } from "../../i18n";
-import { IColors, typography } from "../../theme";
 
 export type ISizes = keyof typeof textSizeStyles;
 export type IWeights = keyof typeof typography.primary;
diff --git a/design-system/Text/Text.styles.ts b/design-system/Text/Text.styles.ts
index 840a36fd1..7c722bd03 100644
--- a/design-system/Text/Text.styles.ts
+++ b/design-system/Text/Text.styles.ts
@@ -1,8 +1,8 @@
 import { TextStyle } from "react-native";
 
 import { ITextColors, IWeights } from "./Text.props";
-import { typography } from "../../theme";
 import { Theme, ThemedStyle } from "../../theme/useAppTheme";
+import { typography } from "@theme/typography";
 
 export const textSizeStyles = {
   xl: { fontSize: 32, lineHeight: 36 } satisfies TextStyle, // Made up, need to confirm with Andrew once we have the design
diff --git a/design-system/Text/Text.tsx b/design-system/Text/Text.tsx
index cc4937c6b..0941094a0 100644
--- a/design-system/Text/Text.tsx
+++ b/design-system/Text/Text.tsx
@@ -1,10 +1,10 @@
 import React from "react";
 import { Text as RNText, StyleProp, TextStyle } from "react-native";
 
-import { ITextProps } from "./Text.props";
-import { getTextStyle } from "./Text.utils";
 import { translate } from "../../i18n";
 import { useAppTheme } from "../../theme/useAppTheme";
+import { ITextProps } from "./Text.props";
+import { getTextStyle } from "./Text.utils";
 
 export const Text = React.forwardRef<RNText, ITextProps>((props, ref) => {
   const {
@@ -16,6 +16,7 @@ export const Text = React.forwardRef<RNText, ITextProps>((props, ref) => {
     text,
     children,
     style: styleProp,
+    preset,
     ...rest
   } = props;
 
@@ -29,7 +30,7 @@ export const Text = React.forwardRef<RNText, ITextProps>((props, ref) => {
     size,
     color,
     style: styleProp,
-    ...props,
+    preset,
   });
 
   return (
diff --git a/design-system/Text/Text.utils.ts b/design-system/Text/Text.utils.ts
index 81782bd6e..de9ce1f2a 100644
--- a/design-system/Text/Text.utils.ts
+++ b/design-system/Text/Text.utils.ts
@@ -1,7 +1,7 @@
 import { IThemed } from "@theme/useAppTheme";
 import { StyleProp, TextStyle } from "react-native";
 
-import { IPresets, textPresets } from "./Text.presets";
+import { textPresets } from "./Text.presets";
 import { ITextStyleProps } from "./Text.props";
 import {
   textColorStyle,
@@ -11,15 +11,20 @@ import {
 
 export const getTextStyle = (
   themed: IThemed,
-  { weight, size, color, style: styleProp, ...props }: ITextStyleProps
+  {
+    weight,
+    size,
+    color,
+    style,
+    preset = "body",
+  }: Pick<ITextStyleProps, "weight" | "size" | "color" | "style" | "preset">
 ): StyleProp<TextStyle> => {
-  const preset: IPresets = props.preset ?? "body";
   const $styles: StyleProp<TextStyle> = [
     themed(textPresets[preset]),
     weight && textFontWeightStyles[weight],
     size && textSizeStyles[size],
     color && themed((theme) => textColorStyle(theme, color)),
-    styleProp,
+    style,
   ];
 
   return $styles;
diff --git a/hooks/usePressInOut.tsx b/hooks/usePressInOut.tsx
index 182ff0832..814815976 100644
--- a/hooks/usePressInOut.tsx
+++ b/hooks/usePressInOut.tsx
@@ -1,13 +1,15 @@
 import { useCallback } from "react";
 import {
-  useSharedValue,
   useAnimatedReaction,
+  useSharedValue,
   withTiming,
 } from "react-native-reanimated";
 
-import { timing } from "../theme";
+import { useAppTheme } from "@theme/useAppTheme";
 
 export function usePressInOut() {
+  const { theme } = useAppTheme();
+
   const pressedInAV = useSharedValue(0);
 
   const hasTriggeredHapticAV = useSharedValue(false);
@@ -22,12 +24,12 @@ export function usePressInOut() {
   );
 
   const handlePressIn = useCallback(() => {
-    pressedInAV.value = withTiming(1, { duration: timing.veryFast });
-  }, [pressedInAV]);
+    pressedInAV.value = withTiming(1, { duration: theme.timing.veryFast });
+  }, [pressedInAV, theme]);
 
   const handlePressOut = useCallback(() => {
-    pressedInAV.value = withTiming(0, { duration: timing.veryFast });
-  }, [pressedInAV]);
+    pressedInAV.value = withTiming(0, { duration: theme.timing.veryFast });
+  }, [pressedInAV, theme]);
 
   return {
     pressedInAV,
diff --git a/ios/Podfile.lock b/ios/Podfile.lock
index fdc69dafd..cc7507def 100644
--- a/ios/Podfile.lock
+++ b/ios/Podfile.lock
@@ -277,6 +277,8 @@ PODS:
     - ExpoModulesCore
   - ExpoKeepAwake (13.0.2):
     - ExpoModulesCore
+  - ExpoLinearGradient (13.0.2):
+    - ExpoModulesCore
   - ExpoLocalization (15.0.3):
     - ExpoModulesCore
   - ExpoModulesCore (1.12.23):
@@ -1691,8 +1693,6 @@ PODS:
     - React-logger (= 0.74.5)
     - React-perflogger (= 0.74.5)
     - React-utils (= 0.74.5)
-  - ReactNativeAvoidSoftinput (4.0.1):
-    - React-Core
   - ReactNativeIosContextMenu (2.5.1):
     - ContextMenuAuxiliaryPreview (~> 0.3)
     - DGSwiftUtilities
@@ -1710,6 +1710,8 @@ PODS:
     - React-Core
   - RNCClipboard (1.14.1):
     - React-Core
+  - RNCMaskedView (0.3.1):
+    - React-Core
   - RNDeviceInfo (10.9.0):
     - React-Core
   - RNFlashList (1.6.4):
@@ -1882,6 +1884,7 @@ DEPENDENCIES:
   - ExpoImageManipulator (from `../node_modules/expo-image-manipulator/ios`)
   - ExpoImagePicker (from `../node_modules/expo-image-picker/ios`)
   - ExpoKeepAwake (from `../node_modules/expo-keep-awake/ios`)
+  - ExpoLinearGradient (from `../node_modules/expo-linear-gradient/ios`)
   - ExpoLocalization (from `../node_modules/expo-localization/ios`)
   - ExpoModulesCore (from `../node_modules/expo-modules-core`)
   - ExpoSecureStore (from `../node_modules/expo-secure-store/ios`)
@@ -1966,13 +1969,13 @@ DEPENDENCIES:
   - React-runtimescheduler (from `../node_modules/react-native/ReactCommon/react/renderer/runtimescheduler`)
   - React-utils (from `../node_modules/react-native/ReactCommon/react/utils`)
   - ReactCommon/turbomodule/core (from `../node_modules/react-native/ReactCommon`)
-  - ReactNativeAvoidSoftinput (from `../node_modules/react-native-avoid-softinput`)
   - ReactNativeIosContextMenu (from `../node_modules/react-native-ios-context-menu`)
   - ReactNativeIosUtilities (from `../node_modules/react-native-ios-utilities`)
   - rn-fetch-blob (from `../node_modules/rn-fetch-blob`)
   - RNAWSCognito (from `../node_modules/amazon-cognito-identity-js`)
   - "RNCAsyncStorage (from `../node_modules/@react-native-async-storage/async-storage`)"
   - "RNCClipboard (from `../node_modules/@react-native-clipboard/clipboard`)"
+  - "RNCMaskedView (from `../node_modules/@react-native-masked-view/masked-view`)"
   - RNDeviceInfo (from `../node_modules/react-native-device-info`)
   - "RNFlashList (from `../node_modules/@shopify/flash-list`)"
   - RNFS (from `../node_modules/react-native-fs`)
@@ -2088,6 +2091,8 @@ EXTERNAL SOURCES:
     :path: "../node_modules/expo-image-picker/ios"
   ExpoKeepAwake:
     :path: "../node_modules/expo-keep-awake/ios"
+  ExpoLinearGradient:
+    :path: "../node_modules/expo-linear-gradient/ios"
   ExpoLocalization:
     :path: "../node_modules/expo-localization/ios"
   ExpoModulesCore:
@@ -2245,8 +2250,6 @@ EXTERNAL SOURCES:
     :path: "../node_modules/react-native/ReactCommon/react/utils"
   ReactCommon:
     :path: "../node_modules/react-native/ReactCommon"
-  ReactNativeAvoidSoftinput:
-    :path: "../node_modules/react-native-avoid-softinput"
   ReactNativeIosContextMenu:
     :path: "../node_modules/react-native-ios-context-menu"
   ReactNativeIosUtilities:
@@ -2259,6 +2262,8 @@ EXTERNAL SOURCES:
     :path: "../node_modules/@react-native-async-storage/async-storage"
   RNCClipboard:
     :path: "../node_modules/@react-native-clipboard/clipboard"
+  RNCMaskedView:
+    :path: "../node_modules/@react-native-masked-view/masked-view"
   RNDeviceInfo:
     :path: "../node_modules/react-native-device-info"
   RNFlashList:
@@ -2326,6 +2331,7 @@ SPEC CHECKSUMS:
   ExpoImageManipulator: aea99205c66043a00a0af90e345395637b9902fa
   ExpoImagePicker: 12a420923383ae38dccb069847218f27a3b87816
   ExpoKeepAwake: 3b8815d9dd1d419ee474df004021c69fdd316d08
+  ExpoLinearGradient: 8cec4a09426d8934c433e83cb36262d72c667fce
   ExpoLocalization: f04eeec2e35bed01ab61c72ee1768ec04d093d01
   ExpoModulesCore: e3c518e094990b3ad960edbd19c291f2a1b56b0a
   ExpoSecureStore: 060cebcb956b80ddae09821610ac1aa9e1ac74cd
@@ -2417,13 +2423,13 @@ SPEC CHECKSUMS:
   React-runtimescheduler: db7189185a2e5912b0d17194302e501f801a381e
   React-utils: 3f1fcffc14893afb9a7e5b7c736353873cc5fc95
   ReactCommon: f79ae672224dc1e6c2d932062176883c98eebd57
-  ReactNativeAvoidSoftinput: a096aae8faf85c0f3225c2179bccdab00b8b6354
   ReactNativeIosContextMenu: e5f972174bd78ab3a552bd6ee4745762ffaa42b3
   ReactNativeIosUtilities: 8ea45df073a05d24b9fd75e4ec5fe1de19051466
   rn-fetch-blob: f065bb7ab7fb48dd002629f8bdcb0336602d3cba
   RNAWSCognito: fe0c870c7cd9970a2efefc075b3f2d75eac913c7
   RNCAsyncStorage: 826b603ae9c0f88b5ac4e956801f755109fa4d5c
   RNCClipboard: 0a720adef5ec193aa0e3de24c3977222c7e52a37
+  RNCMaskedView: 090213d32d8b3bb83a4dcb7d12c18f0152591906
   RNDeviceInfo: 02ea8b23e2280fa18e00a06d7e62804d74028579
   RNFlashList: b521ebdd7f9352673817f1d98e8bdc0c8cf8545b
   RNFS: 4ac0f0ea233904cb798630b3c077808c06931688
@@ -2449,7 +2455,7 @@ SPEC CHECKSUMS:
   web3.swift: 2263d1e12e121b2c42ffb63a5a7beb1acaf33959
   XMTP: 09faa347569b092005997364f7fe787ccc33f3d5
   XMTPReactNative: 0c92d55c576ac6ff0775357fa60e90ea8e73afc2
-  Yoga: 1ab23c1835475da69cf14e211a560e73aab24cb0
+  Yoga: 33622183a85805e12703cd618b2c16bfd18bfffb
 
 PODFILE CHECKSUM: 137cb0cd2dafbfb3e5b9343435f9db8e28690806
 
diff --git a/package.json b/package.json
index bc03d98fd..bd9d70f84 100644
--- a/package.json
+++ b/package.json
@@ -56,6 +56,7 @@
     "@react-native-async-storage/async-storage": "1.23.1",
     "@react-native-clipboard/clipboard": "^1.14.1",
     "@react-native-community/netinfo": "11.3.1",
+    "@react-native-masked-view/masked-view": "0.3.1",
     "@react-native-menu/menu": "^1.1.2",
     "@react-native/metro-config": "^0.73.3",
     "@react-navigation/drawer": "^6.6.6",
@@ -116,6 +117,7 @@
     "expo-image": "~1.12.15",
     "expo-image-manipulator": "~12.0.5",
     "expo-image-picker": "~15.0.7",
+    "expo-linear-gradient": "~13.0.2",
     "expo-linking": "~6.3.1",
     "expo-localization": "^15.0.3",
     "expo-navigation-bar": "~3.0.7",
@@ -135,6 +137,7 @@
     "i18n-js": "3.9.2",
     "ipfs-car": "^1.0.0",
     "libphonenumber-js": "^1.10.49",
+    "lodash": "^4.17.21",
     "match-sorter": "^6.3.4",
     "mime": "^4.0.4",
     "os-browserify": "^0.3.0",
@@ -217,6 +220,7 @@
     "@types/elliptic": "^6.4.14",
     "@types/i18n-js": "^3.8.9",
     "@types/jest": "^29.5.12",
+    "@types/lodash": "^4.17.13",
     "@types/react": "~18.2.79",
     "@types/react-native-shared-group-preferences": "^1.1.1",
     "@types/text-encoding": "^0.0.39",
diff --git a/screens/NewAccount/NewAccountPrivateKeyScreen.tsx b/screens/NewAccount/NewAccountPrivateKeyScreen.tsx
index 95e8fc864..07594b4fd 100644
--- a/screens/NewAccount/NewAccountPrivateKeyScreen.tsx
+++ b/screens/NewAccount/NewAccountPrivateKeyScreen.tsx
@@ -7,15 +7,17 @@ import { Button } from "../../design-system/Button/Button";
 import { VStack } from "../../design-system/VStack";
 import { translate } from "../../i18n";
 import { useRouter } from "../../navigation/useNavigation";
-import { spacing } from "../../theme";
 import { sentryTrackError } from "../../utils/sentry";
 import { isMissingConverseProfile } from "../Onboarding/Onboarding.utils";
 import {
   PrivateKeyInput,
   useLoginWithPrivateKey,
 } from "../Onboarding/OnboardingPrivateKeyScreen";
+import { useAppTheme } from "@theme/useAppTheme";
 
 export const NewAccountPrivateKeyScreen = memo(function () {
+  const { theme } = useAppTheme();
+
   const { loading, loginWithPrivateKey } = useLoginWithPrivateKey();
   const [privateKey, setPrivateKey] = useState("");
 
@@ -48,11 +50,11 @@ export const NewAccountPrivateKeyScreen = memo(function () {
         </NewAccountPictoTitleSubtitle.Subtitle>
       </NewAccountPictoTitleSubtitle.Container>
 
-      <VStack style={{ rowGap: spacing.md }}>
+      <VStack style={{ rowGap: theme.spacing.md }}>
         <PrivateKeyInput value={privateKey} onChange={setPrivateKey} />
         <VStack
           style={{
-            rowGap: spacing.xs,
+            rowGap: theme.spacing.xs,
           }}
         >
           <Button
diff --git a/screens/NewAccount/NewAccountScreen.tsx b/screens/NewAccount/NewAccountScreen.tsx
index f8c5a6b94..04e76355c 100644
--- a/screens/NewAccount/NewAccountScreen.tsx
+++ b/screens/NewAccount/NewAccountScreen.tsx
@@ -2,7 +2,7 @@ import { ConnectViaWalletPopularWalletsTableView } from "@components/Onboarding/
 import { useInstalledWallets } from "@components/Onboarding/ConnectViaWallet/ConnectViaWalletSupportedWallets";
 import { memo } from "react";
 import { Alert } from "react-native";
-
+import { useAppTheme } from "@theme/useAppTheme";
 import { NewAccountScreenComp } from "../../components/NewAccount/NewAccountScreenComp";
 import { NewAccountPictoTitleSubtitle } from "../../components/NewAccount/NewAccountTitleSubtitlePicto";
 import {
@@ -15,9 +15,10 @@ import TableView from "../../components/TableView/TableView";
 import { useAccountsStore } from "../../data/store/accountsStore";
 import { translate } from "../../i18n";
 import { useRouter } from "../../navigation/useNavigation";
-import { spacing } from "../../theme";
 
 export const NewAccountScreen = memo(function NewAccountScreen() {
+  const { theme } = useAppTheme();
+
   const router = useRouter();
 
   const walletsInstalled = useInstalledWallets();
@@ -29,7 +30,7 @@ export const NewAccountScreen = memo(function NewAccountScreen() {
       safeAreaEdges={["bottom"]}
       preset="scroll"
       contentContainerStyle={{
-        paddingHorizontal: spacing.md,
+        paddingHorizontal: theme.spacing.md,
       }}
     >
       <NewAccountPictoTitleSubtitle.Container>
diff --git a/screens/NewAccount/NewAccountUserProfileScreen.tsx b/screens/NewAccount/NewAccountUserProfileScreen.tsx
index 8905018bc..b0bd060e9 100644
--- a/screens/NewAccount/NewAccountUserProfileScreen.tsx
+++ b/screens/NewAccount/NewAccountUserProfileScreen.tsx
@@ -2,6 +2,7 @@ import { NativeStackScreenProps } from "@react-navigation/native-stack";
 import { memo, useCallback, useRef } from "react";
 import { TextInput, View, useColorScheme } from "react-native";
 
+import { useAppTheme } from "@theme/useAppTheme";
 import Avatar from "../../components/Avatar";
 import Button from "../../components/Button/Button";
 import { NewAccountScreenComp } from "../../components/NewAccount/NewAccountScreenComp";
@@ -11,7 +12,6 @@ import { Text } from "../../design-system/Text";
 import { VStack } from "../../design-system/VStack";
 import { translate } from "../../i18n";
 import { textSecondaryColor } from "../../styles/colors";
-import { spacing } from "../../theme";
 import { sentryTrackError } from "../../utils/sentry";
 import { NavigationParamList } from "../Navigation/Navigation";
 import {
@@ -27,6 +27,8 @@ export const NewAccountUserProfileScreen = memo(
   ) {
     const { navigation } = props;
 
+    const { theme } = useAppTheme();
+
     const colorScheme = useColorScheme();
 
     const { profile, setProfile } = useProfile();
@@ -118,7 +120,7 @@ export const NewAccountUserProfileScreen = memo(
 
         <VStack
           style={{
-            rowGap: spacing.sm,
+            rowGap: theme.spacing.sm,
           }}
         >
           <Text style={styles.p}>
diff --git a/screens/Onboarding/OnboardingNotificationsScreen.tsx b/screens/Onboarding/OnboardingNotificationsScreen.tsx
index ef6ff373e..168462d0f 100644
--- a/screens/Onboarding/OnboardingNotificationsScreen.tsx
+++ b/screens/Onboarding/OnboardingNotificationsScreen.tsx
@@ -4,6 +4,7 @@ import * as Linking from "expo-linking";
 import React from "react";
 import { Platform } from "react-native";
 
+import { useAppTheme } from "@theme/useAppTheme";
 import Button from "../../components/Button/Button";
 import { OnboardingPictoTitleSubtitle } from "../../components/Onboarding/OnboardingPictoTitleSubtitle";
 import { OnboardingPrimaryCtaButton } from "../../components/Onboarding/OnboardingPrimaryCtaButton";
@@ -12,7 +13,6 @@ import { useSettingsStore } from "../../data/store/accountsStore";
 import { useAppStore } from "../../data/store/appStore";
 import { setAuthStatus } from "../../data/store/authStore";
 import { VStack } from "../../design-system/VStack";
-import { spacing } from "../../theme";
 import { requestPushNotificationsPermissions } from "../../utils/notifications";
 import { sentryTrackError } from "../../utils/sentry";
 import { NavigationParamList } from "../Navigation/Navigation";
@@ -20,6 +20,8 @@ import { NavigationParamList } from "../Navigation/Navigation";
 export function OnboardingNotificationsScreen(
   props: NativeStackScreenProps<NavigationParamList, "OnboardingNotifications">
 ) {
+  const { theme } = useAppTheme();
+
   const setNotificationsSettings = useSettingsStore(
     (s) => s.setNotificationsSettings
   );
@@ -56,7 +58,7 @@ export function OnboardingNotificationsScreen(
 
       <VStack
         style={{
-          rowGap: spacing.lg,
+          rowGap: theme.spacing.lg,
           width: "100%",
           alignItems: "center",
         }}
diff --git a/screens/Onboarding/OnboardingUserProfileScreen.tsx b/screens/Onboarding/OnboardingUserProfileScreen.tsx
index d8e37ea4c..cb3daff83 100644
--- a/screens/Onboarding/OnboardingUserProfileScreen.tsx
+++ b/screens/Onboarding/OnboardingUserProfileScreen.tsx
@@ -20,7 +20,7 @@ import {
   useColorScheme,
 } from "react-native";
 
-import { needToShowNotificationsPermissions } from "./Onboarding.utils";
+import { useAppTheme } from "@theme/useAppTheme";
 import Avatar from "../../components/Avatar";
 import Button from "../../components/Button/Button";
 import { OnboardingPictoTitleSubtitle } from "../../components/Onboarding/OnboardingPictoTitleSubtitle";
@@ -39,7 +39,6 @@ import { setAuthStatus } from "../../data/store/authStore";
 import { useSelect } from "../../data/store/storeHelpers";
 import { VStack } from "../../design-system/VStack";
 import { translate } from "../../i18n";
-import { spacing } from "../../theme";
 import { checkUsernameValid, claimProfile } from "../../utils/api";
 import { uploadFile } from "../../utils/attachment";
 import { executeAfterKeyboardClosed } from "../../utils/keyboard";
@@ -54,6 +53,7 @@ import {
   formatEphemeralUsername,
 } from "../../utils/str";
 import { NavigationParamList } from "../Navigation/Navigation";
+import { needToShowNotificationsPermissions } from "./Onboarding.utils";
 
 export type ProfileType = {
   avatar?: string;
@@ -66,6 +66,8 @@ export const OnboardingUserProfileScreen = (
 ) => {
   const { navigation } = props;
 
+  const { theme } = useAppTheme();
+
   const colorScheme = useColorScheme();
 
   const { profile, setProfile } = useProfile();
@@ -165,7 +167,7 @@ export const OnboardingUserProfileScreen = (
 
       <VStack
         style={{
-          rowGap: spacing.sm,
+          rowGap: theme.spacing.sm,
         }}
       >
         <Text style={styles.p}>
diff --git a/screens/ShareProfile.tsx b/screens/ShareProfile.tsx
index 7759116b7..69b3209e6 100644
--- a/screens/ShareProfile.tsx
+++ b/screens/ShareProfile.tsx
@@ -18,6 +18,7 @@ import {
 } from "react-native";
 import QRCode from "react-native-qrcode-svg";
 
+import { useAppTheme } from "@theme/useAppTheme";
 import AndroidBackAction from "../components/AndroidBackAction";
 import Avatar from "../components/Avatar";
 import Button from "../components/Button/Button";
@@ -29,7 +30,6 @@ import {
   useCurrentAccount,
   useProfilesStore,
 } from "../data/store/accountsStore";
-import { spacing } from "../theme";
 import {
   getPreferredAvatar,
   getPreferredName,
@@ -195,6 +195,8 @@ export default function ShareProfileScreen({
 
 const useStyles = () => {
   const colorScheme = useColorScheme();
+  const { theme } = useAppTheme();
+
   return StyleSheet.create({
     shareProfile: {
       flex: 1,
@@ -245,7 +247,7 @@ const useStyles = () => {
       flex: 1,
       justifyContent: "flex-end",
       alignItems: "center",
-      paddingHorizontal: spacing.lg,
+      paddingHorizontal: theme.spacing.lg,
     },
     shareButtonContainerCompact: {
       flex: 0,
diff --git a/theme/index.ts b/theme/index.ts
deleted file mode 100644
index 25eafc28f..000000000
--- a/theme/index.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-export * from "./colorsLight";
-export * from "./spacing";
-export * from "./typography";
-export * from "./timing";
diff --git a/theme/shadow.ts b/theme/shadow.ts
new file mode 100644
index 000000000..61885e051
--- /dev/null
+++ b/theme/shadow.ts
@@ -0,0 +1,15 @@
+import { darkPalette } from "@theme/palette";
+
+export const shadow = {
+  big: {
+    shadowColor: darkPalette.alpha15,
+    shadowOffset: { width: 0, height: 4 },
+    shadowOpacity: 1,
+    shadowRadius: 16,
+    elevation: 16,
+  },
+};
+
+export type IShadow = typeof shadow;
+
+export type IShadowKey = keyof typeof shadow;
diff --git a/theme/useAppTheme.ts b/theme/useAppTheme.ts
index 63d5fb116..eabe153cc 100644
--- a/theme/useAppTheme.ts
+++ b/theme/useAppTheme.ts
@@ -14,6 +14,7 @@ import {
 } from "react";
 import { StyleProp, useColorScheme } from "react-native";
 
+import { IShadow, shadow } from "@theme/shadow";
 import { IAvatarSize, avatarSize } from "./avatar";
 import { IBorderRadius, borderRadius } from "./border-radius";
 import { IBorderWidth, borderWidth } from "./borders";
@@ -36,6 +37,7 @@ export interface Theme {
   iconSize: IIconSize;
   typography: ITypography;
   timing: Timing;
+  shadow: IShadow;
   isDark: boolean;
 }
 
@@ -49,6 +51,7 @@ export const lightTheme: Theme = {
   avatarSize,
   iconSize,
   timing,
+  shadow,
   isDark: false,
 };
 export const darkTheme: Theme = {
@@ -60,6 +63,7 @@ export const darkTheme: Theme = {
   avatarSize,
   iconSize,
   timing,
+  shadow,
   isDark: true,
 };
 
@@ -205,3 +209,20 @@ export const useAppTheme = (): UseAppThemeValue => {
     themed,
   };
 };
+
+export function flattenThemedStyles<T>(args: {
+  styles: ThemedStyle<T> | StyleProp<T> | ThemedStyleArray<T>;
+  theme: Theme;
+}): T {
+  const { styles, theme } = args;
+  const flatStyles = [styles].flat(3);
+
+  const processedStyles = flatStyles.map((style) => {
+    if (typeof style === "function") {
+      return (style as ThemedStyle<T>)(theme);
+    }
+    return style;
+  });
+
+  return Object.assign({}, ...processedStyles);
+}
diff --git a/yarn.lock b/yarn.lock
index 44a6b7b50..e35ec9460 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -4824,6 +4824,11 @@
   resolved "https://registry.yarnpkg.com/@react-native-community/netinfo/-/netinfo-11.3.1.tgz#4539371a2f4bd402d932031be82c2449ed63a1a5"
   integrity sha512-UBnJxyV0b7i9Moa97Av+HKho1ByzX0DtbJXzUQS5E3xhQs6P2D/Os0iw3ouy7joY1TVd6uIhplPbr7l1SJNaNQ==
 
+"@react-native-masked-view/masked-view@0.3.1":
+  version "0.3.1"
+  resolved "https://registry.yarnpkg.com/@react-native-masked-view/masked-view/-/masked-view-0.3.1.tgz#5bd76f17004a6ccbcec03856893777ee91f23d29"
+  integrity sha512-uVm8U6nwFIlUd1iDIB5cS+lDadApKR+l8k4k84d9hn+GN4lzAIJhUZ9syYX7c022MxNgAlbxoFLt0pqKoyaAGg==
+
 "@react-native-menu/menu@^1.1.2":
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/@react-native-menu/menu/-/menu-1.1.2.tgz#972406d25296a0d01614dc36fae7884c2a08dafd"
@@ -6686,6 +6691,11 @@
   dependencies:
     "@types/node" "*"
 
+"@types/lodash@^4.17.13":
+  version "4.17.13"
+  resolved "https://registry.yarnpkg.com/@types/lodash/-/lodash-4.17.13.tgz#786e2d67cfd95e32862143abe7463a7f90c300eb"
+  integrity sha512-lfx+dftrEZcdBPczf9d0Qv0x+j/rfNCMuC6OcfXmO8gkfeNAY88PgKUbvG56whcN23gc27yenwF6oJZXGFpYxg==
+
 "@types/long@^4.0.1":
   version "4.0.2"
   resolved "https://registry.yarnpkg.com/@types/long/-/long-4.0.2.tgz#b74129719fc8d11c01868010082d483b7545591a"
@@ -12066,6 +12076,11 @@ expo-keep-awake@~13.0.2:
   resolved "https://registry.yarnpkg.com/expo-keep-awake/-/expo-keep-awake-13.0.2.tgz#5ef31311a339671eec9921b934fdd90ab9652b0e"
   integrity sha512-kKiwkVg/bY0AJ5q1Pxnm/GvpeB6hbNJhcFsoOWDh2NlpibhCLaHL826KHUM+WsnJRbVRxJ+K9vbPRHEMvFpVyw==
 
+expo-linear-gradient@~13.0.2:
+  version "13.0.2"
+  resolved "https://registry.yarnpkg.com/expo-linear-gradient/-/expo-linear-gradient-13.0.2.tgz#21bd7bc7c71ef4f7c089521daa16db729d2aec5f"
+  integrity sha512-EDcILUjRKu4P1rtWcwciN6CSyGtH7Bq4ll3oTRV7h3h8oSzSilH1g6z7kTAMlacPBKvMnkkWOGzW6KtgMKEiTg==
+
 expo-linking@~6.3.1:
   version "6.3.1"
   resolved "https://registry.yarnpkg.com/expo-linking/-/expo-linking-6.3.1.tgz#05aef8a42bd310391d0b00644be40d80ece038d9"

From 09a89e8b64f0a434040e3caf21803a62db9057d3 Mon Sep 17 00:00:00 2001
From: Thierry <skodathierry@gmail.com>
Date: Mon, 4 Nov 2024 20:43:26 -0500
Subject: [PATCH 2/9] better snackbar animation

---
 components/Snackbar/Snackbar.constants.ts     |  6 +++
 components/Snackbar/Snackbar.example.tsx      | 29 ++++------
 components/Snackbar/Snackbar.tsx              | 54 +++++++++++--------
 .../SnackbarBackdrop/SnackbarBackdrop.tsx     | 18 ++-----
 theme/animations.ts                           |  6 +++
 5 files changed, 60 insertions(+), 53 deletions(-)

diff --git a/components/Snackbar/Snackbar.constants.ts b/components/Snackbar/Snackbar.constants.ts
index a5a3a5e9c..dd30aa757 100644
--- a/components/Snackbar/Snackbar.constants.ts
+++ b/components/Snackbar/Snackbar.constants.ts
@@ -13,3 +13,9 @@ export const SNACKBAR_BACKDROP_ADDITIONAL_HEIGHT = 90;
 
 export const SNACKBAR_BOTTOM_OFFSET =
   initialWindowMetrics?.insets.bottom ?? spacing.md;
+
+export const SNACKBAR_BACKDROP_MAX_HEIGHT =
+  SNACKBARS_MAX_VISIBLE *
+    (SNACKBAR_LARGE_TEXT_HEIGHT + SNACKBAR_SPACE_BETWEEN_SNACKBARS) +
+  SNACKBAR_BACKDROP_ADDITIONAL_HEIGHT +
+  SNACKBAR_BOTTOM_OFFSET;
diff --git a/components/Snackbar/Snackbar.example.tsx b/components/Snackbar/Snackbar.example.tsx
index 2882240f4..154dcf1e2 100644
--- a/components/Snackbar/Snackbar.example.tsx
+++ b/components/Snackbar/Snackbar.example.tsx
@@ -1,14 +1,17 @@
 import { Screen } from "@components/Screen/ScreenComp/Screen";
 import { showSnackbar } from "@components/Snackbar/Snackbar.service";
 import { Button } from "@design-system/Button/Button";
-import { Text } from "@design-system/Text";
 import { VStack } from "@design-system/VStack";
 import { useAppTheme } from "@theme/useAppTheme";
+import { Image } from "expo-image";
 import { memo } from "react";
+import { Dimensions } from "react-native";
 
 export const SnackbarExample = memo(function SnackbarExample() {
   const { theme } = useAppTheme();
 
+  const windowWidth = Dimensions.get("window").width;
+
   return (
     <Screen safeAreaEdges={["bottom", "top"]}>
       <VStack style={{ padding: theme.spacing.md, rowGap: theme.spacing.md }}>
@@ -76,24 +79,14 @@ export const SnackbarExample = memo(function SnackbarExample() {
             })
           }
         />
-
-        <Text>
-          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do
-          eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
-          minim veniam, quis nostrud exercitation ullamco laboris nisi ut
-          aliquip ex ea commodo consequat. Duis aute irure dolor in
-          reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
-          pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
-          culpa qui officia deserunt mollit anim id est laborum. Sed ut
-          perspiciatis unde omnis iste natus error sit voluptatem accusantium
-          doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo
-          inventore veritatis et quasi architecto beatae vitae dicta sunt
-          explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut
-          odit aut fugit. Nemo enim ipsam voluptatem quia voluptas sit
-          aspernatur aut odit aut fugit. Nemo enim ipsam voluptatem quia
-          voluptas sit aspernatur aut odit aut fugit.
-        </Text>
       </VStack>
+
+      <Image
+        source={{
+          uri: `https://picsum.photos/500/500`,
+        }}
+        style={{ width: 500, height: 500 }}
+      />
     </Screen>
   );
 });
diff --git a/components/Snackbar/Snackbar.tsx b/components/Snackbar/Snackbar.tsx
index b4140e8b0..e5ac3b0fd 100644
--- a/components/Snackbar/Snackbar.tsx
+++ b/components/Snackbar/Snackbar.tsx
@@ -15,11 +15,13 @@ import { AnimatedHStack, HStack } from "@design-system/HStack";
 import { IconButton } from "@design-system/IconButton/IconButton";
 import { Text } from "@design-system/Text";
 import { AnimatedVStack } from "@design-system/VStack";
+import { SICK_SPRING_CONFIG } from "@theme/animations";
 import { useAppTheme } from "@theme/useAppTheme";
 import { memo, useCallback, useEffect } from "react";
 import { useWindowDimensions } from "react-native";
 import { Gesture, GestureDetector } from "react-native-gesture-handler";
 import {
+  interpolate,
   runOnJS,
   useAnimatedStyle,
   useSharedValue,
@@ -28,14 +30,6 @@ import {
 } from "react-native-reanimated";
 import { SNACKBAR_SPACE_BETWEEN_SNACKBARS } from "./Snackbar.constants";
 
-const withSpringConfig = {
-  duration: 500,
-  dampingRatio: 1.5,
-  stiffness: 1,
-  overshootClamping: false,
-  restSpeedThreshold: 50,
-};
-
 type SnackbarProps = {
   snackbar: ISnackbar;
   onDismiss: () => void;
@@ -49,17 +43,22 @@ export const Snackbar = memo(
 
     const isFirstSnack = getNumberOfSnackbars() === 1;
     const initialBottomPosition = isFirstSnack
-      ? -SNACKBAR_HEIGHT
+      ? -SNACKBAR_HEIGHT / 2
       : SNACKBAR_BOTTOM_OFFSET;
 
     const snackbarIndexAV = useSharedValue(0);
     const bottomAV = useSharedValue(initialBottomPosition);
     const translateXAV = useSharedValue(0);
     const isSwipingAV = useSharedValue(false);
+    const firstSnackbarRenderProgressAV = useSharedValue(
+      // We only want the first snackbar to animate in with a special animation
+      isFirstSnack ? 0 : 1
+    );
 
     useEffect(() => {
-      bottomAV.value = withSpring(SNACKBAR_BOTTOM_OFFSET, withSpringConfig);
-    }, [bottomAV]);
+      bottomAV.value = withSpring(SNACKBAR_BOTTOM_OFFSET, SICK_SPRING_CONFIG);
+      firstSnackbarRenderProgressAV.value = withSpring(1, SICK_SPRING_CONFIG);
+    }, [bottomAV, firstSnackbarRenderProgressAV]);
 
     useEffect(() => {
       const unsubscribe = onSnackbarsChange((snackbars) => {
@@ -67,10 +66,8 @@ export const Snackbar = memo(
           (item) => item.key === snackbar.key
         );
 
-        console.log("snackbarIndex:", snackbarIndex);
-
         // Set the new new index of the current snackbar
-        snackbarIndexAV.value = snackbarIndex;
+        snackbarIndexAV.value = withSpring(snackbarIndex, SICK_SPRING_CONFIG);
 
         if (snackbarIndex === -1) {
           return;
@@ -87,7 +84,7 @@ export const Snackbar = memo(
 
         bottomAV.value = withSpring(
           SNACKBAR_BOTTOM_OFFSET + totalHeightBeforeThisSnackbar,
-          withSpringConfig
+          SICK_SPRING_CONFIG
         );
       });
 
@@ -134,21 +131,34 @@ export const Snackbar = memo(
         // Animate shadow radius based on snackbar position in stack
         // - Starts at 16 for first snackbar and decreases by 2.5 for each subsequent one
         // - Has minimum value of 2 to maintain some depth
-        shadowRadius: withTiming(Math.max(16 - snackbarIndexAV.value * 2.5, 2)),
+        shadowRadius: interpolate(snackbarIndexAV.value, [0, 10], [16, 2]),
         // Animate shadow opacity based on snackbar position
         // - First 3 snackbars have opacity of 1
         // - After 3rd snackbar, opacity decreases linearly by 0.05
         // - This creates a nice fading effect for stacked snackbars
-        shadowOpacity: withTiming(
-          snackbarIndexAV.value > 3 ? 1 - snackbarIndexAV.value * 0.15 : 1
+        shadowOpacity: interpolate(
+          snackbarIndexAV.value,
+          [0, 3, 10],
+          [1, 1, 0]
         ),
         // The content of the first two StackedToasts is visible
         // The content of the other StackedToasts is hidden
-        opacity: withTiming(
-          snackbarIndexAV.value < SNACKBARS_MAX_VISIBLE ? 1 : 0
+        opacity: interpolate(
+          snackbarIndexAV.value,
+          [0, SNACKBARS_MAX_VISIBLE - 1, SNACKBARS_MAX_VISIBLE],
+          [1, 1, 0]
         ),
-        // For the dragging animation
-        transform: [{ translateX: translateXAV.value }],
+        transform: [
+          // For the dragging animation
+          { translateX: translateXAV.value },
+          {
+            scale: interpolate(
+              firstSnackbarRenderProgressAV.value,
+              [0, 1],
+              [0.8, 1]
+            ),
+          },
+        ],
       }),
       []
     );
diff --git a/components/Snackbar/SnackbarBackdrop/SnackbarBackdrop.tsx b/components/Snackbar/SnackbarBackdrop/SnackbarBackdrop.tsx
index 3f4e20a27..bf2699f95 100644
--- a/components/Snackbar/SnackbarBackdrop/SnackbarBackdrop.tsx
+++ b/components/Snackbar/SnackbarBackdrop/SnackbarBackdrop.tsx
@@ -1,18 +1,15 @@
-import {
-  SNACKBARS_MAX_VISIBLE,
-  SNACKBAR_LARGE_TEXT_HEIGHT,
-  SNACKBAR_SPACE_BETWEEN_SNACKBARS,
-} from "@components/Snackbar/Snackbar.constants";
+import { SNACKBAR_BACKDROP_MAX_HEIGHT } from "@components/Snackbar/Snackbar.constants";
 import { useSnackbars } from "@components/Snackbar/Snackbar.service";
 import { useGradientHeight } from "@components/Snackbar/SnackbarBackdrop/SnackbarBackdrop.utils";
 import MaskedView from "@react-native-masked-view/masked-view";
+import { SICK_SPRING_CONFIG } from "@theme/animations";
 import { BlurView } from "expo-blur";
 import { LinearGradient } from "expo-linear-gradient";
 import { memo } from "react";
 import { StyleSheet, useWindowDimensions } from "react-native";
 import Animated, {
   useAnimatedStyle,
-  withTiming,
+  withSpring,
 } from "react-native-reanimated";
 
 // The Backdrop component creates a visually appealing background for stacked snackbars.
@@ -29,9 +26,7 @@ export const SnackbarBackdrop = memo(() => {
   const rAnimatedStyle = useAnimatedStyle(() => {
     const top = windowHeight - gradientHeight;
     return {
-      top: withTiming(top, {
-        duration: 500,
-      }),
+      top: withSpring(top, SICK_SPRING_CONFIG),
     };
   }, [windowHeight, snackbars.length]);
 
@@ -53,10 +48,7 @@ export const SnackbarBackdrop = memo(() => {
           />
         }
         style={{
-          height:
-            (SNACKBAR_LARGE_TEXT_HEIGHT + SNACKBAR_SPACE_BETWEEN_SNACKBARS) *
-              SNACKBARS_MAX_VISIBLE +
-            90,
+          height: SNACKBAR_BACKDROP_MAX_HEIGHT,
           width: "100%",
         }}
       >
diff --git a/theme/animations.ts b/theme/animations.ts
index f6d079491..d4a82d599 100644
--- a/theme/animations.ts
+++ b/theme/animations.ts
@@ -1,6 +1,7 @@
 import { Easing, FadeInDown, FadeInUp } from "react-native-reanimated";
 
 import { timing } from "./timing";
+import { SpringConfig } from "react-native-reanimated/lib/typescript/reanimated2/animation/springUtils";
 
 export const SICK_EASE_OUT = Easing.out(Easing.cubic);
 
@@ -8,6 +9,11 @@ export const SICK_DAMPING = 80;
 
 export const SICK_STIFFNESS = 200;
 
+export const SICK_SPRING_CONFIG: SpringConfig = {
+  damping: SICK_DAMPING,
+  stiffness: SICK_STIFFNESS,
+};
+
 export const animations = {
   spring: {
     damping: SICK_DAMPING,

From 491a1473a6d21c252b56a9f792475c1e939d544d Mon Sep 17 00:00:00 2001
From: Thierry <skodathierry@gmail.com>
Date: Mon, 4 Nov 2024 20:47:18 -0500
Subject: [PATCH 3/9] fix typing

---
 components/Snackbar/Snackbars.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/components/Snackbar/Snackbars.tsx b/components/Snackbar/Snackbars.tsx
index 3d62aabe4..22ba9a0f7 100644
--- a/components/Snackbar/Snackbars.tsx
+++ b/components/Snackbar/Snackbars.tsx
@@ -5,9 +5,10 @@ import {
 import React, { memo } from "react";
 import { Snackbar } from "./Snackbar";
 import { SnackbarBackdrop } from "@components/Snackbar/SnackbarBackdrop/SnackbarBackdrop";
+import { ISnackbar } from "@components/Snackbar/Snackbar.types";
 
 export type InternalSnackbarContextType = {
-  snackbars: SnackbarType[];
+  snackbars: ISnackbar[];
 };
 
 export const InternalSnackbarContext =

From 88fad02d42a71c8ed6142dcbe5f0b7cc306e1635 Mon Sep 17 00:00:00 2001
From: Thierry <skodathierry@gmail.com>
Date: Mon, 4 Nov 2024 21:09:31 -0500
Subject: [PATCH 4/9] small fixes

---
 components/Snackbar/Snackbar.constants.ts                | 3 ++-
 components/Snackbar/Snackbar.tsx                         | 9 +++++++--
 .../Snackbar/SnackbarBackdrop/SnackbarBackdrop.tsx       | 2 +-
 3 files changed, 10 insertions(+), 4 deletions(-)

diff --git a/components/Snackbar/Snackbar.constants.ts b/components/Snackbar/Snackbar.constants.ts
index dd30aa757..11e34238e 100644
--- a/components/Snackbar/Snackbar.constants.ts
+++ b/components/Snackbar/Snackbar.constants.ts
@@ -9,7 +9,8 @@ export const SNACKBARS_MAX_VISIBLE = 3;
 
 export const SNACKBAR_SPACE_BETWEEN_SNACKBARS = spacing.sm;
 
-export const SNACKBAR_BACKDROP_ADDITIONAL_HEIGHT = 90;
+export const SNACKBAR_BACKDROP_ADDITIONAL_HEIGHT =
+  SNACKBAR_LARGE_TEXT_HEIGHT * 2;
 
 export const SNACKBAR_BOTTOM_OFFSET =
   initialWindowMetrics?.insets.bottom ?? spacing.md;
diff --git a/components/Snackbar/Snackbar.tsx b/components/Snackbar/Snackbar.tsx
index e5ac3b0fd..702ed9cbf 100644
--- a/components/Snackbar/Snackbar.tsx
+++ b/components/Snackbar/Snackbar.tsx
@@ -155,7 +155,7 @@ export const Snackbar = memo(
             scale: interpolate(
               firstSnackbarRenderProgressAV.value,
               [0, 1],
-              [0.8, 1]
+              [0.9, 1]
             ),
           },
         ],
@@ -203,8 +203,8 @@ export const Snackbar = memo(
             >
               <HStack
                 style={{
+                  flex: 1,
                   paddingHorizontal: theme.spacing.xs,
-                  ...(!snackbar.isMultiLine && { flex: 1 }),
                   ...(snackbar.isMultiLine && { paddingTop: theme.spacing.xs }),
                 }}
               >
@@ -219,10 +219,15 @@ export const Snackbar = memo(
 
               <HStack
                 style={{
+                  // ...debugBorder(),
                   alignSelf: "flex-end",
                   columnGap: theme.spacing.xxxs,
                   alignItems: "center",
                   ...(!snackbar.isMultiLine && { height: "100%" }),
+                  ...(snackbar.isMultiLine && {
+                    flex: 1,
+                    paddingBottom: theme.spacing.xxxs,
+                  }),
                 }}
               >
                 {snackbar.actions?.map((action) => (
diff --git a/components/Snackbar/SnackbarBackdrop/SnackbarBackdrop.tsx b/components/Snackbar/SnackbarBackdrop/SnackbarBackdrop.tsx
index bf2699f95..ac26525b7 100644
--- a/components/Snackbar/SnackbarBackdrop/SnackbarBackdrop.tsx
+++ b/components/Snackbar/SnackbarBackdrop/SnackbarBackdrop.tsx
@@ -48,7 +48,7 @@ export const SnackbarBackdrop = memo(() => {
           />
         }
         style={{
-          height: SNACKBAR_BACKDROP_MAX_HEIGHT,
+          height: Math.min(gradientHeight * 1.5, SNACKBAR_BACKDROP_MAX_HEIGHT),
           width: "100%",
         }}
       >

From be0b2eff68a7906553dfdc579b02070d92a6934d Mon Sep 17 00:00:00 2001
From: Thierry <skodathierry@gmail.com>
Date: Fri, 8 Nov 2024 10:51:49 -0500
Subject: [PATCH 5/9] fix tests

---
 .../__tests__/__snapshots__/Button.test.tsx.snap  | 15 ++++++++++++---
 1 file changed, 12 insertions(+), 3 deletions(-)

diff --git a/components/__tests__/__snapshots__/Button.test.tsx.snap b/components/__tests__/__snapshots__/Button.test.tsx.snap
index e7ac5ee86..71f2d47ac 100644
--- a/components/__tests__/__snapshots__/Button.test.tsx.snap
+++ b/components/__tests__/__snapshots__/Button.test.tsx.snap
@@ -66,10 +66,13 @@ exports[`Button Component Default (Android) Button renders correctly with danger
         undefined,
         [
           {
-            "0": [Function],
             "color": "#FFFFFF",
             "flexGrow": 0,
             "flexShrink": 1,
+            "fontFamily": "SFProText-Regular",
+            "fontSize": 16,
+            "fontWeight": 400,
+            "lineHeight": 20,
             "textAlign": "center",
             "zIndex": 2,
           },
@@ -169,10 +172,13 @@ exports[`Button Component Default (Android) Button renders correctly with picto
         undefined,
         [
           {
-            "0": [Function],
             "color": "#FFFFFF",
             "flexGrow": 0,
             "flexShrink": 1,
+            "fontFamily": "SFProText-Regular",
+            "fontSize": 16,
+            "fontWeight": 400,
+            "lineHeight": 20,
             "textAlign": "center",
             "zIndex": 2,
           },
@@ -254,10 +260,13 @@ exports[`Button Component iOS Button renders correctly with primary variant 1`]
         undefined,
         [
           {
-            "0": [Function],
             "color": "#FFFFFF",
             "flexGrow": 0,
             "flexShrink": 1,
+            "fontFamily": "SFProText-Regular",
+            "fontSize": 16,
+            "fontWeight": 400,
+            "lineHeight": 20,
             "textAlign": "center",
             "zIndex": 2,
           },

From ad66bd178b3ca3348820abbf22ac45ff8c000554 Mon Sep 17 00:00:00 2001
From: Thierry <skodathierry@gmail.com>
Date: Tue, 12 Nov 2024 08:49:54 -0500
Subject: [PATCH 6/9] design system examples

---
 App.tsx                                       |   2 +-
 components/Snackbar/Snackbar.constants.ts     |   3 +-
 components/Snackbar/Snackbar.example.tsx      |  11 +-
 .../BottomSheet/BottomSheet.example.tsx       | 118 ++++++++++++++++++
 .../BottomSheetContentContainer.tsx           |   2 +
 design-system/Button/Button.example.tsx       |  55 ++++++++
 design-system/Examples.tsx                    |  93 ++++++++++++++
 design-system/Header/Header.example.tsx       |   0
 design-system/Icon/Icon.example.tsx           |  64 ++++++++++
 design-system/Icon/Icon.tsx                   |   6 +-
 design-system/Icon/Icon.types.ts              |  20 +--
 .../IconButton/IconButton.example.tsx         |  59 ++++++---
 design-system/IconButton/IconButton.tsx       |   3 +-
 design-system/Text/Text.example.tsx           |  56 +++++++++
 design-system/TextField/TextField.example.tsx |   8 +-
 design-system/TextField/TextField.tsx         |  21 ++--
 package.json                                  |   1 +
 screens/Main.tsx                              |   6 +
 theme/animations.ts                           |  28 +++++
 types/general.ts                              |   5 +
 20 files changed, 506 insertions(+), 55 deletions(-)
 create mode 100644 design-system/BottomSheet/BottomSheet.example.tsx
 create mode 100644 design-system/Button/Button.example.tsx
 create mode 100644 design-system/Examples.tsx
 create mode 100644 design-system/Header/Header.example.tsx
 create mode 100644 design-system/Icon/Icon.example.tsx
 create mode 100644 design-system/Text/Text.example.tsx

diff --git a/App.tsx b/App.tsx
index 35fb40473..fc027c8bb 100644
--- a/App.tsx
+++ b/App.tsx
@@ -29,6 +29,7 @@ import { KeyboardProvider } from "react-native-keyboard-controller";
 import { Provider as PaperProvider } from "react-native-paper";
 import { ThirdwebProvider } from "thirdweb/react";
 
+import { Snackbars } from "@components/Snackbar/Snackbars";
 import { xmtpCron, xmtpEngine } from "./components/XmtpEngine";
 import config from "./config";
 import {
@@ -47,7 +48,6 @@ import { registerBackgroundFetchTask } from "./utils/background";
 import { privySecureStorage } from "./utils/keychain/helpers";
 import { initSentry } from "./utils/sentry";
 import "./utils/splash/splash";
-import { Snackbars } from "@components/Snackbar/Snackbars";
 
 LogBox.ignoreLogs([
   "Privy: Expected status code 200, received 400", // Privy
diff --git a/components/Snackbar/Snackbar.constants.ts b/components/Snackbar/Snackbar.constants.ts
index 11e34238e..7acbc7139 100644
--- a/components/Snackbar/Snackbar.constants.ts
+++ b/components/Snackbar/Snackbar.constants.ts
@@ -9,8 +9,7 @@ export const SNACKBARS_MAX_VISIBLE = 3;
 
 export const SNACKBAR_SPACE_BETWEEN_SNACKBARS = spacing.sm;
 
-export const SNACKBAR_BACKDROP_ADDITIONAL_HEIGHT =
-  SNACKBAR_LARGE_TEXT_HEIGHT * 2;
+export const SNACKBAR_BACKDROP_ADDITIONAL_HEIGHT = SNACKBAR_LARGE_TEXT_HEIGHT;
 
 export const SNACKBAR_BOTTOM_OFFSET =
   initialWindowMetrics?.insets.bottom ?? spacing.md;
diff --git a/components/Snackbar/Snackbar.example.tsx b/components/Snackbar/Snackbar.example.tsx
index 154dcf1e2..cf6adca52 100644
--- a/components/Snackbar/Snackbar.example.tsx
+++ b/components/Snackbar/Snackbar.example.tsx
@@ -1,4 +1,3 @@
-import { Screen } from "@components/Screen/ScreenComp/Screen";
 import { showSnackbar } from "@components/Snackbar/Snackbar.service";
 import { Button } from "@design-system/Button/Button";
 import { VStack } from "@design-system/VStack";
@@ -13,8 +12,8 @@ export const SnackbarExample = memo(function SnackbarExample() {
   const windowWidth = Dimensions.get("window").width;
 
   return (
-    <Screen safeAreaEdges={["bottom", "top"]}>
-      <VStack style={{ padding: theme.spacing.md, rowGap: theme.spacing.md }}>
+    <VStack style={{ rowGap: theme.spacing.lg }}>
+      <VStack style={{ rowGap: theme.spacing.md }}>
         <Button
           text="Show Basic"
           onPress={() => showSnackbar({ message: "This is a basic snackbar" })}
@@ -83,10 +82,10 @@ export const SnackbarExample = memo(function SnackbarExample() {
 
       <Image
         source={{
-          uri: `https://picsum.photos/500/500`,
+          uri: `https://picsum.photos/600/600`,
         }}
-        style={{ width: 500, height: 500 }}
+        style={{ width: windowWidth - theme.spacing.lg * 2, height: 500 }}
       />
-    </Screen>
+    </VStack>
   );
 });
diff --git a/design-system/BottomSheet/BottomSheet.example.tsx b/design-system/BottomSheet/BottomSheet.example.tsx
new file mode 100644
index 000000000..3020ed0b4
--- /dev/null
+++ b/design-system/BottomSheet/BottomSheet.example.tsx
@@ -0,0 +1,118 @@
+import { useCallback } from "react";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+import { useAppTheme } from "@theme/useAppTheme";
+import { Button } from "@design-system/Button/Button";
+import { Text } from "@design-system/Text";
+import { VStack } from "../VStack";
+import { useBottomSheetModalRef } from "./BottomSheet.utils";
+import { BottomSheetContentContainer } from "./BottomSheetContentContainer";
+import { BottomSheetFlatList } from "./BottomSheetFlatList";
+import { BottomSheetHeader } from "./BottomSheetHeader";
+import { BottomSheetModal } from "./BottomSheetModal";
+
+export function BottomSheetExample() {
+  const { theme } = useAppTheme();
+  const basicBottomSheetRef = useBottomSheetModalRef();
+  const dynamicBottomSheetRef = useBottomSheetModalRef();
+  const listBottomSheetRef = useBottomSheetModalRef();
+
+  const handleBasicPress = useCallback(() => {
+    basicBottomSheetRef.current?.present();
+  }, [basicBottomSheetRef]);
+
+  const handleDynamicPress = useCallback(() => {
+    dynamicBottomSheetRef.current?.present();
+  }, [dynamicBottomSheetRef]);
+
+  const handleListPress = useCallback(() => {
+    listBottomSheetRef.current?.present();
+  }, [listBottomSheetRef]);
+
+  const data = Array.from({ length: 50 }, (_, i) => ({
+    id: i,
+    title: `Item ${i + 1}`,
+  }));
+
+  const insets = useSafeAreaInsets();
+
+  return (
+    <VStack
+      style={{
+        gap: theme.spacing.md,
+        padding: theme.spacing.lg,
+      }}
+    >
+      {/* Basic Bottom Sheet */}
+      <Button text="Basic Bottom Sheet" onPress={handleBasicPress} />
+      <BottomSheetModal ref={basicBottomSheetRef} snapPoints={["40%"]}>
+        <BottomSheetContentContainer
+          style={{
+            flex: 1,
+          }}
+        >
+          <BottomSheetHeader title="Basic Bottom Sheet" />
+          <VStack
+            style={{
+              flex: 1,
+            }}
+          />
+          <VStack
+            style={{
+              paddingHorizontal: theme.spacing.md,
+              rowGap: theme.spacing.xs,
+              paddingBottom: insets.bottom,
+            }}
+          >
+            <Button text="Continue" />
+          </VStack>
+        </BottomSheetContentContainer>
+      </BottomSheetModal>
+
+      {/* Dynamic Bottom Sheet */}
+      <Button text="Multiple Snap Points" onPress={handleDynamicPress} />
+      <BottomSheetModal
+        topInset={insets.top}
+        ref={dynamicBottomSheetRef}
+        snapPoints={["25%", "50%", "75%", "100%"]}
+      >
+        <BottomSheetContentContainer>
+          <BottomSheetHeader title="Multiple Snap Points" />
+          <VStack
+            style={{
+              paddingHorizontal: theme.spacing.md,
+            }}
+          >
+            <Text>
+              This bottom sheet has many snap points for fine-grained control
+            </Text>
+          </VStack>
+        </BottomSheetContentContainer>
+      </BottomSheetModal>
+
+      {/* Bottom Sheet with List */}
+      <Button text="Bottom Sheet with List" onPress={handleListPress} />
+      <BottomSheetModal
+        topInset={insets.top}
+        ref={listBottomSheetRef}
+        snapPoints={["50%", "100%"]}
+      >
+        <BottomSheetHeader title="List Example" />
+        <BottomSheetFlatList
+          data={data}
+          keyExtractor={(item) => item.id.toString()}
+          renderItem={({ item }) => (
+            <VStack
+              style={{
+                padding: theme.spacing.md,
+                borderBottomWidth: 1,
+                borderBottomColor: theme.colors.border.subtle,
+              }}
+            >
+              <Text>{item.title}</Text>
+            </VStack>
+          )}
+        />
+      </BottomSheetModal>
+    </VStack>
+  );
+}
diff --git a/design-system/BottomSheet/BottomSheetContentContainer.tsx b/design-system/BottomSheet/BottomSheetContentContainer.tsx
index 77a883bce..bde1f3dc8 100644
--- a/design-system/BottomSheet/BottomSheetContentContainer.tsx
+++ b/design-system/BottomSheet/BottomSheetContentContainer.tsx
@@ -2,6 +2,8 @@ import { BottomSheetView as GorhomBottomSheetView } from "@gorhom/bottom-sheet";
 import { BottomSheetViewProps } from "@gorhom/bottom-sheet/lib/typescript/components/bottomSheetView/types";
 import { memo } from "react";
 
+// Note: Don't use it when you use a BottomSheetFlatList. It seems to break the list scrolling.
+
 export const BottomSheetContentContainer = memo(
   function BottomSheetContentContainer(props: BottomSheetViewProps) {
     return <GorhomBottomSheetView {...props} />;
diff --git a/design-system/Button/Button.example.tsx b/design-system/Button/Button.example.tsx
new file mode 100644
index 000000000..384e93338
--- /dev/null
+++ b/design-system/Button/Button.example.tsx
@@ -0,0 +1,55 @@
+import { VStack } from "@design-system/VStack";
+import { useAppTheme } from "@theme/useAppTheme";
+import { Button } from "./Button";
+
+type IExampleProps = {
+  onPress?: () => void;
+};
+
+export function ButtonExample(args: IExampleProps) {
+  const { onPress } = args;
+
+  const { theme } = useAppTheme();
+
+  return (
+    <VStack
+      style={{
+        gap: theme.spacing.md,
+        backgroundColor: theme.colors.background.raised,
+      }}
+    >
+      {/* Basic Variants */}
+      <Button text="Fill Button" variant="fill" onPress={onPress} />
+      <Button text="Outline Button" variant="outline" onPress={onPress} />
+      <Button text="Link Button" variant="link" onPress={onPress} />
+
+      {/* Sizes */}
+      <Button text="Small Button" size="sm" onPress={onPress} />
+      {/* <Button text="Medium Button" size="md" onPress={onPress} /> */}
+      <Button text="Large Button" size="lg" onPress={onPress} />
+
+      {/* States */}
+      <Button text="Loading Button" loading={true} onPress={onPress} />
+      {/* <Button text="Disabled Button" disabled={true} onPress={onPress} /> */}
+
+      {/* With Icons */}
+      <Button text="Button with Icon" icon="search" onPress={onPress} />
+
+      {/* Custom Accessories */}
+      {/* <Button
+        size="sm"
+        text="Custom Left Accessory"
+        LeftAccessory={({ style }) => (
+          <Icon icon="chevron.left" color="white" style={style} />
+        )}
+        onPress={onPress}
+      /> */}
+
+      {/* i18n Example */}
+      {/* <Button tx="cancel" txOptions={{ name: "John" }} onPress={onPress} /> */}
+
+      {/* With Haptic Feedback */}
+      <Button text="Haptic Button" withHapticFeedback onPress={onPress} />
+    </VStack>
+  );
+}
diff --git a/design-system/Examples.tsx b/design-system/Examples.tsx
new file mode 100644
index 000000000..27ff03145
--- /dev/null
+++ b/design-system/Examples.tsx
@@ -0,0 +1,93 @@
+import { Screen } from "@components/Screen/ScreenComp/Screen";
+import { SnackbarExample } from "@components/Snackbar/Snackbar.example";
+import { BottomSheetExample } from "@design-system/BottomSheet/BottomSheet.example";
+import { Button } from "@design-system/Button/Button";
+import { ButtonExample } from "@design-system/Button/Button.example";
+import { IconExample } from "@design-system/Icon/Icon.example";
+import { IconButtonExample } from "@design-system/IconButton/IconButton.example";
+import { TextExample } from "@design-system/Text/Text.example";
+import { TextFieldExample } from "@design-system/TextField/TextField.example";
+import { VStack } from "@design-system/VStack";
+import { useAppTheme } from "@theme/useAppTheme";
+import { useState } from "react";
+
+type IDesignSystemComponent =
+  | "buttons"
+  | "text"
+  | "icon-button"
+  | "text-field"
+  | "icon"
+  | "header"
+  | "bottom-sheet"
+  | "snackbar";
+
+export function Examples() {
+  const { theme } = useAppTheme();
+
+  const [selectedComponent, setSelectedComponent] =
+    useState<IDesignSystemComponent | null>(null);
+
+  return (
+    <Screen
+      safeAreaEdges={["bottom"]}
+      preset="scroll"
+      contentContainerStyle={{
+        paddingTop: theme.spacing.lg,
+        paddingHorizontal: theme.spacing.lg,
+      }}
+    >
+      {selectedComponent ? (
+        <VStack style={{ gap: theme.spacing.lg }}>
+          <Button
+            text="Back"
+            onPress={() => setSelectedComponent(null)}
+            variant="link"
+          />
+          <VStack>
+            {selectedComponent === "buttons" && <ButtonExample />}
+            {selectedComponent === "text" && <TextExample />}
+            {selectedComponent === "icon-button" && <IconButtonExample />}
+            {selectedComponent === "text-field" && <TextFieldExample />}
+            {selectedComponent === "icon" && <IconExample />}
+            {selectedComponent === "snackbar" && <SnackbarExample />}
+            {/* {selectedComponent === "header" && <HeaderExample />} */}
+            {selectedComponent === "bottom-sheet" && <BottomSheetExample />}
+          </VStack>
+        </VStack>
+      ) : (
+        <VStack
+          style={{
+            gap: theme.spacing.sm,
+          }}
+        >
+          <Button
+            text="Buttons"
+            onPress={() => setSelectedComponent("buttons")}
+          />
+          <Button text="Text" onPress={() => setSelectedComponent("text")} />
+          <Button
+            text="Icon Button"
+            onPress={() => setSelectedComponent("icon-button")}
+          />
+          <Button
+            text="Text Field"
+            onPress={() => setSelectedComponent("text-field")}
+          />
+          <Button text="Icon" onPress={() => setSelectedComponent("icon")} />
+          {/* <Button
+            text="Header"
+            onPress={() => setSelectedComponent("header")}
+          /> */}
+          <Button
+            text="Bottom Sheet"
+            onPress={() => setSelectedComponent("bottom-sheet")}
+          />
+          <Button
+            text="Snackbar"
+            onPress={() => setSelectedComponent("snackbar")}
+          />
+        </VStack>
+      )}
+    </Screen>
+  );
+}
diff --git a/design-system/Header/Header.example.tsx b/design-system/Header/Header.example.tsx
new file mode 100644
index 000000000..e69de29bb
diff --git a/design-system/Icon/Icon.example.tsx b/design-system/Icon/Icon.example.tsx
new file mode 100644
index 000000000..a6a6c1823
--- /dev/null
+++ b/design-system/Icon/Icon.example.tsx
@@ -0,0 +1,64 @@
+import { HStack } from "@design-system/HStack";
+import { Text } from "@design-system/Text";
+import { VStack } from "@design-system/VStack";
+import { useAppTheme } from "@theme/useAppTheme";
+import { ScrollView } from "react-native";
+import { Icon, iconRegistry } from "./Icon";
+
+type IExampleProps = {
+  onPress?: () => void;
+};
+
+export function IconExample(args: IExampleProps) {
+  const { theme } = useAppTheme();
+
+  return (
+    <ScrollView>
+      <VStack
+        style={{
+          gap: theme.spacing.md,
+          backgroundColor: theme.colors.background.raised,
+          padding: theme.spacing.md,
+        }}
+      >
+        {/* Different Sizes */}
+        <Text preset="body">Icon Sizes</Text>
+        <HStack style={{ gap: theme.spacing.md, alignItems: "center" }}>
+          <Icon icon="star" size={theme.iconSize.xs} />
+          <Icon icon="star" size={theme.iconSize.sm} />
+          <Icon icon="star" size={theme.iconSize.md} />
+          <Icon icon="star" size={theme.iconSize.lg} />
+        </HStack>
+
+        {/* Different Colors */}
+        <Text preset="body">Icon Colors</Text>
+        <HStack style={{ gap: theme.spacing.md, alignItems: "center" }}>
+          <Icon icon="star" color={theme.colors.fill.primary} />
+          <Icon icon="star" color={theme.colors.fill.secondary} />
+          <Icon icon="star" color={theme.colors.fill.caution} />
+          <Icon icon="star" color={theme.colors.fill.accent} />
+        </HStack>
+
+        {/* All Available Icons */}
+        <Text preset="body">All Icons</Text>
+        <VStack style={{ gap: theme.spacing.sm }}>
+          {Object.entries(iconRegistry).map(([key, value]) => (
+            <HStack
+              key={key}
+              style={{
+                gap: theme.spacing.md,
+                alignItems: "center",
+                padding: theme.spacing.sm,
+                backgroundColor: theme.colors.background.surface,
+                borderRadius: theme.borderRadius.sm,
+              }}
+            >
+              <Icon icon={key as keyof typeof iconRegistry} />
+              <Text>{key}</Text>
+            </HStack>
+          ))}
+        </VStack>
+      </VStack>
+    </ScrollView>
+  );
+}
diff --git a/design-system/Icon/Icon.tsx b/design-system/Icon/Icon.tsx
index 1256e03f6..d95dcc336 100644
--- a/design-system/Icon/Icon.tsx
+++ b/design-system/Icon/Icon.tsx
@@ -64,6 +64,7 @@ export function Icon(props: IIconProps) {
   const { theme } = useAppTheme();
 
   const defaultSize = useMemo(() => theme.iconSize.lg, [theme]);
+
   const defaultColor = useMemo(() => theme.colors.fill.primary, [theme]);
 
   const {
@@ -79,6 +80,7 @@ export function Icon(props: IIconProps) {
   if (!icon && !picto) {
     throw new Error("Either 'icon' or 'picto' must be provided");
   }
+
   if (icon && picto) {
     logger.warn(
       "Both 'icon' and 'picto' provided, 'icon' will take precedence"
@@ -88,8 +90,8 @@ export function Icon(props: IIconProps) {
   const iconName = icon
     ? iconRegistry[icon]
     : picto
-    ? iconRegistry[picto]
-    : null;
+      ? iconRegistry[picto]
+      : null;
 
   if (!iconName) {
     logger.warn(
diff --git a/design-system/Icon/Icon.types.ts b/design-system/Icon/Icon.types.ts
index 5ea669b44..e603cc5ea 100644
--- a/design-system/Icon/Icon.types.ts
+++ b/design-system/Icon/Icon.types.ts
@@ -1,4 +1,5 @@
 import { ColorValue, StyleProp, ViewStyle } from "react-native";
+import { RequireExactlyOne } from "../../types/general";
 
 export type IIconName =
   | "xmark"
@@ -59,8 +60,16 @@ export type IIconName =
  * @example
  * <Icon icon="search" size={24} color="blue" />
  */
-export type IIconProps = {
-  icon?: IIconName;
+export type IIconProps = RequireExactlyOne<{
+  icon: IIconName;
+  /**
+   * @deprecated Use icon instead
+   * @example
+   * Before: <Icon picto="search" />
+   * After: <Icon icon="search" />
+   */
+  picto: IIconName;
+}> & {
   style?: StyleProp<ViewStyle>;
   color?: ColorValue;
   /**
@@ -75,11 +84,4 @@ export type IIconProps = {
    * @see Use different icon names for different weights instead.
    */
   weight?: string;
-  /**
-   * @deprecated Use icon instead
-   * @example
-   * Before: <Icon picto="search" />
-   * After: <Icon icon="search" />
-   */
-  picto?: IIconName;
 };
diff --git a/design-system/IconButton/IconButton.example.tsx b/design-system/IconButton/IconButton.example.tsx
index 63eaff88c..6053f54ed 100644
--- a/design-system/IconButton/IconButton.example.tsx
+++ b/design-system/IconButton/IconButton.example.tsx
@@ -1,7 +1,7 @@
 import { memo } from "react";
-
 import { useAppTheme } from "../../theme/useAppTheme";
 import { HStack } from "../HStack";
+import { Text } from "../Text/Text";
 import { VStack } from "../VStack";
 import { IconButton } from "./IconButton";
 
@@ -11,35 +11,58 @@ export const IconButtonExample = memo(function IconButtonExample() {
   return (
     <VStack
       style={{
-        rowGap: theme.spacing.md,
-        paddingTop: theme.spacing["4xl"],
+        paddingHorizontal: theme.spacing.lg,
+        rowGap: theme.spacing.lg,
       }}
     >
-      <VStack style={{ rowGap: theme.spacing.md }}>
-        {/* Fill Variant */}
+      {/* Default variants */}
+      <VStack style={{ rowGap: theme.spacing.sm }}>
+        <Text>Default Size</Text>
         <HStack style={{ columnGap: theme.spacing.sm }}>
           <IconButton variant="fill" iconName="star" />
-          <IconButton variant="fill" iconName="star" disabled />
-          <IconButton
-            variant="fill"
-            iconName="star"
-            action="primary"
-            size="lg"
-          />
+          <IconButton variant="outline" iconName="star" />
+          <IconButton variant="ghost" iconName="star" />
         </HStack>
+      </VStack>
 
-        {/* Outline Variant */}
+      {/* Large size */}
+      <VStack style={{ rowGap: theme.spacing.sm }}>
+        <Text>Large Size</Text>
         <HStack style={{ columnGap: theme.spacing.sm }}>
-          <IconButton variant="outline" iconName="star" />
-          <IconButton variant="outline" iconName="star" disabled />
+          <IconButton variant="fill" iconName="star" size="lg" />
           <IconButton variant="outline" iconName="star" size="lg" />
+          <IconButton variant="ghost" iconName="star" size="lg" />
         </HStack>
+      </VStack>
 
-        {/* Ghost Variant */}
+      {/* Different actions */}
+      <VStack style={{ rowGap: theme.spacing.sm }}>
+        <Text>Actions</Text>
         <HStack style={{ columnGap: theme.spacing.sm }}>
-          <IconButton variant="ghost" iconName="star" />
+          <IconButton variant="fill" iconName="star" action="primary" />
+          <IconButton variant="fill" iconName="hand.wave" />
+          <IconButton variant="fill" iconName="xmark" action="danger" />
+        </HStack>
+      </VStack>
+
+      {/* Disabled state */}
+      <VStack style={{ rowGap: theme.spacing.sm }}>
+        <Text>Disabled</Text>
+        <HStack style={{ columnGap: theme.spacing.sm }}>
+          <IconButton variant="fill" iconName="star" disabled />
+          <IconButton variant="outline" iconName="star" disabled />
           <IconButton variant="ghost" iconName="star" disabled />
-          <IconButton variant="ghost" iconName="star" size="lg" />
+        </HStack>
+      </VStack>
+
+      {/* Common use cases */}
+      <VStack style={{ rowGap: theme.spacing.sm }}>
+        <Text>Common Use Cases</Text>
+        <HStack style={{ columnGap: theme.spacing.sm }}>
+          <IconButton variant="ghost" iconName="magnifyingglass" />
+          <IconButton variant="ghost" iconName="message" />
+          <IconButton variant="ghost" iconName="gear" />
+          <IconButton variant="ghost" iconName="trash" action="danger" />
         </HStack>
       </VStack>
     </VStack>
diff --git a/design-system/IconButton/IconButton.tsx b/design-system/IconButton/IconButton.tsx
index d55883344..fc771bb12 100644
--- a/design-system/IconButton/IconButton.tsx
+++ b/design-system/IconButton/IconButton.tsx
@@ -1,4 +1,3 @@
-// IconButton.tsx
 import React, { useCallback } from "react";
 import {
   GestureResponderEvent,
@@ -6,7 +5,6 @@ import {
   StyleProp,
   ViewStyle,
 } from "react-native";
-
 import { useAppTheme } from "../../theme/useAppTheme";
 import { Icon } from "../Icon/Icon";
 import { Pressable } from "../Pressable";
@@ -78,6 +76,7 @@ export function IconButton(props: IIconButtonProps) {
   );
 
   // For now until we fix Icon
+
   const iconProps = useCallback(
     ({ pressed }: PressableStateCallbackType) =>
       themed(
diff --git a/design-system/Text/Text.example.tsx b/design-system/Text/Text.example.tsx
new file mode 100644
index 000000000..8f8a97886
--- /dev/null
+++ b/design-system/Text/Text.example.tsx
@@ -0,0 +1,56 @@
+import { memo } from "react";
+import { useAppTheme } from "../../theme/useAppTheme";
+import { VStack } from "../VStack";
+import { Text } from "./Text";
+
+export const TextExample = memo(function TextExample() {
+  const { theme } = useAppTheme();
+
+  return (
+    <VStack
+      style={{
+        paddingHorizontal: theme.spacing.lg,
+        rowGap: theme.spacing.lg,
+      }}
+    >
+      {/* Preset examples */}
+      <VStack style={{ rowGap: theme.spacing.sm }}>
+        <Text preset="title">Title Preset</Text>
+        <Text preset="body">Body Preset - Main content text</Text>
+        <Text preset="bodyBold">Body Bold Preset</Text>
+        <Text preset="small">Small Preset</Text>
+        <Text preset="smaller">Smaller Preset</Text>
+      </VStack>
+
+      {/* Preset with color overrides */}
+      <VStack style={{ rowGap: theme.spacing.sm }}>
+        <Text preset="title" color="primary">
+          Colored Title
+        </Text>
+        <Text preset="body" color="secondary">
+          Colored Body Text
+        </Text>
+        <Text preset="smallerBold" color="caution">
+          Warning Text
+        </Text>
+      </VStack>
+
+      {/* Preset with weight overrides */}
+      <VStack style={{ rowGap: theme.spacing.sm }}>
+        <Text preset="bigBold">Big Bold Text</Text>
+        <Text preset="formLabel">Form Label Text</Text>
+        <Text preset="formHelper">Form Helper Text</Text>
+      </VStack>
+
+      {/* Common use cases */}
+      <VStack style={{ rowGap: theme.spacing.sm }}>
+        <Text preset="title">Product Details</Text>
+        <Text preset="bigBold" color="primary">
+          $99.99
+        </Text>
+        <Text preset="body">High-quality product with amazing features</Text>
+        <Text preset="formHelper">In stock - Ships in 2-3 days</Text>
+      </VStack>
+    </VStack>
+  );
+});
diff --git a/design-system/TextField/TextField.example.tsx b/design-system/TextField/TextField.example.tsx
index 76f0e4de5..a44f9dee1 100644
--- a/design-system/TextField/TextField.example.tsx
+++ b/design-system/TextField/TextField.example.tsx
@@ -1,20 +1,20 @@
 import { memo } from "react";
-
 import { Center } from "../Center";
 import { IconButton } from "../IconButton/IconButton";
 import { Text } from "../Text/Text";
 import { VStack } from "../VStack";
 import { TextField } from "./TextField";
 import { TextFieldSimple } from "./TextFieldSimple";
+import { useAppTheme } from "@theme/useAppTheme";
 
 export const TextFieldExample = memo(function TextFieldExample() {
+  const { theme } = useAppTheme();
+
   return (
     <VStack
       // {...debugBorder()}
       style={{
-        paddingTop: 100,
-        paddingHorizontal: 24,
-        rowGap: 24,
+        rowGap: theme.spacing.xl,
       }}
     >
       <TextField
diff --git a/design-system/TextField/TextField.tsx b/design-system/TextField/TextField.tsx
index fdee07af9..e9fbb5844 100644
--- a/design-system/TextField/TextField.tsx
+++ b/design-system/TextField/TextField.tsx
@@ -1,19 +1,15 @@
 import React, { forwardRef, Ref, useImperativeHandle, useRef } from "react";
 import { TextInput, TextStyle, ViewStyle } from "react-native";
 
-import { $globalStyles } from "../../theme/styles";
-import {
-  ThemedStyle,
-  ThemedStyleArray,
-  useAppTheme,
-} from "../../theme/useAppTheme";
+import { translate } from "@i18n";
+import { $globalStyles } from "@theme/styles";
+import { ThemedStyle, ThemedStyleArray, useAppTheme } from "@theme/useAppTheme";
 import { HStack } from "../HStack";
 import { Text } from "../Text/Text";
 import { textPresets } from "../Text/Text.presets";
 import { TouchableOpacity } from "../TouchableOpacity";
 import { VStack } from "../VStack";
 import { TextFieldProps } from "./TextField.props";
-import { translate } from "../../i18n";
 
 export const TextField = forwardRef(function TextField(
   props: TextFieldProps,
@@ -85,10 +81,10 @@ export const TextField = forwardRef(function TextField(
     !(label || labelTx) && $globalStyles.justifyCenter,
   ];
 
-  function focusInput() {
+  const onFocus = useCallback(() => {
     if (disabled) return;
     input.current?.focus();
-  }
+  }, [disabled]);
 
   useImperativeHandle(ref, () => input.current as TextInput);
 
@@ -96,13 +92,16 @@ export const TextField = forwardRef(function TextField(
     <TouchableOpacity
       activeOpacity={1}
       style={themed($containerStyles)}
-      onPress={focusInput}
+      onPress={onFocus}
       accessibilityState={{ disabled }}
     >
       <HStack style={themed($inputWrapperStyles)}>
         {!!LeftAccessory && (
           <LeftAccessory
-            style={themed($leftAccessoryStyle)}
+            style={themed([
+              $leftAccessoryStyle,
+              TextInputProps.multiline && { alignItems: "flex-start" },
+            ])}
             status={status}
             editable={!disabled}
             multiline={TextInputProps.multiline ?? false}
diff --git a/package.json b/package.json
index bd9d70f84..a1cd83904 100644
--- a/package.json
+++ b/package.json
@@ -11,6 +11,7 @@
     "lint": "eslint --max-warnings 2500",
     "lint:errors": "eslint --quiet",
     "ios": "EXPO_ENV=dev expo start --ios",
+    "run:ios": "EXPO_ENV=dev expo run:ios",
     "postinstall": "patch-package && node scripts/wasm.js && husky install && cross-os postinstall",
     "start": "EXPO_ENV=dev expo start",
     "start:preview": "EXPO_ENV=preview expo start",
diff --git a/screens/Main.tsx b/screens/Main.tsx
index 0475572b5..f4607af12 100644
--- a/screens/Main.tsx
+++ b/screens/Main.tsx
@@ -112,6 +112,12 @@ const NavigationContent = () => {
     useSelect(["notificationsPermissionStatus", "splashScreenHidden"])
   );
 
+  // return (
+  //   <NativeStack.Navigator>
+  //     <NativeStack.Screen name="Examples" component={Examples} />
+  //   </NativeStack.Navigator>
+  // );
+
   if (!splashScreenHidden) {
     // TODO: Add a loading screen
     return null;
diff --git a/theme/animations.ts b/theme/animations.ts
index d4a82d599..07ecf3d17 100644
--- a/theme/animations.ts
+++ b/theme/animations.ts
@@ -14,12 +14,40 @@ export const SICK_SPRING_CONFIG: SpringConfig = {
   stiffness: SICK_STIFFNESS,
 };
 
+const easings = {
+  // Ease In
+  easeInQuad: [0.55, 0.085, 0.68, 0.53],
+  easeInCubic: [0.55, 0.055, 0.675, 0.19],
+  easeInQuart: [0.895, 0.03, 0.685, 0.22],
+  easeInQuint: [0.755, 0.05, 0.855, 0.06],
+  easeInExpo: [0.95, 0.05, 0.795, 0.035],
+  easeInCirc: [0.6, 0.04, 0.98, 0.335],
+
+  // Ease Out
+  easeOutQuad: [0.25, 0.46, 0.45, 0.94],
+  easeOutCubic: [0.215, 0.61, 0.355, 1],
+  easeOutQuart: [0.165, 0.84, 0.44, 1],
+  easeOutQuint: [0.23, 1, 0.32, 1],
+  easeOutExpo: [0.19, 1, 0.22, 1],
+  easeOutCirc: [0.075, 0.82, 0.165, 1],
+
+  // Ease In Out
+  easeInOutQuad: [0.455, 0.03, 0.515, 0.955],
+  easeInOutCubic: [0.645, 0.045, 0.355, 1],
+  easeInOutQuart: [0.77, 0, 0.175, 1],
+  easeInOutQuint: [0.86, 0, 0.07, 1],
+  easeInOutExpo: [1, 0, 0, 1],
+  easeInOutCirc: [0.785, 0.135, 0.15, 0.86],
+};
+
 export const animations = {
   spring: {
     damping: SICK_DAMPING,
     stiffness: SICK_STIFFNESS,
   },
 
+  easings,
+
   fadeInDownSpring: () =>
     FadeInDown.easing(SICK_EASE_OUT)
       .stiffness(SICK_STIFFNESS)
diff --git a/types/general.ts b/types/general.ts
index 7fc5e3ac8..62e77f7cb 100644
--- a/types/general.ts
+++ b/types/general.ts
@@ -74,3 +74,8 @@ export type MyReactNode =
   | (() => ReactElement)
   | number
   | string;
+
+export type RequireExactlyOne<T, Keys extends keyof T = keyof T> = {
+  [K in Keys]: Required<Pick<T, K>> & { [P in Exclude<Keys, K>]?: undefined };
+}[Keys] &
+  Omit<T, Keys>;

From 762c63306756e96a61aaedbfff8f9b4211cd4209 Mon Sep 17 00:00:00 2001
From: Thierry <skodathierry@gmail.com>
Date: Tue, 12 Nov 2024 08:50:18 -0500
Subject: [PATCH 7/9] oops

---
 design-system/TextField/TextField.tsx | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/design-system/TextField/TextField.tsx b/design-system/TextField/TextField.tsx
index e9fbb5844..bdb6dc3ca 100644
--- a/design-system/TextField/TextField.tsx
+++ b/design-system/TextField/TextField.tsx
@@ -1,4 +1,10 @@
-import React, { forwardRef, Ref, useImperativeHandle, useRef } from "react";
+import React, {
+  forwardRef,
+  Ref,
+  useCallback,
+  useImperativeHandle,
+  useRef,
+} from "react";
 import { TextInput, TextStyle, ViewStyle } from "react-native";
 
 import { translate } from "@i18n";

From 8e17fa7ac2dea56129831fbaa3d917908d396969 Mon Sep 17 00:00:00 2001
From: Thierry <skodathierry@gmail.com>
Date: Thu, 14 Nov 2024 21:01:01 -0500
Subject: [PATCH 8/9] remove masked view for now

---
 .../Snackbar/SnackbarBackdrop/SnackbarBackdrop.tsx | 14 +++++++++-----
 ios/Podfile.lock                                   |  6 ------
 package.json                                       |  2 --
 yarn.lock                                          |  5 -----
 4 files changed, 9 insertions(+), 18 deletions(-)

diff --git a/components/Snackbar/SnackbarBackdrop/SnackbarBackdrop.tsx b/components/Snackbar/SnackbarBackdrop/SnackbarBackdrop.tsx
index ac26525b7..bf24d50d0 100644
--- a/components/Snackbar/SnackbarBackdrop/SnackbarBackdrop.tsx
+++ b/components/Snackbar/SnackbarBackdrop/SnackbarBackdrop.tsx
@@ -1,9 +1,7 @@
-import { SNACKBAR_BACKDROP_MAX_HEIGHT } from "@components/Snackbar/Snackbar.constants";
 import { useSnackbars } from "@components/Snackbar/Snackbar.service";
 import { useGradientHeight } from "@components/Snackbar/SnackbarBackdrop/SnackbarBackdrop.utils";
-import MaskedView from "@react-native-masked-view/masked-view";
+// import MaskedView from "@react-native-masked-view/masked-view";
 import { SICK_SPRING_CONFIG } from "@theme/animations";
-import { BlurView } from "expo-blur";
 import { LinearGradient } from "expo-linear-gradient";
 import { memo } from "react";
 import { StyleSheet, useWindowDimensions } from "react-native";
@@ -38,7 +36,13 @@ export const SnackbarBackdrop = memo(() => {
         // debugBorder()
       ]}
     >
-      <MaskedView
+      <LinearGradient
+        locations={[0, 0.55]}
+        colors={["rgba(255, 255,255,0.0)", "rgba(255, 255,255,1)"]}
+        style={StyleSheet.absoluteFill}
+      />
+      {/* TODO: Maybe add back later. For now masked view can be a litte unstable and buggy */}
+      {/* <MaskedView
         pointerEvents="none"
         maskElement={
           <LinearGradient
@@ -57,7 +61,7 @@ export const SnackbarBackdrop = memo(() => {
           tint="systemChromeMaterialLight"
           style={StyleSheet.absoluteFill}
         />
-      </MaskedView>
+      </MaskedView> */}
     </Animated.View>
   );
 });
diff --git a/ios/Podfile.lock b/ios/Podfile.lock
index cc7507def..15e908ccd 100644
--- a/ios/Podfile.lock
+++ b/ios/Podfile.lock
@@ -1710,8 +1710,6 @@ PODS:
     - React-Core
   - RNCClipboard (1.14.1):
     - React-Core
-  - RNCMaskedView (0.3.1):
-    - React-Core
   - RNDeviceInfo (10.9.0):
     - React-Core
   - RNFlashList (1.6.4):
@@ -1975,7 +1973,6 @@ DEPENDENCIES:
   - RNAWSCognito (from `../node_modules/amazon-cognito-identity-js`)
   - "RNCAsyncStorage (from `../node_modules/@react-native-async-storage/async-storage`)"
   - "RNCClipboard (from `../node_modules/@react-native-clipboard/clipboard`)"
-  - "RNCMaskedView (from `../node_modules/@react-native-masked-view/masked-view`)"
   - RNDeviceInfo (from `../node_modules/react-native-device-info`)
   - "RNFlashList (from `../node_modules/@shopify/flash-list`)"
   - RNFS (from `../node_modules/react-native-fs`)
@@ -2262,8 +2259,6 @@ EXTERNAL SOURCES:
     :path: "../node_modules/@react-native-async-storage/async-storage"
   RNCClipboard:
     :path: "../node_modules/@react-native-clipboard/clipboard"
-  RNCMaskedView:
-    :path: "../node_modules/@react-native-masked-view/masked-view"
   RNDeviceInfo:
     :path: "../node_modules/react-native-device-info"
   RNFlashList:
@@ -2429,7 +2424,6 @@ SPEC CHECKSUMS:
   RNAWSCognito: fe0c870c7cd9970a2efefc075b3f2d75eac913c7
   RNCAsyncStorage: 826b603ae9c0f88b5ac4e956801f755109fa4d5c
   RNCClipboard: 0a720adef5ec193aa0e3de24c3977222c7e52a37
-  RNCMaskedView: 090213d32d8b3bb83a4dcb7d12c18f0152591906
   RNDeviceInfo: 02ea8b23e2280fa18e00a06d7e62804d74028579
   RNFlashList: b521ebdd7f9352673817f1d98e8bdc0c8cf8545b
   RNFS: 4ac0f0ea233904cb798630b3c077808c06931688
diff --git a/package.json b/package.json
index a1cd83904..d8875c9c6 100644
--- a/package.json
+++ b/package.json
@@ -57,7 +57,6 @@
     "@react-native-async-storage/async-storage": "1.23.1",
     "@react-native-clipboard/clipboard": "^1.14.1",
     "@react-native-community/netinfo": "11.3.1",
-    "@react-native-masked-view/masked-view": "0.3.1",
     "@react-native-menu/menu": "^1.1.2",
     "@react-native/metro-config": "^0.73.3",
     "@react-navigation/drawer": "^6.6.6",
@@ -138,7 +137,6 @@
     "i18n-js": "3.9.2",
     "ipfs-car": "^1.0.0",
     "libphonenumber-js": "^1.10.49",
-    "lodash": "^4.17.21",
     "match-sorter": "^6.3.4",
     "mime": "^4.0.4",
     "os-browserify": "^0.3.0",
diff --git a/yarn.lock b/yarn.lock
index e35ec9460..c97384a5b 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -4824,11 +4824,6 @@
   resolved "https://registry.yarnpkg.com/@react-native-community/netinfo/-/netinfo-11.3.1.tgz#4539371a2f4bd402d932031be82c2449ed63a1a5"
   integrity sha512-UBnJxyV0b7i9Moa97Av+HKho1ByzX0DtbJXzUQS5E3xhQs6P2D/Os0iw3ouy7joY1TVd6uIhplPbr7l1SJNaNQ==
 
-"@react-native-masked-view/masked-view@0.3.1":
-  version "0.3.1"
-  resolved "https://registry.yarnpkg.com/@react-native-masked-view/masked-view/-/masked-view-0.3.1.tgz#5bd76f17004a6ccbcec03856893777ee91f23d29"
-  integrity sha512-uVm8U6nwFIlUd1iDIB5cS+lDadApKR+l8k4k84d9hn+GN4lzAIJhUZ9syYX7c022MxNgAlbxoFLt0pqKoyaAGg==
-
 "@react-native-menu/menu@^1.1.2":
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/@react-native-menu/menu/-/menu-1.1.2.tgz#972406d25296a0d01614dc36fae7884c2a08dafd"

From 4915332210186b88dde50a9dcc8479453f66ccf6 Mon Sep 17 00:00:00 2001
From: Thierry <skodathierry@gmail.com>
Date: Fri, 15 Nov 2024 13:14:04 -0500
Subject: [PATCH 9/9] remove lodash types

---
 package.json | 1 -
 yarn.lock    | 5 -----
 2 files changed, 6 deletions(-)

diff --git a/package.json b/package.json
index d8875c9c6..5f1514ccb 100644
--- a/package.json
+++ b/package.json
@@ -219,7 +219,6 @@
     "@types/elliptic": "^6.4.14",
     "@types/i18n-js": "^3.8.9",
     "@types/jest": "^29.5.12",
-    "@types/lodash": "^4.17.13",
     "@types/react": "~18.2.79",
     "@types/react-native-shared-group-preferences": "^1.1.1",
     "@types/text-encoding": "^0.0.39",
diff --git a/yarn.lock b/yarn.lock
index c97384a5b..8381ea5e4 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -6686,11 +6686,6 @@
   dependencies:
     "@types/node" "*"
 
-"@types/lodash@^4.17.13":
-  version "4.17.13"
-  resolved "https://registry.yarnpkg.com/@types/lodash/-/lodash-4.17.13.tgz#786e2d67cfd95e32862143abe7463a7f90c300eb"
-  integrity sha512-lfx+dftrEZcdBPczf9d0Qv0x+j/rfNCMuC6OcfXmO8gkfeNAY88PgKUbvG56whcN23gc27yenwF6oJZXGFpYxg==
-
 "@types/long@^4.0.1":
   version "4.0.2"
   resolved "https://registry.yarnpkg.com/@types/long/-/long-4.0.2.tgz#b74129719fc8d11c01868010082d483b7545591a"