diff --git a/apps/expo/app/(app)/(tabs)/(home)/index.tsx b/apps/expo/app/(app)/(tabs)/(home)/index.tsx
index 1c7329222d..91f8fe13c2 100644
--- a/apps/expo/app/(app)/(tabs)/(home)/index.tsx
+++ b/apps/expo/app/(app)/(tabs)/(home)/index.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import type { LargeTitleSearchBarRef, ListDataItem } from '@packrat/ui/nativewindui';
+import type { LargeTitleSearchBarMethods, ListDataItem } from '@packrat/ui/nativewindui';
 import {
   LargeTitleHeader,
   List,
@@ -167,7 +167,7 @@ function DemoIcon() {
 
 export default function DashboardScreen() {
   const [searchValue, setSearchValue] = useState('');
-  const searchBarRef = useRef<LargeTitleSearchBarRef>(null);
+  const searchBarRef = useRef<LargeTitleSearchBarMethods>(null);
   const { t } = useTranslation();
 
   const dashboardLayout = useRef([
diff --git a/apps/expo/app/(app)/(tabs)/profile/index.tsx b/apps/expo/app/(app)/(tabs)/profile/index.tsx
index 5b4a05bd21..416c44096d 100644
--- a/apps/expo/app/(app)/(tabs)/profile/index.tsx
+++ b/apps/expo/app/(app)/(tabs)/profile/index.tsx
@@ -1,4 +1,4 @@
-import type { AlertRef } from '@packrat/ui/nativewindui';
+import type { AlertMethods } from '@packrat/ui/nativewindui';
 import {
   ActivityIndicator,
   Alert,
@@ -140,7 +140,7 @@ function ListFooterComponent() {
   const { colors } = useColorScheme();
   const { t } = useTranslation();
 
-  const alertRef = useRef<AlertRef>(null);
+  const alertRef = useRef<AlertMethods>(null);
   const [isSigningOut, setIsSigningOut] = useState(false);
 
   const handleSignOut = async () => {
@@ -150,7 +150,7 @@ function ListFooterComponent() {
       alertRef.current?.alert({
         title: t('auth.loggedOut'),
         message: t('auth.loggedOutMessage'),
-        materialIcon: { name: 'check-circle-outline', color: colors.green },
+        materialIcon: { name: 'check-circle-outline', color: 'rgb(48, 164, 108)' },
         buttons: [
           {
             text: t('auth.stayLoggedOut'),
diff --git a/apps/expo/app/(app)/(tabs)/profile/name.tsx b/apps/expo/app/(app)/(tabs)/profile/name.tsx
index d1fc92a19f..0816faa9cc 100644
--- a/apps/expo/app/(app)/(tabs)/profile/name.tsx
+++ b/apps/expo/app/(app)/(tabs)/profile/name.tsx
@@ -61,7 +61,7 @@ export default function NameScreen() {
         contentContainerStyle={{ paddingBottom: insets.bottom }}
       >
         <Form className="gap-5 px-4 pt-8">
-          <FormSection materialIconProps={{ name: 'person-outline' }}>
+          <FormSection materialIconProps={{ name: 'account-outline' }}>
             <FormItem>
               <TextField
                 textContentType="givenName"
diff --git a/apps/expo/app/(app)/messages/chat.android.tsx b/apps/expo/app/(app)/messages/chat.android.tsx
index 317fe2b947..b559c815ad 100644
--- a/apps/expo/app/(app)/messages/chat.android.tsx
+++ b/apps/expo/app/(app)/messages/chat.android.tsx
@@ -238,17 +238,17 @@ const CONTEXT_MENU_ITEMS = [
   createDropdownItem({
     actionKey: 'reply',
     title: 'Reply',
-    icon: { name: 'arrow-left-bold-outline' },
+    icon: { name: 'arrowshape.left' },
   }),
   createDropdownItem({
     actionKey: 'sticker',
     title: 'Sticker',
-    icon: { name: 'plus-box-outline' },
+    icon: { name: 'plus.app' },
   }),
   createDropdownItem({
     actionKey: 'copy',
     title: 'Copy',
-    icon: { name: 'clipboard-outline' },
+    icon: { name: 'clipboard' },
   }),
 ];
 
diff --git a/apps/expo/app/(app)/messages/chat.tsx b/apps/expo/app/(app)/messages/chat.tsx
index cd8850d85e..00f97c2bbd 100644
--- a/apps/expo/app/(app)/messages/chat.tsx
+++ b/apps/expo/app/(app)/messages/chat.tsx
@@ -1,4 +1,4 @@
-import type { ContextMenuRef } from '@packrat/ui/nativewindui';
+import type { ContextMenuMethods } from '@packrat/ui/nativewindui';
 import {
   Avatar,
   AvatarFallback,
@@ -329,17 +329,17 @@ const CONTEXT_MENU_ITEMS = [
   createContextItem({
     actionKey: 'reply',
     title: 'Reply',
-    icon: { name: 'arrow-left-bold-outline' },
+    icon: { name: 'arrowshape.left' },
   }),
   createContextItem({
     actionKey: 'sticker',
     title: 'Sticker',
-    icon: { name: 'plus-box-outline' },
+    icon: { name: 'plus.app' },
   }),
   createContextItem({
     actionKey: 'copy',
     title: 'Copy',
-    icon: { name: 'clipboard-outline' },
+    icon: { name: 'clipboard' },
   }),
 ];
 
@@ -352,8 +352,8 @@ function ChatBubble({
   isSameNextSender: boolean;
   translateX: SharedValue<number>;
 }) {
-  const contextMenuRef = React.useRef<ContextMenuRef>(null);
-  const contextMenuRef2 = React.useRef<ContextMenuRef>(null);
+  const contextMenuRef = React.useRef<ContextMenuMethods>(null);
+  const contextMenuRef2 = React.useRef<ContextMenuMethods>(null);
   const { colors } = useColorScheme();
   const rootStyle = useAnimatedStyle(() => {
     return {
diff --git a/apps/expo/app/(app)/messages/conversations.android.tsx b/apps/expo/app/(app)/messages/conversations.android.tsx
index 078634f13e..7850b20c27 100644
--- a/apps/expo/app/(app)/messages/conversations.android.tsx
+++ b/apps/expo/app/(app)/messages/conversations.android.tsx
@@ -85,7 +85,7 @@ export default function ConversationsAndroidScreen() {
         >
           <Toolbar
             leftView={<View className="flex-1" />}
-            rightView={<ToolbarCTA className="h-8 w-8" icon={{ name: 'pencil-box-outline' }} />}
+            rightView={<ToolbarCTA className="h-8 w-8" icon={{ name: 'square.and.pencil' }} />}
             iosBlurIntensity={30}
           />
         </Animated.View>
@@ -114,14 +114,13 @@ function LeftView() {
       createDropdownItem({
         actionKey: 'go-home',
         title: 'Go Home',
-        icon: { name: 'home' },
+        icon: { name: 'house.fill' },
       }),
       createDropdownItem({
         actionKey: 'toggle-theme',
         title: 'Toggle Theme',
         icon: {
           name: isDarkColorScheme ? 'moon.stars' : 'sun.min',
-          namingScheme: 'sfSymbol',
         },
       }),
     ];
diff --git a/apps/expo/app/(app)/messages/conversations.tsx b/apps/expo/app/(app)/messages/conversations.tsx
index 092a11d653..f308648154 100644
--- a/apps/expo/app/(app)/messages/conversations.tsx
+++ b/apps/expo/app/(app)/messages/conversations.tsx
@@ -113,19 +113,18 @@ function LeftView({
       createDropdownItem({
         actionKey: 'go-home',
         title: 'Go Home',
-        icon: { name: 'home' },
+        icon: { name: 'house.fill' },
       }),
       createDropdownItem({
         actionKey: 'select-messages',
         title: 'Select messages',
-        icon: { name: 'checkmark.circle', namingScheme: 'sfSymbol' },
+        icon: { name: 'checkmark.circle' },
       }),
       createDropdownItem({
         actionKey: 'toggle-theme',
         title: 'Toggle Theme',
         icon: {
           name: isDarkColorScheme ? 'moon.stars' : 'sun.min',
-          namingScheme: 'sfSymbol',
         },
       }),
     ];
@@ -220,12 +219,12 @@ const CONTEXT_MENU_ITEMS = [
   createContextItem({
     actionKey: 'hide-alerts',
     title: 'Hide Alerts',
-    icon: { name: 'bell-outline' },
+    icon: { name: 'bell' },
   }),
   createContextItem({
     actionKey: 'delete',
     title: 'Delete',
-    icon: { name: 'trash-can-outline', color: 'red' },
+    icon: { name: 'trash', color: 'red' },
     destructive: true,
   }),
 ];
diff --git a/apps/expo/app/(app)/settings/index.android.tsx b/apps/expo/app/(app)/settings/index.android.tsx
index d0d7d63cff..07adc2938e 100644
--- a/apps/expo/app/(app)/settings/index.android.tsx
+++ b/apps/expo/app/(app)/settings/index.android.tsx
@@ -55,12 +55,12 @@ export default function SettingsAndroidStyleScreen() {
         />
       )}
       <List
-        rootStyle={Platform.select({
+        style={Platform.select({
           ios: undefined,
           default: { paddingTop: insets.top },
         })}
         stickyHeaderIndices={Platform.select({ ios: undefined, default: [1] })}
-        rootClassName="bg-background ios:bg-background"
+        className="bg-background ios:bg-background"
         contentContainerClassName="pt-4 ios:pt-0"
         contentInsetAdjustmentBehavior="automatic"
         variant="full-width"
diff --git a/apps/expo/app/(app)/shopping-list.tsx b/apps/expo/app/(app)/shopping-list.tsx
index a0d8d82a41..bcdaf2bed2 100644
--- a/apps/expo/app/(app)/shopping-list.tsx
+++ b/apps/expo/app/(app)/shopping-list.tsx
@@ -144,7 +144,7 @@ function ShoppingItemCard({ item }: { item: (typeof SHOPPING_LIST)[0] }) {
 
         {item.purchased && (
           <View className="mt-3 flex-row items-center gap-1">
-            <Icon name="check-circle" size={16} color={colors.green} />
+            <Icon name="check-circle" size={16} color={'rgb(48, 164, 108)'} />
             <Text variant="footnote" className="text-green-500">
               {t('shopping.purchased')}
             </Text>
diff --git a/apps/expo/app/_layout.tsx b/apps/expo/app/_layout.tsx
index a647a07af9..182a90f2ad 100644
--- a/apps/expo/app/_layout.tsx
+++ b/apps/expo/app/_layout.tsx
@@ -4,7 +4,7 @@ import { Stack } from 'expo-router';
 import { StatusBar } from 'expo-status-bar';
 import '../global.css';
 
-import { Alert, type AlertRef } from '@packrat-ai/nativewindui';
+import { Alert, type AlertMethods } from '@packrat-ai/nativewindui';
 import * as Sentry from '@sentry/react-native';
 import { userStore } from 'expo-app/features/auth/store';
 import { useColorScheme, useInitialAndroidBarSync } from 'expo-app/lib/hooks/useColorScheme';
@@ -29,12 +29,12 @@ export {
   ErrorBoundary,
 } from 'expo-router';
 
-export let appAlert: React.RefObject<AlertRef | null>;
+export let appAlert: React.RefObject<AlertMethods | null>;
 
 function RootLayout() {
   useInitialAndroidBarSync();
 
-  appAlert = useRef<AlertRef>(null);
+  appAlert = useRef<AlertMethods>(null);
 
   const { colorScheme, isDarkColorScheme } = useColorScheme();
 
diff --git a/apps/expo/app/auth/(create-account)/credentials.tsx b/apps/expo/app/auth/(create-account)/credentials.tsx
index ea5d3ade7d..bc3e3eeebe 100644
--- a/apps/expo/app/auth/(create-account)/credentials.tsx
+++ b/apps/expo/app/auth/(create-account)/credentials.tsx
@@ -1,4 +1,4 @@
-import type { AlertRef } from '@packrat/ui/nativewindui';
+import type { AlertMethods } from '@packrat/ui/nativewindui';
 import {
   AlertAnchor,
   Button,
@@ -109,7 +109,7 @@ export default function CredentialsScreen() {
   const [focusedTextField, setFocusedTextField] = React.useState<
     'email' | 'password' | 'confirm-password' | null
   >(null);
-  const alertRef = React.useRef<AlertRef>(null);
+  const alertRef = React.useRef<AlertMethods>(null);
 
   // Get data from previous screen
   const params = useLocalSearchParams<{
diff --git a/apps/expo/app/auth/(login)/forgot-password.tsx b/apps/expo/app/auth/(login)/forgot-password.tsx
index 1751554c4a..0a08340fde 100644
--- a/apps/expo/app/auth/(login)/forgot-password.tsx
+++ b/apps/expo/app/auth/(login)/forgot-password.tsx
@@ -1,4 +1,4 @@
-import type { AlertRef } from '@packrat/ui/nativewindui';
+import type { AlertMethods } from '@packrat/ui/nativewindui';
 import {
   AlertAnchor,
   Button,
@@ -32,7 +32,7 @@ const emailSchema = z.object({
 export default function ForgotPasswordScreen() {
   const insets = useSafeAreaInsets();
   const { t } = useTranslation();
-  const alertRef = React.useRef<AlertRef>(null);
+  const alertRef = React.useRef<AlertMethods>(null);
   const [isLoading, setIsLoading] = React.useState(false);
   const { forgotPassword } = useAuthActions();
   const needsReauth = useAtomValue(needsReauthAtom);
diff --git a/apps/expo/app/auth/(login)/reset-password.tsx b/apps/expo/app/auth/(login)/reset-password.tsx
index dc7cf90a89..90116714cc 100644
--- a/apps/expo/app/auth/(login)/reset-password.tsx
+++ b/apps/expo/app/auth/(login)/reset-password.tsx
@@ -1,4 +1,4 @@
-import type { AlertRef } from '@packrat/ui/nativewindui';
+import type { AlertMethods } from '@packrat/ui/nativewindui';
 import {
   AlertAnchor,
   Button,
@@ -107,7 +107,7 @@ export default function ResetPasswordScreen() {
   const [focusedTextField, setFocusedTextField] = React.useState<
     'password' | 'confirm-password' | null
   >(null);
-  const alertRef = React.useRef<AlertRef>(null);
+  const alertRef = React.useRef<AlertMethods>(null);
 
   // Get data from previous screen
   const params = useLocalSearchParams<{
diff --git a/apps/expo/app/auth/index.tsx b/apps/expo/app/auth/index.tsx
index 72b1cc87d5..7026ac86a5 100644
--- a/apps/expo/app/auth/index.tsx
+++ b/apps/expo/app/auth/index.tsx
@@ -1,4 +1,4 @@
-import type { AlertRef } from '@packrat/ui/nativewindui';
+import type { AlertMethods } from '@packrat/ui/nativewindui';
 import { ActivityIndicator, AlertAnchor, Button, Text } from '@packrat/ui/nativewindui';
 import AsyncStorage from '@react-native-async-storage/async-storage';
 import { featureFlags } from 'expo-app/config';
@@ -27,7 +27,7 @@ type RouteParams = {
 export default function AuthIndexScreen() {
   const { signInWithGoogle, signInWithApple, isLoading } = useAuth();
   const { t } = useTranslation();
-  const alertRef = React.useRef<AlertRef>(null);
+  const alertRef = React.useRef<AlertMethods>(null);
   const {
     redirectTo = '/',
     showSignInCopy,
diff --git a/apps/expo/app/auth/one-time-password.tsx b/apps/expo/app/auth/one-time-password.tsx
index d87e03f1ca..4f44251aa6 100644
--- a/apps/expo/app/auth/one-time-password.tsx
+++ b/apps/expo/app/auth/one-time-password.tsx
@@ -1,4 +1,4 @@
-import type { AlertRef } from '@packrat/ui/nativewindui';
+import type { AlertMethods } from '@packrat/ui/nativewindui';
 import { ActivityIndicator, AlertAnchor, Button, Text, TextField } from '@packrat/ui/nativewindui';
 import { useHeaderHeight } from '@react-navigation/elements';
 import { useAuthActions } from 'expo-app/features/auth/hooks/useAuthActions';
@@ -38,7 +38,7 @@ export default function OneTimePasswordScreen() {
   const [codeValues, setCodeValues] = React.useState(Array(NUM_OF_CODE_CHARACTERS).fill(''));
   const [errorIndexes, setErrorIndexes] = React.useState<number[]>([]);
   const [isLoading, setIsLoading] = React.useState(false);
-  const alertRef = React.useRef<AlertRef>(null);
+  const alertRef = React.useRef<AlertMethods>(null);
   const headerHeight = useHeaderHeight();
   const params = useLocalSearchParams<{ email: string; mode: string }>();
   const email = params.email || '';
diff --git a/apps/expo/features/ai-packs/screens/AIPacksScreen.tsx b/apps/expo/features/ai-packs/screens/AIPacksScreen.tsx
index 59f14364fe..6db4832485 100644
--- a/apps/expo/features/ai-packs/screens/AIPacksScreen.tsx
+++ b/apps/expo/features/ai-packs/screens/AIPacksScreen.tsx
@@ -1,7 +1,7 @@
 import {
   ActivityIndicator,
   Alert,
-  type AlertRef,
+  type AlertMethods,
   Button,
   LargeTitleHeader,
   Text,
@@ -20,7 +20,7 @@ import { useGeneratePacks } from '../hooks/useGeneratedPacks';
 export function AIPacksScreen() {
   const { colors } = useColorScheme();
   const { t } = useTranslation();
-  const alertRef = useRef<AlertRef>(null);
+  const alertRef = useRef<AlertMethods>(null);
   const { mutateAsync: generatePacks, isPending, generatedPacksFromStore } = useGeneratePacks();
   const [packsModalVisible, setPacksModalVisible] = useState(false);
   const router = useRouter();
@@ -35,7 +35,7 @@ export function AIPacksScreen() {
         alertRef.current?.alert({
           title: t('ai.packsGenerated'),
           message: t('ai.successfullyGenerated', { count: packs.length }),
-          materialIcon: { name: 'backpack', color: colors.green },
+          materialIcon: { name: 'bag-personal', color: 'rgb(48, 164, 108)' },
           buttons: [
             { text: t('ai.return'), onPress: () => {} },
             {
diff --git a/apps/expo/features/ai/components/WebSearchGenerativeUI.tsx b/apps/expo/features/ai/components/WebSearchGenerativeUI.tsx
index 2558f8ccc9..9dc3a06e9c 100644
--- a/apps/expo/features/ai/components/WebSearchGenerativeUI.tsx
+++ b/apps/expo/features/ai/components/WebSearchGenerativeUI.tsx
@@ -112,7 +112,7 @@ export function WebSearchGenerativeUI({ toolInvocation }: WebSearchGenerativeUIP
                   toolInvocation.output.data.sources.length > 0 && (
                     <View className="mb-6">
                       <View className="flex-row items-center mb-3">
-                        <Icon name="link" size={16} color={colors.green} />
+                        <Icon name="link" size={16} color={'rgb(48, 164, 108)'} />
                         <Text variant="caption1" className="uppercase tracking-wide">
                           {t('ai.tools.sources', {
                             count: toolInvocation.output.data.sources.length,
diff --git a/apps/expo/features/auth/components/DeleteAccountButton.tsx b/apps/expo/features/auth/components/DeleteAccountButton.tsx
index ad050cd50d..c4b69acad3 100644
--- a/apps/expo/features/auth/components/DeleteAccountButton.tsx
+++ b/apps/expo/features/auth/components/DeleteAccountButton.tsx
@@ -1,4 +1,4 @@
-import type { AlertRef } from '@packrat/ui/nativewindui';
+import type { AlertMethods } from '@packrat/ui/nativewindui';
 import { ActivityIndicator, Alert, Button, Text } from '@packrat/ui/nativewindui';
 import { Icon } from '@roninoss/icons';
 import { useAuth } from 'expo-app/features/auth/hooks/useAuth';
@@ -11,7 +11,7 @@ export function DeleteAccountButton() {
   const { colors } = useColorScheme();
   const { deleteAccount } = useAuth();
   const { t } = useTranslation();
-  const alertRef = useRef<AlertRef>(null);
+  const alertRef = useRef<AlertMethods>(null);
   const [isDeleting, setIsDeleting] = useState(false);
 
   return (
diff --git a/apps/expo/features/catalog/components/CatalogItemCard.tsx b/apps/expo/features/catalog/components/CatalogItemCard.tsx
index d38a4da7f2..4e13aa848f 100644
--- a/apps/expo/features/catalog/components/CatalogItemCard.tsx
+++ b/apps/expo/features/catalog/components/CatalogItemCard.tsx
@@ -41,7 +41,7 @@ export function CatalogItemCard({ item, onPress }: CatalogItemCardProps) {
                 </View>
                 {item.ratingValue && (
                   <View className="flex-row items-center">
-                    <Icon name="star" size={14} color={colors.yellow} />
+                    <Icon name="star" size={14} color={'rgb(255, 204, 0)'} />
                     <Text className="ml-1 text-xs text-muted-foreground">
                       {item.ratingValue.toFixed(1)}
                     </Text>
diff --git a/apps/expo/features/catalog/components/CatalogItemSelectCard.tsx b/apps/expo/features/catalog/components/CatalogItemSelectCard.tsx
index 3505ba41a1..2a25a25b87 100644
--- a/apps/expo/features/catalog/components/CatalogItemSelectCard.tsx
+++ b/apps/expo/features/catalog/components/CatalogItemSelectCard.tsx
@@ -55,7 +55,7 @@ export function CatalogItemSelectCard({ item, isSelected, onToggle }: CatalogIte
                 </View>
                 {item.ratingValue && (
                   <View className="flex-row items-center">
-                    <Icon name="star" size={14} color={colors.yellow} />
+                    <Icon name="star" size={14} color={'rgb(255, 204, 0)'} />
                     <Text className="ml-1 text-xs text-muted-foreground">
                       {item.ratingValue.toFixed(1)}
                     </Text>
diff --git a/apps/expo/features/catalog/components/ItemReviews.tsx b/apps/expo/features/catalog/components/ItemReviews.tsx
index 7253c64126..f3358c00b9 100644
--- a/apps/expo/features/catalog/components/ItemReviews.tsx
+++ b/apps/expo/features/catalog/components/ItemReviews.tsx
@@ -69,7 +69,7 @@ export function ItemReviews({ reviews }: ItemReviewsProps) {
               <View className="flex-row items-center">
                 {review.verified && (
                   <View className="mr-2 flex-row items-center">
-                    <Icon name="check-circle-outline" size={14} color={colors.green} />
+                    <Icon name="check-circle-outline" size={14} color={'rgb(48, 164, 108)'} />
                     <Text className="ml-1 text-xs text-green-900 dark:text-green-500">
                       {t('catalog.verified')}
                     </Text>
@@ -81,7 +81,7 @@ export function ItemReviews({ reviews }: ItemReviewsProps) {
                       key={star}
                       name={star <= review.rating ? 'star' : 'star-outline'}
                       size={14}
-                      color={colors.yellow}
+                      color={'rgb(255, 204, 0)'}
                     />
                   ))}
                 </View>
diff --git a/apps/expo/features/catalog/screens/CatalogItemDetailScreen.tsx b/apps/expo/features/catalog/screens/CatalogItemDetailScreen.tsx
index 212e30f92e..f8b7ce9f90 100644
--- a/apps/expo/features/catalog/screens/CatalogItemDetailScreen.tsx
+++ b/apps/expo/features/catalog/screens/CatalogItemDetailScreen.tsx
@@ -76,7 +76,7 @@ export function CatalogItemDetailScreen() {
               </View>
               {item.ratingValue && (
                 <View className="flex-row items-center">
-                  <Icon name="star" size={16} color={colors.yellow} />
+                  <Icon name="star" size={16} color={'rgb(255, 204, 0)'} />
                   <Text className="ml-1 text-sm text-muted-foreground">
                     {item.ratingValue.toFixed(1)}
                   </Text>
diff --git a/apps/expo/features/pack-templates/screens/PackTemplateListScreen.tsx b/apps/expo/features/pack-templates/screens/PackTemplateListScreen.tsx
index d99097dad5..701b63e5c8 100644
--- a/apps/expo/features/pack-templates/screens/PackTemplateListScreen.tsx
+++ b/apps/expo/features/pack-templates/screens/PackTemplateListScreen.tsx
@@ -1,5 +1,5 @@
 import type { BottomSheetModal } from '@gorhom/bottom-sheet';
-import type { LargeTitleSearchBarRef } from '@packrat/ui/nativewindui';
+import type { LargeTitleSearchBarMethods } from '@packrat/ui/nativewindui';
 import { LargeTitleHeader, SegmentedControl } from '@packrat/ui/nativewindui';
 import { Icon } from '@roninoss/icons';
 import { useAuth } from 'expo-app/features/auth/hooks/useAuth';
@@ -46,7 +46,7 @@ export function PackTemplateListScreen() {
   const { t } = useTranslation();
   const templateOptionsRef = useRef<BottomSheetModal>(null);
 
-  const searchBarRef = useRef<LargeTitleSearchBarRef>(null);
+  const searchBarRef = useRef<LargeTitleSearchBarMethods>(null);
 
   // Filter options with translations
   const filterOptions: FilterOption[] = [
diff --git a/apps/expo/features/packs/components/GapSuggestion.tsx b/apps/expo/features/packs/components/GapSuggestion.tsx
index a8e3bb9b44..dfaec708b9 100644
--- a/apps/expo/features/packs/components/GapSuggestion.tsx
+++ b/apps/expo/features/packs/components/GapSuggestion.tsx
@@ -40,7 +40,7 @@ export function GapSuggestion({ gap, packId }: GapSuggestionProps) {
       case 'must-have':
         return isDarkColorScheme ? '#ef4444' : colors.destructive;
       case 'nice-to-have':
-        return colors.yellow;
+        return 'rgb(255, 204, 0)';
       case 'optional':
         return colors.primary;
       default:
diff --git a/apps/expo/features/packs/components/GearInventoryTile.tsx b/apps/expo/features/packs/components/GearInventoryTile.tsx
index c1b9095a67..f41237203d 100644
--- a/apps/expo/features/packs/components/GearInventoryTile.tsx
+++ b/apps/expo/features/packs/components/GearInventoryTile.tsx
@@ -1,4 +1,4 @@
-import type { AlertRef } from '@packrat/ui/nativewindui';
+import type { AlertMethods } from '@packrat/ui/nativewindui';
 import { Alert, ListItem, Text } from '@packrat/ui/nativewindui';
 import { Icon } from '@roninoss/icons';
 import { useColorScheme } from 'expo-app/lib/hooks/useColorScheme';
@@ -11,7 +11,7 @@ import { useUserPackItems } from '../hooks';
 export function GearInventoryTile() {
   const { t } = useTranslation();
   const router = useRouter();
-  const alertRef = useRef<AlertRef>(null);
+  const alertRef = useRef<AlertMethods>(null);
   const items = useUserPackItems();
 
   const handlePress = () => {
diff --git a/apps/expo/features/packs/components/HorizontalCatalogItemCard.tsx b/apps/expo/features/packs/components/HorizontalCatalogItemCard.tsx
index 9efeb398e3..7a047abba6 100644
--- a/apps/expo/features/packs/components/HorizontalCatalogItemCard.tsx
+++ b/apps/expo/features/packs/components/HorizontalCatalogItemCard.tsx
@@ -70,7 +70,7 @@ export function HorizontalCatalogItemCard({ item, ...restProps }: HorizontalCata
             )}
             {item.ratingValue && (
               <View className="flex-row items-center gap-1">
-                <Icon name="star" size={12} color={colors.yellow} />
+                <Icon name="star" size={12} color={'rgb(255, 204, 0)'} />
                 <Text className="text-sm text-muted-foreground">{item.ratingValue.toFixed(1)}</Text>
               </View>
             )}
diff --git a/apps/expo/features/packs/components/PackCategoriesTile.tsx b/apps/expo/features/packs/components/PackCategoriesTile.tsx
index 4b016813a3..dd9244443c 100644
--- a/apps/expo/features/packs/components/PackCategoriesTile.tsx
+++ b/apps/expo/features/packs/components/PackCategoriesTile.tsx
@@ -1,4 +1,4 @@
-import type { AlertRef } from '@packrat/ui/nativewindui';
+import type { AlertMethods } from '@packrat/ui/nativewindui';
 import { Alert, ListItem, Text } from '@packrat/ui/nativewindui';
 import { Icon } from '@roninoss/icons';
 import { useColorScheme } from 'expo-app/lib/hooks/useColorScheme';
@@ -15,7 +15,7 @@ export function PackCategoriesTile() {
 
   const router = useRouter();
 
-  const alertRef = useRef<AlertRef>(null);
+  const alertRef = useRef<AlertMethods>(null);
 
   const handlePress = () => {
     if (!currentPack) return alertRef.current?.show();
diff --git a/apps/expo/features/packs/components/PackStatsTile.tsx b/apps/expo/features/packs/components/PackStatsTile.tsx
index 50c192a3bb..4dbae9769d 100644
--- a/apps/expo/features/packs/components/PackStatsTile.tsx
+++ b/apps/expo/features/packs/components/PackStatsTile.tsx
@@ -1,4 +1,4 @@
-import type { AlertRef } from '@packrat/ui/nativewindui';
+import type { AlertMethods } from '@packrat/ui/nativewindui';
 import { Alert, ListItem } from '@packrat/ui/nativewindui';
 import { Icon } from '@roninoss/icons';
 import { useColorScheme } from 'expo-app/lib/hooks/useColorScheme';
@@ -15,7 +15,7 @@ export function PackStatsTile() {
   const packs = usePacks();
   const currentPack = packs[0];
 
-  const alertRef = useRef<AlertRef>(null);
+  const alertRef = useRef<AlertMethods>(null);
 
   const route: Href | null = currentPack ? `/pack-stats/${currentPack.id}` : null;
 
diff --git a/apps/expo/features/packs/components/WeightAnalysisTile.tsx b/apps/expo/features/packs/components/WeightAnalysisTile.tsx
index 9fdf805eb1..28c3a0760a 100644
--- a/apps/expo/features/packs/components/WeightAnalysisTile.tsx
+++ b/apps/expo/features/packs/components/WeightAnalysisTile.tsx
@@ -1,4 +1,4 @@
-import type { AlertRef } from '@packrat/ui/nativewindui';
+import type { AlertMethods } from '@packrat/ui/nativewindui';
 import { Alert, ListItem, Text } from '@packrat/ui/nativewindui';
 import { Icon } from '@roninoss/icons';
 import { useColorScheme } from 'expo-app/lib/hooks/useColorScheme';
@@ -12,7 +12,7 @@ export function WeightAnalysisTile() {
   const { t } = useTranslation();
   const router = useRouter();
   const currentPack = useCurrentPack();
-  const alertRef = useRef<AlertRef>(null);
+  const alertRef = useRef<AlertMethods>(null);
 
   const packWeight = currentPack?.totalWeight ?? 0;
   const route: Href | null = currentPack ? `/weight-analysis/${currentPack.id}` : null;
diff --git a/apps/expo/features/packs/screens/PackListScreen.tsx b/apps/expo/features/packs/screens/PackListScreen.tsx
index c65e28d11b..ce075a7115 100644
--- a/apps/expo/features/packs/screens/PackListScreen.tsx
+++ b/apps/expo/features/packs/screens/PackListScreen.tsx
@@ -1,4 +1,4 @@
-import type { LargeTitleSearchBarRef } from '@packrat/ui/nativewindui';
+import type { LargeTitleSearchBarMethods } from '@packrat/ui/nativewindui';
 import {
   ActivityIndicator,
   Button,
@@ -66,7 +66,7 @@ export function PackListScreen() {
   );
   const allPacksQuery = useAllPacks(selectedTypeIndex === ALL_PACKS_INDEX);
 
-  const searchBarRef = useRef<LargeTitleSearchBarRef>(null);
+  const searchBarRef = useRef<LargeTitleSearchBarMethods>(null);
 
   const { colors } = useColorScheme();
 
diff --git a/apps/expo/features/trips/components/TrailConditionsTile.tsx b/apps/expo/features/trips/components/TrailConditionsTile.tsx
index 9f61cddc53..b94ea8eab4 100644
--- a/apps/expo/features/trips/components/TrailConditionsTile.tsx
+++ b/apps/expo/features/trips/components/TrailConditionsTile.tsx
@@ -1,4 +1,4 @@
-import type { AlertRef } from '@packrat/ui/nativewindui';
+import type { AlertMethods } from '@packrat/ui/nativewindui';
 import { Alert, ListItem } from '@packrat/ui/nativewindui';
 import { Icon } from '@roninoss/icons';
 import { featureFlags } from 'expo-app/config';
@@ -12,7 +12,7 @@ export function TrailConditionsTile() {
   const router = useRouter();
   const { t } = useTranslation();
 
-  const alertRef = useRef<AlertRef>(null);
+  const alertRef = useRef<AlertMethods>(null);
 
   const handlePress = () => {
     // if (!currentPack) return alertRef.current?.show();
diff --git a/apps/expo/features/trips/components/TripCard.tsx b/apps/expo/features/trips/components/TripCard.tsx
index 68ab8fa0fd..d7f1884456 100644
--- a/apps/expo/features/trips/components/TripCard.tsx
+++ b/apps/expo/features/trips/components/TripCard.tsx
@@ -1,5 +1,5 @@
 import { useActionSheet } from '@expo/react-native-action-sheet';
-import { Alert, type AlertRef, Button } from '@packrat/ui/nativewindui';
+import { Alert, type AlertMethods, Button } from '@packrat/ui/nativewindui';
 import { Icon } from '@roninoss/icons';
 import { useColorScheme } from 'expo-app/lib/hooks/useColorScheme';
 import { useTranslation } from 'expo-app/lib/hooks/useTranslation';
@@ -36,7 +36,7 @@ export function TripCard({ trip, onPress }: TripCardProps) {
   const deleteTrip = useDeleteTrip();
   const { colors } = useColorScheme();
   const { showActionSheetWithOptions } = useActionSheet();
-  const alertRef = useRef<AlertRef>(null);
+  const alertRef = useRef<AlertMethods>(null);
   const insets = useSafeAreaInsets();
 
   const durationDays = getTripDurationDays(trip.startDate, trip.endDate);
diff --git a/apps/expo/features/trips/components/UpcomingTripsTile.tsx b/apps/expo/features/trips/components/UpcomingTripsTile.tsx
index da8b0abb69..29314dc994 100644
--- a/apps/expo/features/trips/components/UpcomingTripsTile.tsx
+++ b/apps/expo/features/trips/components/UpcomingTripsTile.tsx
@@ -1,4 +1,4 @@
-import type { AlertRef } from '@packrat/ui/nativewindui';
+import type { AlertMethods } from '@packrat/ui/nativewindui';
 import { Alert, ListItem, Text, useColorScheme } from '@packrat/ui/nativewindui';
 import { Icon } from '@roninoss/icons';
 import { featureFlags } from 'expo-app/config';
@@ -11,7 +11,7 @@ import { View } from 'react-native';
 export function UpcomingTripsTile() {
   const router = useRouter();
   const { t } = useTranslation();
-  const alertRef = useRef<AlertRef>(null);
+  const alertRef = useRef<AlertMethods>(null);
   const [showAlert, setShowAlert] = useState(false);
 
   // ✅ get all trips
diff --git a/apps/expo/features/trips/screens/TripDetailScreen.tsx b/apps/expo/features/trips/screens/TripDetailScreen.tsx
index 27691c449f..36ca9ff6e2 100644
--- a/apps/expo/features/trips/screens/TripDetailScreen.tsx
+++ b/apps/expo/features/trips/screens/TripDetailScreen.tsx
@@ -1,7 +1,7 @@
 import {
   ActivityIndicator,
   Alert,
-  type AlertRef,
+  type AlertMethods,
   Button,
   Card,
   Text,
@@ -12,7 +12,7 @@ import { useTranslation } from 'expo-app/lib/hooks/useTranslation';
 import { assertDefined } from 'expo-app/utils/typeAssertions';
 import { useLocalSearchParams, useRouter } from 'expo-router';
 import { useRef } from 'react';
-import { ScrollView, View } from 'react-native';
+import { ScrollView, Share, View } from 'react-native';
 import MapView, { Marker, PROVIDER_GOOGLE } from 'react-native-maps';
 import { SafeAreaView } from 'react-native-safe-area-context';
 import { useDetailedPacks } from '../../packs/hooks/useDetailedPacks';
@@ -24,7 +24,7 @@ export function TripDetailScreen() {
   const { id } = useLocalSearchParams();
   const { colors } = useColorScheme();
   const { t } = useTranslation();
-  const alertRef = useRef<AlertRef>(null);
+  const alertRef = useRef<AlertMethods>(null);
 
   const trip = useTripDetailsFromStore(id as string) as Trip;
   const packs = useDetailedPacks();
diff --git a/apps/expo/features/trips/screens/TripListScreen.tsx b/apps/expo/features/trips/screens/TripListScreen.tsx
index c04edfec92..05f9a4dd5d 100644
--- a/apps/expo/features/trips/screens/TripListScreen.tsx
+++ b/apps/expo/features/trips/screens/TripListScreen.tsx
@@ -1,4 +1,4 @@
-import { LargeTitleHeader, type LargeTitleSearchBarRef } from '@packrat/ui/nativewindui';
+import { LargeTitleHeader, type LargeTitleSearchBarMethods } from '@packrat/ui/nativewindui';
 import { Icon } from '@roninoss/icons';
 import TabScreen from 'expo-app/components/TabScreen';
 import { useColorScheme } from 'expo-app/lib/hooks/useColorScheme';
@@ -28,7 +28,7 @@ export function TripsListScreen() {
   const router = useRouter();
   const { t } = useTranslation();
   const trips = useTrips();
-  const searchBarRef = useRef<LargeTitleSearchBarRef>(null);
+  const searchBarRef = useRef<LargeTitleSearchBarMethods>(null);
 
   const handleTripPress = useCallback(
     (trip: Trip) => {
diff --git a/apps/expo/features/weather/components/WeatherAlertsTile.tsx b/apps/expo/features/weather/components/WeatherAlertsTile.tsx
index 473ade61a6..26b824fe70 100644
--- a/apps/expo/features/weather/components/WeatherAlertsTile.tsx
+++ b/apps/expo/features/weather/components/WeatherAlertsTile.tsx
@@ -1,4 +1,4 @@
-import type { AlertRef } from '@packrat/ui/nativewindui';
+import type { AlertMethods } from '@packrat/ui/nativewindui';
 import { Alert, ListItem, Text } from '@packrat/ui/nativewindui';
 import { Icon } from '@roninoss/icons';
 import { useColorScheme } from 'expo-app/lib/hooks/useColorScheme';
@@ -9,7 +9,7 @@ import { Platform, View } from 'react-native';
 
 export function WeatherAlertsTile() {
   const router = useRouter();
-  const alertRef = useRef<AlertRef>(null);
+  const alertRef = useRef<AlertMethods>(null);
   const { t } = useTranslation();
 
   const handlePress = () => {
diff --git a/apps/expo/features/weather/screens/LocationSearchScreen.tsx b/apps/expo/features/weather/screens/LocationSearchScreen.tsx
index 7df867f022..5bf1290a93 100644
--- a/apps/expo/features/weather/screens/LocationSearchScreen.tsx
+++ b/apps/expo/features/weather/screens/LocationSearchScreen.tsx
@@ -1,4 +1,4 @@
-import { SearchInput, type SearchInputRef, Text } from '@packrat/ui/nativewindui';
+import { SearchInput, Text } from '@packrat/ui/nativewindui';
 import AsyncStorage from '@react-native-async-storage/async-storage';
 import { Icon } from '@roninoss/icons';
 import { cn } from 'expo-app/lib/cn';
@@ -15,6 +15,7 @@ import {
   Keyboard,
   Linking,
   Platform,
+  TextInput,
   TouchableOpacity,
   View,
 } from 'react-native';
@@ -32,7 +33,7 @@ export default function LocationSearchScreen() {
   const [query, setQuery] = useState('');
   const { isLoading, results, error, search, addSearchResult, searchByCoordinates } =
     useLocationSearch();
-  const searchInputRef = useRef<SearchInputRef>(null);
+  const searchInputRef = useRef<TextInput>(null);
   const [recentSearches, setRecentSearches] = useState<string[]>([]);
   const [isAdding, setIsAdding] = useState(false);
   const [addingLocationId, setAddingLocationId] = useState<number | null>(null);