diff --git a/example/android/app/src/main/AndroidManifest.xml b/example/android/app/src/main/AndroidManifest.xml
index 787e012..f0d499a 100644
--- a/example/android/app/src/main/AndroidManifest.xml
+++ b/example/android/app/src/main/AndroidManifest.xml
@@ -24,6 +24,7 @@
         <action android:name="android.intent.action.VIEW"/>
         <category android:name="android.intent.category.DEFAULT"/>
         <category android:name="android.intent.category.BROWSABLE"/>
+        <data android:scheme="nayan"/>
         <data android:scheme="nayan.example"/>
       </intent-filter>
     </activity>
diff --git a/example/app.json b/example/app.json
index 6cbce19..c3f825e 100644
--- a/example/app.json
+++ b/example/app.json
@@ -7,6 +7,7 @@
     "icon": "./assets/icon.png",
     "userInterfaceStyle": "automatic",
     "newArchEnabled": true,
+    "scheme": "nayan",
     "splash": {
       "image": "./assets/splash-icon.png",
       "resizeMode": "contain",
@@ -26,6 +27,7 @@
     "web": {
       "bundler": "metro",
       "favicon": "./assets/favicon.png"
-    }
+    },
+    "plugins": ["expo-router"]
   }
 }
diff --git a/example/index.js b/example/index.js
deleted file mode 100644
index 018d06f..0000000
--- a/example/index.js
+++ /dev/null
@@ -1,8 +0,0 @@
-import { registerRootComponent } from 'expo';
-
-import App from './src/App';
-
-// registerRootComponent calls AppRegistry.registerComponent('main', () => App);
-// It also ensures that whether you load the app in Expo Go or in a native build,
-// the environment is set up appropriately
-registerRootComponent(App);
diff --git a/example/ios/Podfile.lock b/example/ios/Podfile.lock
index 9a8fec8..1f1ad36 100644
--- a/example/ios/Podfile.lock
+++ b/example/ios/Podfile.lock
@@ -1,7 +1,7 @@
 PODS:
   - boost (1.84.0)
   - DoubleConversion (1.1.6)
-  - EXConstants (17.0.7):
+  - EXConstants (17.0.8):
     - ExpoModulesCore
   - Expo (52.0.37):
     - ExpoModulesCore
@@ -11,8 +11,12 @@ PODS:
     - ExpoModulesCore
   - ExpoFont (13.0.4):
     - ExpoModulesCore
+  - ExpoHead (4.0.19):
+    - ExpoModulesCore
   - ExpoKeepAwake (14.0.3):
     - ExpoModulesCore
+  - ExpoLinking (7.0.5):
+    - ExpoModulesCore
   - ExpoModulesCore (2.2.2):
     - DoubleConversion
     - glog
@@ -1773,6 +1777,51 @@ PODS:
     - ReactCommon/turbomodule/bridging
     - ReactCommon/turbomodule/core
     - Yoga
+  - RNScreens (4.10.0):
+    - DoubleConversion
+    - glog
+    - hermes-engine
+    - RCT-Folly (= 2024.01.01.00)
+    - RCTRequired
+    - RCTTypeSafety
+    - React-Core
+    - React-debug
+    - React-Fabric
+    - React-featureflags
+    - React-graphics
+    - React-ImageManager
+    - React-NativeModulesApple
+    - React-RCTFabric
+    - React-RCTImage
+    - React-rendererdebug
+    - React-utils
+    - ReactCodegen
+    - ReactCommon/turbomodule/bridging
+    - ReactCommon/turbomodule/core
+    - RNScreens/common (= 4.10.0)
+    - Yoga
+  - RNScreens/common (4.10.0):
+    - DoubleConversion
+    - glog
+    - hermes-engine
+    - RCT-Folly (= 2024.01.01.00)
+    - RCTRequired
+    - RCTTypeSafety
+    - React-Core
+    - React-debug
+    - React-Fabric
+    - React-featureflags
+    - React-graphics
+    - React-ImageManager
+    - React-NativeModulesApple
+    - React-RCTFabric
+    - React-RCTImage
+    - React-rendererdebug
+    - React-utils
+    - ReactCodegen
+    - ReactCommon/turbomodule/bridging
+    - ReactCommon/turbomodule/core
+    - Yoga
   - SocketRocket (0.7.1)
   - Yoga (0.0.0)
 
@@ -1784,7 +1833,9 @@ DEPENDENCIES:
   - ExpoAsset (from `../node_modules/expo-asset/ios`)
   - ExpoFileSystem (from `../node_modules/expo-file-system/ios`)
   - ExpoFont (from `../node_modules/expo-font/ios`)
+  - ExpoHead (from `../node_modules/expo-router/ios`)
   - ExpoKeepAwake (from `../node_modules/expo-keep-awake/ios`)
+  - ExpoLinking (from `../node_modules/expo-linking/ios`)
   - ExpoModulesCore (from `../node_modules/expo-modules-core`)
   - ExpoSystemUI (from `../node_modules/expo-system-ui/ios`)
   - FBLazyVector (from `../node_modules/react-native/Libraries/FBLazyVector`)
@@ -1853,6 +1904,7 @@ DEPENDENCIES:
   - "RNDateTimePicker (from `../node_modules/@react-native-community/datetimepicker`)"
   - RNGestureHandler (from `../node_modules/react-native-gesture-handler`)
   - RNReanimated (from `../node_modules/react-native-reanimated`)
+  - RNScreens (from `../node_modules/react-native-screens`)
   - Yoga (from `../node_modules/react-native/ReactCommon/yoga`)
 
 SPEC REPOS:
@@ -1874,8 +1926,12 @@ EXTERNAL SOURCES:
     :path: "../node_modules/expo-file-system/ios"
   ExpoFont:
     :path: "../node_modules/expo-font/ios"
+  ExpoHead:
+    :path: "../node_modules/expo-router/ios"
   ExpoKeepAwake:
     :path: "../node_modules/expo-keep-awake/ios"
+  ExpoLinking:
+    :path: "../node_modules/expo-linking/ios"
   ExpoModulesCore:
     :path: "../node_modules/expo-modules-core"
   ExpoSystemUI:
@@ -2009,18 +2065,22 @@ EXTERNAL SOURCES:
     :path: "../node_modules/react-native-gesture-handler"
   RNReanimated:
     :path: "../node_modules/react-native-reanimated"
+  RNScreens:
+    :path: "../node_modules/react-native-screens"
   Yoga:
     :path: "../node_modules/react-native/ReactCommon/yoga"
 
 SPEC CHECKSUMS:
   boost: 1dca942403ed9342f98334bf4c3621f011aa7946
   DoubleConversion: f16ae600a246532c4020132d54af21d0ddb2a385
-  EXConstants: 30c43b9ca8391c31bab9cc45c97f16eddcf11042
+  EXConstants: fcfc75800824ac2d5c592b5bc74130bad17b146b
   Expo: 63515728b6f238842dc95702eb0fb385f00d7c5a
   ExpoAsset: 4033893dfb333b444bf45e951351254137b658d5
   ExpoFileSystem: 2d804c73034c0d65eb2a640e0a77627033b69edc
   ExpoFont: f354e926f8feae5e831ec8087f36652b44a0b188
+  ExpoHead: caaccab2474a1b1f3be62eb1d493f9d30c704f94
   ExpoKeepAwake: b0171a73665bfcefcfcc311742a72a956e6aa680
+  ExpoLinking: 8d12bee174ba0cdf31239706578e29e74a417402
   ExpoModulesCore: 7f5e59799b89e5fad1d7cc6070744c1003ca320f
   ExpoSystemUI: 2e5356d22b077c56c132b4dcbc5d69dd667b1f8c
   FBLazyVector: ca8044c9df513671c85167838b4188791b6f37e1
@@ -2087,6 +2147,7 @@ SPEC CHECKSUMS:
   RNDateTimePicker: cfde47eb14e5ee6b9744f2764bcd1085e6590d9b
   RNGestureHandler: 6aedf747478f64fbeddb3ad5d5d0dfdf2361d136
   RNReanimated: d3b6cc70edd33d2d204c6fed3b8d16c6bf6a091c
+  RNScreens: ba2dcf7048b83669003a28fa95309b965b52af0f
   SocketRocket: d4aabe649be1e368d1318fdf28a022d714d65748
   Yoga: 90d80701b27946c4b23461c00a7207f300a6ff71
 
diff --git a/example/ios/example.xcodeproj/project.pbxproj b/example/ios/example.xcodeproj/project.pbxproj
index 5f068b8..5de37c3 100644
--- a/example/ios/example.xcodeproj/project.pbxproj
+++ b/example/ios/example.xcodeproj/project.pbxproj
@@ -11,11 +11,11 @@
 		13B07FBF1A68108700A75B9A /* Images.xcassets in Resources */ = {isa = PBXBuildFile; fileRef = 13B07FB51A68108700A75B9A /* Images.xcassets */; };
 		13B07FC11A68108700A75B9A /* main.m in Sources */ = {isa = PBXBuildFile; fileRef = 13B07FB71A68108700A75B9A /* main.m */; };
 		3E461D99554A48A4959DE609 /* SplashScreen.storyboard in Resources */ = {isa = PBXBuildFile; fileRef = AA286B85B6C04FC6940260E9 /* SplashScreen.storyboard */; };
-		88D75F739EDD1BBE64E82A84 /* PrivacyInfo.xcprivacy in Resources */ = {isa = PBXBuildFile; fileRef = 69C37EC74BEFC79B8DDE7FC5 /* PrivacyInfo.xcprivacy */; };
-		93BC867291D04C1788B45C78 /* noop-file.swift in Sources */ = {isa = PBXBuildFile; fileRef = 411D71150CFA4BD6A9112F5E /* noop-file.swift */; };
 		96905EF65AED1B983A6B3ABC /* libPods-example.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 58EEBF8E8E6FB1BC6CAF49B5 /* libPods-example.a */; };
+		A05EECF265244DD1B11528D7 /* noop-file.swift in Sources */ = {isa = PBXBuildFile; fileRef = 38CA346EC4DE4DFFB752EBD4 /* noop-file.swift */; };
 		B18059E884C0ABDD17F3DC3D /* ExpoModulesProvider.swift in Sources */ = {isa = PBXBuildFile; fileRef = FAC715A2D49A985799AEE119 /* ExpoModulesProvider.swift */; };
 		BB2F792D24A3F905000567C9 /* Expo.plist in Resources */ = {isa = PBXBuildFile; fileRef = BB2F792C24A3F905000567C9 /* Expo.plist */; };
+		C124F89EB7DFA6B0EE8DFEA5 /* PrivacyInfo.xcprivacy in Resources */ = {isa = PBXBuildFile; fileRef = A8A8D96D118EBC7283DA8792 /* PrivacyInfo.xcprivacy */; };
 /* End PBXBuildFile section */
 
 /* Begin PBXFileReference section */
@@ -25,14 +25,14 @@
 		13B07FB51A68108700A75B9A /* Images.xcassets */ = {isa = PBXFileReference; lastKnownFileType = folder.assetcatalog; name = Images.xcassets; path = example/Images.xcassets; sourceTree = "<group>"; };
 		13B07FB61A68108700A75B9A /* Info.plist */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = text.plist.xml; name = Info.plist; path = example/Info.plist; sourceTree = "<group>"; };
 		13B07FB71A68108700A75B9A /* main.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; name = main.m; path = example/main.m; sourceTree = "<group>"; };
-		411D71150CFA4BD6A9112F5E /* noop-file.swift */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = 4; includeInIndex = 0; lastKnownFileType = sourcecode.swift; name = "noop-file.swift"; path = "example/noop-file.swift"; sourceTree = "<group>"; };
+		38CA346EC4DE4DFFB752EBD4 /* noop-file.swift */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = 4; includeInIndex = 0; lastKnownFileType = sourcecode.swift; name = "noop-file.swift"; path = "example/noop-file.swift"; sourceTree = "<group>"; };
 		58EEBF8E8E6FB1BC6CAF49B5 /* libPods-example.a */ = {isa = PBXFileReference; explicitFileType = archive.ar; includeInIndex = 0; path = "libPods-example.a"; sourceTree = BUILT_PRODUCTS_DIR; };
-		69C37EC74BEFC79B8DDE7FC5 /* PrivacyInfo.xcprivacy */ = {isa = PBXFileReference; includeInIndex = 1; name = PrivacyInfo.xcprivacy; path = example/PrivacyInfo.xcprivacy; sourceTree = "<group>"; };
 		6C2E3173556A471DD304B334 /* Pods-example.debug.xcconfig */ = {isa = PBXFileReference; includeInIndex = 1; lastKnownFileType = text.xcconfig; name = "Pods-example.debug.xcconfig"; path = "Target Support Files/Pods-example/Pods-example.debug.xcconfig"; sourceTree = "<group>"; };
 		7A4D352CD337FB3A3BF06240 /* Pods-example.release.xcconfig */ = {isa = PBXFileReference; includeInIndex = 1; lastKnownFileType = text.xcconfig; name = "Pods-example.release.xcconfig"; path = "Target Support Files/Pods-example/Pods-example.release.xcconfig"; sourceTree = "<group>"; };
+		A8A8D96D118EBC7283DA8792 /* PrivacyInfo.xcprivacy */ = {isa = PBXFileReference; includeInIndex = 1; name = PrivacyInfo.xcprivacy; path = example/PrivacyInfo.xcprivacy; sourceTree = "<group>"; };
 		AA286B85B6C04FC6940260E9 /* SplashScreen.storyboard */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = file.storyboard; name = SplashScreen.storyboard; path = example/SplashScreen.storyboard; sourceTree = "<group>"; };
 		BB2F792C24A3F905000567C9 /* Expo.plist */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = text.plist.xml; path = Expo.plist; sourceTree = "<group>"; };
-		D9C43FB7E6674BD98AE7394A /* example-Bridging-Header.h */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = 4; includeInIndex = 0; lastKnownFileType = sourcecode.c.h; name = "example-Bridging-Header.h"; path = "example/example-Bridging-Header.h"; sourceTree = "<group>"; };
+		C15585DFB6754200A3A826B6 /* example-Bridging-Header.h */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = 4; includeInIndex = 0; lastKnownFileType = sourcecode.c.h; name = "example-Bridging-Header.h"; path = "example/example-Bridging-Header.h"; sourceTree = "<group>"; };
 		ED297162215061F000B7C4FE /* JavaScriptCore.framework */ = {isa = PBXFileReference; lastKnownFileType = wrapper.framework; name = JavaScriptCore.framework; path = System/Library/Frameworks/JavaScriptCore.framework; sourceTree = SDKROOT; };
 		FAC715A2D49A985799AEE119 /* ExpoModulesProvider.swift */ = {isa = PBXFileReference; includeInIndex = 1; lastKnownFileType = sourcecode.swift; name = ExpoModulesProvider.swift; path = "Pods/Target Support Files/Pods-example/ExpoModulesProvider.swift"; sourceTree = "<group>"; };
 /* End PBXFileReference section */
@@ -59,9 +59,9 @@
 				13B07FB61A68108700A75B9A /* Info.plist */,
 				13B07FB71A68108700A75B9A /* main.m */,
 				AA286B85B6C04FC6940260E9 /* SplashScreen.storyboard */,
-				411D71150CFA4BD6A9112F5E /* noop-file.swift */,
-				D9C43FB7E6674BD98AE7394A /* example-Bridging-Header.h */,
-				69C37EC74BEFC79B8DDE7FC5 /* PrivacyInfo.xcprivacy */,
+				38CA346EC4DE4DFFB752EBD4 /* noop-file.swift */,
+				C15585DFB6754200A3A826B6 /* example-Bridging-Header.h */,
+				A8A8D96D118EBC7283DA8792 /* PrivacyInfo.xcprivacy */,
 			);
 			name = example;
 			sourceTree = "<group>";
@@ -147,13 +147,13 @@
 			buildConfigurationList = 13B07F931A680F5B00A75B9A /* Build configuration list for PBXNativeTarget "example" */;
 			buildPhases = (
 				08A4A3CD28434E44B6B9DE2E /* [CP] Check Pods Manifest.lock */,
-				0F94A3D5022C5707302A1003 /* [Expo] Configure project */,
+				2CFF53F392873371D02B10A9 /* [Expo] Configure project */,
 				13B07F871A680F5B00A75B9A /* Sources */,
 				13B07F8C1A680F5B00A75B9A /* Frameworks */,
 				13B07F8E1A680F5B00A75B9A /* Resources */,
 				00DD1BFF1BD5951E006B06BC /* Bundle React Native code and images */,
 				800E24972A6A228C8D4807E9 /* [CP] Copy Pods Resources */,
-				C1F91287EB4438B987B66503 /* [CP] Embed Pods Frameworks */,
+				ECBBE9DF7889F077D3178C5C /* [CP] Embed Pods Frameworks */,
 			);
 			buildRules = (
 			);
@@ -203,7 +203,7 @@
 				BB2F792D24A3F905000567C9 /* Expo.plist in Resources */,
 				13B07FBF1A68108700A75B9A /* Images.xcassets in Resources */,
 				3E461D99554A48A4959DE609 /* SplashScreen.storyboard in Resources */,
-				88D75F739EDD1BBE64E82A84 /* PrivacyInfo.xcprivacy in Resources */,
+				C124F89EB7DFA6B0EE8DFEA5 /* PrivacyInfo.xcprivacy in Resources */,
 			);
 			runOnlyForDeploymentPostprocessing = 0;
 		};
@@ -247,7 +247,7 @@
 			shellScript = "diff \"${PODS_PODFILE_DIR_PATH}/Podfile.lock\" \"${PODS_ROOT}/Manifest.lock\" > /dev/null\nif [ $? != 0 ] ; then\n    # print error to STDERR\n    echo \"error: The sandbox is not in sync with the Podfile.lock. Run 'pod install' or update your CocoaPods installation.\" >&2\n    exit 1\nfi\n# This output is used by Xcode 'outputs' to avoid re-running this script phase.\necho \"SUCCESS\" > \"${SCRIPT_OUTPUT_FILE_0}\"\n";
 			showEnvVarsInLog = 0;
 		};
-		0F94A3D5022C5707302A1003 /* [Expo] Configure project */ = {
+		2CFF53F392873371D02B10A9 /* [Expo] Configure project */ = {
 			isa = PBXShellScriptBuildPhase;
 			alwaysOutOfDate = 1;
 			buildActionMask = 2147483647;
@@ -300,7 +300,7 @@
 			shellScript = "\"${PODS_ROOT}/Target Support Files/Pods-example/Pods-example-resources.sh\"\n";
 			showEnvVarsInLog = 0;
 		};
-		C1F91287EB4438B987B66503 /* [CP] Embed Pods Frameworks */ = {
+		ECBBE9DF7889F077D3178C5C /* [CP] Embed Pods Frameworks */ = {
 			isa = PBXShellScriptBuildPhase;
 			buildActionMask = 2147483647;
 			files = (
@@ -328,7 +328,7 @@
 				13B07FBC1A68108700A75B9A /* AppDelegate.mm in Sources */,
 				13B07FC11A68108700A75B9A /* main.m in Sources */,
 				B18059E884C0ABDD17F3DC3D /* ExpoModulesProvider.swift in Sources */,
-				93BC867291D04C1788B45C78 /* noop-file.swift in Sources */,
+				A05EECF265244DD1B11528D7 /* noop-file.swift in Sources */,
 			);
 			runOnlyForDeploymentPostprocessing = 0;
 		};
diff --git a/example/ios/example/Info.plist b/example/ios/example/Info.plist
index 546f0fd..5ec8eea 100644
--- a/example/ios/example/Info.plist
+++ b/example/ios/example/Info.plist
@@ -27,6 +27,7 @@
       <dict>
         <key>CFBundleURLSchemes</key>
         <array>
+          <string>nayan</string>
           <string>nayan.example</string>
         </array>
       </dict>
@@ -44,6 +45,10 @@
       <key>NSAllowsLocalNetworking</key>
       <true/>
     </dict>
+    <key>NSUserActivityTypes</key>
+    <array>
+      <string>$(PRODUCT_BUNDLE_IDENTIFIER).expo.index_route</string>
+    </array>
     <key>UILaunchStoryboardName</key>
     <string>SplashScreen</string>
     <key>UIRequiredDeviceCapabilities</key>
diff --git a/example/package.json b/example/package.json
index 05e306c..5bce675 100644
--- a/example/package.json
+++ b/example/package.json
@@ -1,7 +1,7 @@
 {
   "name": "react-native-nayan-example",
   "version": "1.0.0",
-  "main": "index.js",
+  "main": "expo-router/entry",
   "scripts": {
     "start": "expo start -c",
     "prebuild": "expo prebuild --clean",
@@ -11,9 +11,14 @@
   },
   "dependencies": {
     "@expo/metro-runtime": "~4.0.1",
+    "@expo/vector-icons": "^14.0.4",
     "@react-native-community/datetimepicker": "^8.3.0",
     "expo": "~52.0.35",
+    "expo-constants": "^17.0.8",
+    "expo-linking": "^7.0.5",
     "expo-navigation-bar": "^4.0.8",
+    "expo-router": "^4.0.19",
+    "expo-status-bar": "^2.0.1",
     "expo-system-ui": "^4.0.8",
     "nativewind": "^4.1.23",
     "react": "18.3.1",
@@ -22,6 +27,7 @@
     "react-native-gesture-handler": "^2.24.0",
     "react-native-reanimated": "^3.16.1",
     "react-native-safe-area-context": "^4.12.0",
+    "react-native-screens": "^4.10.0",
     "react-native-web": "~0.19.13"
   },
   "devDependencies": {
diff --git a/example/src/App.tsx b/example/src/App.tsx
deleted file mode 100644
index ff4074e..0000000
--- a/example/src/App.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-import '../global.css';
-import 'react-native-reanimated';
-import { View } from 'react-native';
-import { NButton, NTheme, useColorScheme, THEMES } from 'react-native-nayan';
-import { themeColors } from './constants';
-
-export default function App() {
-  const {colorScheme, isDarkColorScheme, setColorScheme} = useColorScheme();
-
-  const changeTheme = () => {
-    setColorScheme(isDarkColorScheme ? THEMES.light : THEMES.dark);
-  }
-
-  return (
-    <NTheme theme={colorScheme || THEMES.light} themeColors={themeColors}>
-      <View className="flex-1 justify-center items-center bg-background">
-        <NButton onPress={changeTheme}>Change Theme</NButton>
-      </View>
-    </NTheme>
-  );
-}
diff --git a/example/src/app/_layout.tsx b/example/src/app/_layout.tsx
new file mode 100644
index 0000000..aa7fa11
--- /dev/null
+++ b/example/src/app/_layout.tsx
@@ -0,0 +1,20 @@
+import '../../global.css';
+import 'react-native-reanimated';
+import { Stack } from 'expo-router';
+import { NTheme, useColorScheme, THEMES } from 'react-native-nayan';
+import { components, themeColors } from '../constants';
+
+const RootLayout = () => {
+  const {colorScheme } = useColorScheme();
+
+  return (
+    <NTheme theme={colorScheme || THEMES.light} themeColors={themeColors}>
+      <Stack>
+        <Stack.Screen name="index" options={{ title: 'React Native Nayan' }} />
+        {components.map((component: any) => <Stack.Screen key={component.name} name={component.name} options={{ title: component.title }} />)}
+      </Stack>
+    </NTheme>
+  );
+}
+
+export default RootLayout;
diff --git a/example/src/app/accordion.tsx b/example/src/app/accordion.tsx
new file mode 100644
index 0000000..4327815
--- /dev/null
+++ b/example/src/app/accordion.tsx
@@ -0,0 +1,17 @@
+import {View} from 'react-native';
+import { NAccordion } from 'react-native-nayan';
+
+const Component = () => {
+  const items = [
+    {title: 'How does the video creation process work on Inyter.com?', description: 'Inyter.com simplifies the video creation process. You start by choosing a template that fits your occasion, then customize it by adding your photos, videos, and personalized messages. Once you\'re happy with the design, Inyter generates the video and allows you to send it directly to your loved ones via platforms like WhatsApp, or save it for future use.'},
+    {title: 'Why does Inyter.com charge money?', description: 'Inyter.com is free to use with minor limitations, allowing you to create personalized video invitations and wishes at no cost. However, we charge a nominal fee for HD content because generating high-quality videos requires powerful servers and significant resources. Video generation is a costly process that involves heavy server usage, and these fees help us maintain the quality and performance of the platform while ensuring smooth and reliable service for all users.'}
+  ];
+
+  return (
+    <View className="flex-1 p-3">
+      <NAccordion items={items} className="" itemClassName="border border-border rounded bg-card mb-3" titleClassName="text-text" descriptionClassName="text-muted" />
+    </View>
+  )
+};
+
+export default Component;
diff --git a/example/src/app/action-item.tsx b/example/src/app/action-item.tsx
new file mode 100644
index 0000000..b41f7ea
--- /dev/null
+++ b/example/src/app/action-item.tsx
@@ -0,0 +1,28 @@
+import {View} from 'react-native';
+import { NActionItem, NToast, useColorScheme } from 'react-native-nayan';
+import Ionicons from '@expo/vector-icons/Ionicons';
+
+const Component = () => {
+  const {colors} = useColorScheme();
+
+  return (
+    <View className="flex-1 p-3">
+      <NActionItem
+        className="rounded border border-border mb-3"
+        name="Default Action Item"
+        description="This is a default action item."
+        icon={<Ionicons name="flag" size={23} color={colors.text} />}
+        onPress={() => NToast.success("Default item clicked")} />
+      <NActionItem
+        className="rounded border border-primary bg-primary mb-3"
+        titleClassName="text-text"
+        descriptionClassName="text-text"
+        name="Custom Action Item"
+        description="This is a custom action item."
+        icon={<Ionicons name="trash" size={23} color={colors.text} />}
+        onPress={() => NToast.success("Custom item clicked")} />
+    </View>
+  )
+};
+
+export default Component;
diff --git a/example/src/app/alert.tsx b/example/src/app/alert.tsx
new file mode 100644
index 0000000..f469caf
--- /dev/null
+++ b/example/src/app/alert.tsx
@@ -0,0 +1,22 @@
+import {View} from 'react-native';
+import { NAlert } from 'react-native-nayan';
+
+const Component = () => {
+  return (
+    <View className="flex-1 p-3">
+      <NAlert
+        title="Default Alert"
+        description="This is an alert description. You can use this component to show alerts to users."
+      />
+      <NAlert
+        className="bg-primary mt-3 border-primary"
+        titleClassName="text-text"
+        descriptionClassName="text-text"
+        title="Custom Title"
+        description="This is an alert description. You can use this component to show alerts to users."
+      />
+    </View>
+  )
+};
+
+export default Component;
diff --git a/example/src/app/button-group.tsx b/example/src/app/button-group.tsx
new file mode 100644
index 0000000..53e66d0
--- /dev/null
+++ b/example/src/app/button-group.tsx
@@ -0,0 +1,15 @@
+import { useState } from 'react';
+import {View} from 'react-native';
+import { NButtonGroup } from 'react-native-nayan';
+
+const Component = () => {
+  const items = ["Startup", "Enterprise"];
+  const [selected, setSelected] = useState(items[0] as string);
+  return (
+    <View className="flex-1 p-3">
+      <NButtonGroup className="" items={items} value={selected} onChange={setSelected} label="Choose business type" disabled={false} />
+    </View>
+  )
+};
+
+export default Component;
diff --git a/example/src/app/button.tsx b/example/src/app/button.tsx
new file mode 100644
index 0000000..864d1e3
--- /dev/null
+++ b/example/src/app/button.tsx
@@ -0,0 +1,13 @@
+import {View} from 'react-native';
+import { NButton, NToast } from 'react-native-nayan';
+const Component = () => {
+  return (
+    <View className="flex flex-row justify-center p-3">
+      <NButton className="mr-3" disabled={true}>Disabled</NButton>
+      <NButton className="mr-3"  onPress={() => NToast.success("Primary button clicked")}>Primary</NButton>
+      <NButton className="bg-transparent" textClassName="text-primary" onPress={() => NToast.success("Custom button clicked")}>Custom</NButton>
+    </View>
+  )
+};
+
+export default Component;
diff --git a/example/src/app/card.tsx b/example/src/app/card.tsx
new file mode 100644
index 0000000..b748fdf
--- /dev/null
+++ b/example/src/app/card.tsx
@@ -0,0 +1,11 @@
+import { NCard, NText } from 'react-native-nayan';
+
+const Component = () => {
+  return (
+    <NCard className="flex-1 justify-center items-center m-3">
+      <NText>This is sample text.</NText>
+    </NCard>
+  )
+};
+
+export default Component;
diff --git a/example/src/app/checkbox.tsx b/example/src/app/checkbox.tsx
new file mode 100644
index 0000000..d9792aa
--- /dev/null
+++ b/example/src/app/checkbox.tsx
@@ -0,0 +1,13 @@
+import { useState } from 'react';
+import {View} from 'react-native';
+import { NCheck } from 'react-native-nayan';
+const Component = () => {
+  const [checked, setChecked] = useState(false);
+  return (
+    <View className="flex-1 p-3">
+      <NCheck label="By clicking this you have accepted all of our terms and conditions" checked={checked} onChange={setChecked} disabled={false} />
+    </View>
+  )
+};
+
+export default Component;
diff --git a/example/src/app/color-picker.tsx b/example/src/app/color-picker.tsx
new file mode 100644
index 0000000..b1ce98e
--- /dev/null
+++ b/example/src/app/color-picker.tsx
@@ -0,0 +1,15 @@
+import { useState } from 'react';
+import {View} from 'react-native';
+import { NColorPicker } from 'react-native-nayan';
+
+const Component = () => {
+  const [color, setColor] = useState('#ffffff');
+
+  return (
+    <View className="flex-1 p-3">
+      <NColorPicker label="Choose color" value={color} onChange={setColor} disabled={false} />
+    </View>
+  )
+};
+
+export default Component;
diff --git a/example/src/app/confirm.tsx b/example/src/app/confirm.tsx
new file mode 100644
index 0000000..b5e4be9
--- /dev/null
+++ b/example/src/app/confirm.tsx
@@ -0,0 +1,17 @@
+import {View} from 'react-native';
+import { NButton, NConfirm, NToast } from 'react-native-nayan';
+
+const Component = () => {
+  return (
+    <View className="flex-1 justify-center items-center p-3">
+      <NConfirm
+        title="Are you absolutly sure?"
+        description="Doing this action is permanent and can't be undone. are you still want to continue?"
+        onResult={(result) => NToast.success(result ? "Confirmed" : 'Rejected')}>
+        <NButton>Confirm</NButton>
+      </NConfirm>
+    </View>
+  )
+};
+
+export default Component;
diff --git a/example/src/app/date-picker.tsx b/example/src/app/date-picker.tsx
new file mode 100644
index 0000000..19a6bad
--- /dev/null
+++ b/example/src/app/date-picker.tsx
@@ -0,0 +1,10 @@
+import {View} from 'react-native';
+const Component = () => {
+  return (
+    <View className="flex-1 justify-center items-center p-3">
+
+    </View>
+  )
+};
+
+export default Component;
diff --git a/example/src/app/dialog.tsx b/example/src/app/dialog.tsx
new file mode 100644
index 0000000..19a6bad
--- /dev/null
+++ b/example/src/app/dialog.tsx
@@ -0,0 +1,10 @@
+import {View} from 'react-native';
+const Component = () => {
+  return (
+    <View className="flex-1 justify-center items-center p-3">
+
+    </View>
+  )
+};
+
+export default Component;
diff --git a/example/src/app/divider.tsx b/example/src/app/divider.tsx
new file mode 100644
index 0000000..19a6bad
--- /dev/null
+++ b/example/src/app/divider.tsx
@@ -0,0 +1,10 @@
+import {View} from 'react-native';
+const Component = () => {
+  return (
+    <View className="flex-1 justify-center items-center p-3">
+
+    </View>
+  )
+};
+
+export default Component;
diff --git a/example/src/app/index.tsx b/example/src/app/index.tsx
new file mode 100644
index 0000000..b203782
--- /dev/null
+++ b/example/src/app/index.tsx
@@ -0,0 +1,28 @@
+import { Stack, useRouter } from 'expo-router';
+import { ScrollView } from 'react-native';
+import { NPress, NText, useColorScheme, THEMES } from 'react-native-nayan';
+import { components } from '../constants';
+
+export default function Home() {
+  const router = useRouter();
+  const {isDarkColorScheme, setColorScheme} = useColorScheme();
+
+  const changeTheme = () => {
+    setColorScheme(isDarkColorScheme ? THEMES.light : THEMES.dark);
+  }
+
+  return (
+      <ScrollView className="flex-1 bg-background">
+        <Stack.Screen options={{headerRight: () => (
+            <NPress onPress={changeTheme} className="p-3">
+              <NText>{isDarkColorScheme ? 'Light' : 'Dark'}</NText>
+            </NPress>
+          )}} />
+        {components.map((component: any) => (
+          <NPress key={component.name} className="py-3 px-4 bg-card m-3 mb-0 border border-border rounded" onPress={() => router.navigate({ pathname: component.name })}>
+            <NText className="text-lg">{component.title}</NText>
+          </NPress>
+        ))}
+      </ScrollView>
+  );
+}
diff --git a/example/src/app/input.tsx b/example/src/app/input.tsx
new file mode 100644
index 0000000..19a6bad
--- /dev/null
+++ b/example/src/app/input.tsx
@@ -0,0 +1,10 @@
+import {View} from 'react-native';
+const Component = () => {
+  return (
+    <View className="flex-1 justify-center items-center p-3">
+
+    </View>
+  )
+};
+
+export default Component;
diff --git a/example/src/app/linkify.tsx b/example/src/app/linkify.tsx
new file mode 100644
index 0000000..19a6bad
--- /dev/null
+++ b/example/src/app/linkify.tsx
@@ -0,0 +1,10 @@
+import {View} from 'react-native';
+const Component = () => {
+  return (
+    <View className="flex-1 justify-center items-center p-3">
+
+    </View>
+  )
+};
+
+export default Component;
diff --git a/example/src/app/loader.tsx b/example/src/app/loader.tsx
new file mode 100644
index 0000000..19a6bad
--- /dev/null
+++ b/example/src/app/loader.tsx
@@ -0,0 +1,10 @@
+import {View} from 'react-native';
+const Component = () => {
+  return (
+    <View className="flex-1 justify-center items-center p-3">
+
+    </View>
+  )
+};
+
+export default Component;
diff --git a/example/src/app/menu.tsx b/example/src/app/menu.tsx
new file mode 100644
index 0000000..19a6bad
--- /dev/null
+++ b/example/src/app/menu.tsx
@@ -0,0 +1,10 @@
+import {View} from 'react-native';
+const Component = () => {
+  return (
+    <View className="flex-1 justify-center items-center p-3">
+
+    </View>
+  )
+};
+
+export default Component;
diff --git a/example/src/app/popover.tsx b/example/src/app/popover.tsx
new file mode 100644
index 0000000..19a6bad
--- /dev/null
+++ b/example/src/app/popover.tsx
@@ -0,0 +1,10 @@
+import {View} from 'react-native';
+const Component = () => {
+  return (
+    <View className="flex-1 justify-center items-center p-3">
+
+    </View>
+  )
+};
+
+export default Component;
diff --git a/example/src/app/pressable.tsx b/example/src/app/pressable.tsx
new file mode 100644
index 0000000..19a6bad
--- /dev/null
+++ b/example/src/app/pressable.tsx
@@ -0,0 +1,10 @@
+import {View} from 'react-native';
+const Component = () => {
+  return (
+    <View className="flex-1 justify-center items-center p-3">
+
+    </View>
+  )
+};
+
+export default Component;
diff --git a/example/src/app/progress.tsx b/example/src/app/progress.tsx
new file mode 100644
index 0000000..19a6bad
--- /dev/null
+++ b/example/src/app/progress.tsx
@@ -0,0 +1,10 @@
+import {View} from 'react-native';
+const Component = () => {
+  return (
+    <View className="flex-1 justify-center items-center p-3">
+
+    </View>
+  )
+};
+
+export default Component;
diff --git a/example/src/app/radio.tsx b/example/src/app/radio.tsx
new file mode 100644
index 0000000..19a6bad
--- /dev/null
+++ b/example/src/app/radio.tsx
@@ -0,0 +1,10 @@
+import {View} from 'react-native';
+const Component = () => {
+  return (
+    <View className="flex-1 justify-center items-center p-3">
+
+    </View>
+  )
+};
+
+export default Component;
diff --git a/example/src/app/select.tsx b/example/src/app/select.tsx
new file mode 100644
index 0000000..19a6bad
--- /dev/null
+++ b/example/src/app/select.tsx
@@ -0,0 +1,10 @@
+import {View} from 'react-native';
+const Component = () => {
+  return (
+    <View className="flex-1 justify-center items-center p-3">
+
+    </View>
+  )
+};
+
+export default Component;
diff --git a/example/src/app/sheet.tsx b/example/src/app/sheet.tsx
new file mode 100644
index 0000000..19a6bad
--- /dev/null
+++ b/example/src/app/sheet.tsx
@@ -0,0 +1,10 @@
+import {View} from 'react-native';
+const Component = () => {
+  return (
+    <View className="flex-1 justify-center items-center p-3">
+
+    </View>
+  )
+};
+
+export default Component;
diff --git a/example/src/app/skeleton.tsx b/example/src/app/skeleton.tsx
new file mode 100644
index 0000000..19a6bad
--- /dev/null
+++ b/example/src/app/skeleton.tsx
@@ -0,0 +1,10 @@
+import {View} from 'react-native';
+const Component = () => {
+  return (
+    <View className="flex-1 justify-center items-center p-3">
+
+    </View>
+  )
+};
+
+export default Component;
diff --git a/example/src/app/switch.tsx b/example/src/app/switch.tsx
new file mode 100644
index 0000000..19a6bad
--- /dev/null
+++ b/example/src/app/switch.tsx
@@ -0,0 +1,10 @@
+import {View} from 'react-native';
+const Component = () => {
+  return (
+    <View className="flex-1 justify-center items-center p-3">
+
+    </View>
+  )
+};
+
+export default Component;
diff --git a/example/src/app/text.tsx b/example/src/app/text.tsx
new file mode 100644
index 0000000..19a6bad
--- /dev/null
+++ b/example/src/app/text.tsx
@@ -0,0 +1,10 @@
+import {View} from 'react-native';
+const Component = () => {
+  return (
+    <View className="flex-1 justify-center items-center p-3">
+
+    </View>
+  )
+};
+
+export default Component;
diff --git a/example/src/app/textarea.tsx b/example/src/app/textarea.tsx
new file mode 100644
index 0000000..19a6bad
--- /dev/null
+++ b/example/src/app/textarea.tsx
@@ -0,0 +1,10 @@
+import {View} from 'react-native';
+const Component = () => {
+  return (
+    <View className="flex-1 justify-center items-center p-3">
+
+    </View>
+  )
+};
+
+export default Component;
diff --git a/example/src/app/theme.tsx b/example/src/app/theme.tsx
new file mode 100644
index 0000000..19a6bad
--- /dev/null
+++ b/example/src/app/theme.tsx
@@ -0,0 +1,10 @@
+import {View} from 'react-native';
+const Component = () => {
+  return (
+    <View className="flex-1 justify-center items-center p-3">
+
+    </View>
+  )
+};
+
+export default Component;
diff --git a/example/src/app/toast.tsx b/example/src/app/toast.tsx
new file mode 100644
index 0000000..19a6bad
--- /dev/null
+++ b/example/src/app/toast.tsx
@@ -0,0 +1,10 @@
+import {View} from 'react-native';
+const Component = () => {
+  return (
+    <View className="flex-1 justify-center items-center p-3">
+
+    </View>
+  )
+};
+
+export default Component;
diff --git a/example/src/app/tooltip.tsx b/example/src/app/tooltip.tsx
new file mode 100644
index 0000000..19a6bad
--- /dev/null
+++ b/example/src/app/tooltip.tsx
@@ -0,0 +1,10 @@
+import {View} from 'react-native';
+const Component = () => {
+  return (
+    <View className="flex-1 justify-center items-center p-3">
+
+    </View>
+  )
+};
+
+export default Component;
diff --git a/example/src/constants.ts b/example/src/constants.ts
index d526057..1a5c41d 100644
--- a/example/src/constants.ts
+++ b/example/src/constants.ts
@@ -26,3 +26,35 @@ export const themeColors = {
     }
   }
 };
+
+export const components = [
+  {name: 'accordion', title: 'Accordion' },
+  {name: 'action-item', title: 'Action Item' },
+  {name: 'alert', title: 'Alert' },
+  {name: 'button', title: 'Button' },
+  {name: 'button-group', title: 'Button Group' },
+  {name: 'card', title: 'Card' },
+  {name: 'checkbox', title: 'Checkbox' },
+  {name: 'color-picker', title: 'Color Picker' },
+  {name: 'confirm', title: 'Confirm' },
+  {name: 'date-picker', title: 'Date Picker' },
+  {name: 'dialog', title: 'Dialog' },
+  {name: 'divider', title: 'Divider' },
+  {name: 'input', title: 'Input' },
+  {name: 'linkify', title: 'Linkify' },
+  {name: 'loader', title: 'Loader' },
+  {name: 'menu', title: 'Dropdown Menu' },
+  {name: 'popover', title: 'Popover' },
+  {name: 'pressable', title: 'Pressable' },
+  {name: 'progress', title: 'Progress' },
+  {name: 'radio', title: 'Radio' },
+  {name: 'select', title: 'Select' },
+  {name: 'sheet', title: 'Sheet' },
+  {name: 'skeleton', title: 'Skeleton' },
+  {name: 'switch', title: 'Switch' },
+  {name: 'text', title: 'Text' },
+  {name: 'textarea', title: 'Textarea' },
+  {name: 'theme', title: 'Theme' },
+  {name: 'toast', title: 'Toast' },
+  {name: 'tooltip', title: 'Tooltip' }
+];
diff --git a/package.json b/package.json
index 9a6ee9a..c7e0fd7 100644
--- a/package.json
+++ b/package.json
@@ -68,6 +68,7 @@
     "@rn-primitives/alert-dialog": "^1.1.0",
     "@rn-primitives/checkbox": "^1.1.0",
     "@rn-primitives/dialog": "^1.1.0",
+    "@rn-primitives/dropdown-menu": "^1.1.0",
     "@rn-primitives/label": "^1.1.0",
     "@rn-primitives/popover": "^1.1.0",
     "@rn-primitives/portal": "^1.1.0",
diff --git a/src/components/NAccordion.tsx b/src/components/NAccordion.tsx
index f890f3f..67d88b3 100644
--- a/src/components/NAccordion.tsx
+++ b/src/components/NAccordion.tsx
@@ -4,17 +4,18 @@ import { cn } from '@/lib/utils';
 
 interface Props {
   className?: string;
+  itemClassName?: string;
   titleClassName?: string;
   descriptionClassName?: string;
   items: { title: string; description: string }[];
 }
 
 export const NAccordion = (props: Props) => {
-  const { items, className = '', titleClassName = '', descriptionClassName = '' } = props;
+  const { items, className = '', itemClassName = '', titleClassName = '', descriptionClassName = '' } = props;
   return (
     <Accordion type="multiple" collapsible defaultValue={['item-0']} className={cn('w-full', className)}>
       {items.map((item: any, index) => (
-        <AccordionItem key={index} value={'item-' + index}>
+        <AccordionItem className={itemClassName} key={index} value={'item-' + index}>
           <AccordionTrigger className="p-3">
             <NText className={cn('text-lg', titleClassName)}>{item.title}</NText>
           </AccordionTrigger>
diff --git a/src/components/NActionItem.tsx b/src/components/NActionItem.tsx
new file mode 100644
index 0000000..8bb5869
--- /dev/null
+++ b/src/components/NActionItem.tsx
@@ -0,0 +1,30 @@
+import {useCallback} from 'react';
+import { View } from 'react-native';
+import { NPress } from '@/components/NPress';
+import { NText } from '@/components/NText';
+import { cn } from '@/lib/utils';
+
+interface Props {
+  name: string;
+  description?: string;
+  className?: string;
+  titleClassName?: string;
+  descriptionClassName?: string;
+  icon: any;
+  onPress: () => void;
+}
+
+export const NActionItem = (props: Props) => {
+  const { name, description = '', className = '', titleClassName = '', descriptionClassName = '', icon, onPress } = props;
+  const Icon = useCallback(() => icon, []);
+
+  return (
+    <NPress className={cn('flex flex-row justify-start items-center px-3 py-2 bg-card', className)} onPress={onPress}>
+      {icon && <Icon />}
+      <View className="pl-3">
+        <NText className={cn("font-medium mb-0.5", titleClassName)}>{name}</NText>
+        {description && <NText className={cn("text-sm text-muted mt-0", descriptionClassName)}>{description}</NText>}
+      </View>
+    </NPress>
+  );
+};
diff --git a/src/components/NButtonGroup.tsx b/src/components/NButtonGroup.tsx
index e5858a9..83b595f 100644
--- a/src/components/NButtonGroup.tsx
+++ b/src/components/NButtonGroup.tsx
@@ -5,7 +5,7 @@ import { cn } from '@/lib/utils';
 
 interface Props {
   className?: string;
-  label: string;
+  label?: string;
   size?: 'sm' | 'default' | 'lg' | any;
   items: string[];
   value: string;
@@ -14,7 +14,7 @@ interface Props {
 }
 
 export const NButtonGroup = (props: Props) => {
-  const { className = '', items, value, size = 'default', label, disabled = false, onChange } = props;
+  const { className = '', items, value, size = 'default', label = '', disabled = false, onChange } = props;
   return (
     <View className="w-full flex flex-row justify-between items-center mb-3">
       {label && <NText className="mb-1">{label}</NText>}
diff --git a/src/components/NConfirm.tsx b/src/components/NConfirm.tsx
index fb38b85..707816a 100644
--- a/src/components/NConfirm.tsx
+++ b/src/components/NConfirm.tsx
@@ -10,8 +10,14 @@ import {
   AlertDialogTrigger
 } from '@/components/ui/alert-dialog';
 import { NText } from '@/components/NText';
+import { cn } from 'react-native-nayan';
 
 interface Props {
+  className?: string;
+  titleClassName?: string;
+  descriptionClassName?: string;
+  confirmClassName?: string;
+  cancelClassName?: string;
   title: string;
   description: string;
   onResult: (result: boolean) => void;
@@ -19,21 +25,21 @@ interface Props {
 }
 
 export const NConfirm = (props: Props) => {
-  const { title, description, children, onResult } = props;
+  const { title, description, children, onResult, className='', titleClassName = '', descriptionClassName = '', confirmClassName = '', cancelClassName = '' } = props;
   return (
     <AlertDialog>
       <AlertDialogTrigger asChild>{children}</AlertDialogTrigger>
-      <AlertDialogContent className="bg-card p-3 min-w-[320px]">
+      <AlertDialogContent className={cn("bg-card p-3 min-w-[320px]", className)}>
         <AlertDialogHeader>
-          <AlertDialogTitle className="text-text">{title}</AlertDialogTitle>
-          <AlertDialogDescription className="text-text">{description}</AlertDialogDescription>
+          <AlertDialogTitle className={cn("text-text", titleClassName)}>{title}</AlertDialogTitle>
+          <AlertDialogDescription className={cn("text-text", descriptionClassName)}>{description}</AlertDialogDescription>
         </AlertDialogHeader>
         <AlertDialogFooter className="flex-row">
           <AlertDialogAction onPress={() => onResult(true)}>
-            <NText className="text-white">Continue</NText>
+            <NText className={cn("text-white", confirmClassName)}>Continue</NText>
           </AlertDialogAction>
           <AlertDialogCancel className="border-muted bg-border" onPress={() => onResult(false)}>
-            <NText>Cancel</NText>
+            <NText className={cn("text-text", cancelClassName)}>Cancel</NText>
           </AlertDialogCancel>
         </AlertDialogFooter>
       </AlertDialogContent>
diff --git a/src/components/NMenu.tsx b/src/components/NMenu.tsx
new file mode 100644
index 0000000..01a9132
--- /dev/null
+++ b/src/components/NMenu.tsx
@@ -0,0 +1,35 @@
+import { type ReactNode } from 'react';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { DropdownMenu, DropdownMenuContent, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger } from '@/components/ui/dropdown-menu';
+
+interface Props {
+  children?: ReactNode;
+  trigger: ReactNode;
+  icon?: any;
+  title?: string
+}
+
+export const NMenu = (props: Props) => {
+  const { children, trigger, title = '' } = props;
+  const insets = useSafeAreaInsets();
+  const contentInsets = {
+    top: insets.top,
+    bottom: insets.bottom,
+    left: 12,
+    right: 12
+  };
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger>{trigger}</DropdownMenuTrigger>
+      <DropdownMenuContent insets={contentInsets} className='w-64 native:w-64 bg-card'>
+        {title && (
+          <>
+            <DropdownMenuLabel className="text-text">{title}</DropdownMenuLabel>
+            <DropdownMenuSeparator/>
+          </>
+        )}
+        {children}
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+};
diff --git a/src/components/NMenuItem.tsx b/src/components/NMenuItem.tsx
index 5a55b7a..70dd10f 100644
--- a/src/components/NMenuItem.tsx
+++ b/src/components/NMenuItem.tsx
@@ -1,27 +1,25 @@
-import { View } from 'react-native';
-import { NPress } from '@/components/NPress';
-import { NText } from '@/components/NText';
-import { cn } from '@/lib/utils';
+import { DropdownMenuItem, DropdownMenuSeparator, DropdownMenuShortcut } from '@/components/ui/dropdown-menu';
+import { NText } from './NText';
 
 interface Props {
-  name: string;
-  description?: string;
-  className?: string;
-  icon: any;
-  onPress: () => void;
+    title: string;
+    shortcut?: string;
+    icon?: any;
+    hasSeparator?: boolean;
 }
 
 export const NMenuItem = (props: Props) => {
-  const { name, description, className = '', icon, onPress } = props;
-  const Icon = icon;
+  const { title, shortcut = '', hasSeparator = false, icon = null } = props;
+  const Icon = () => icon;
 
   return (
-    <NPress className={cn(`flex flex-row justify-start items-center px-3 py-2 bg-card ${className}`)} onPress={onPress}>
-      {icon && <Icon />}
-      <View className="pl-3">
-        <NText className="font-medium mb-0.5">{name}</NText>
-        {description && <NText className="text-sm text-muted mt-0">{description}</NText>}
-      </View>
-    </NPress>
-  );
+    <>
+      <DropdownMenuItem>
+        {icon && <Icon />}
+        <NText>{title}</NText>
+        {shortcut && <DropdownMenuShortcut className="text-muted">{shortcut}</DropdownMenuShortcut>}
+      </DropdownMenuItem>
+      {hasSeparator && <DropdownMenuSeparator/>}
+    </>
+  )
 };
diff --git a/src/components/NTheme.tsx b/src/components/NTheme.tsx
index e0199a1..63a0b13 100644
--- a/src/components/NTheme.tsx
+++ b/src/components/NTheme.tsx
@@ -10,6 +10,7 @@ import { PortalHost } from '@rn-primitives/portal';
 import { NToast } from './NToast';
 import { THEMES } from '@/lib/utils';
 import { setAndroidNavigationBar } from '@/lib/android-navigation-bar';
+import { SafeAreaProvider } from 'react-native-safe-area-context';
 
 interface Props {
   children: React.ReactNode;
@@ -55,9 +56,11 @@ export const NTheme = (props: Props) => {
       <View className="flex-1" style={themeVars[colorScheme as any]}>
         <StatusBar style={isDarkColorScheme ? THEMES.light : THEMES.dark} />
         <GestureHandlerRootView className="flex-1">
-          <BottomSheetModalProvider>{props.children}</BottomSheetModalProvider>
-          <PortalHost />
-          <NToast />
+          <SafeAreaProvider>
+            <BottomSheetModalProvider>{props.children}</BottomSheetModalProvider>
+            <PortalHost />
+            <NToast />
+          </SafeAreaProvider>
         </GestureHandlerRootView>
       </View>
     </ThemeProvider>
diff --git a/src/components/ui/accordion.tsx b/src/components/ui/accordion.tsx
index ee4a2ad..1b4782b 100644
--- a/src/components/ui/accordion.tsx
+++ b/src/components/ui/accordion.tsx
@@ -60,7 +60,7 @@ const AccordionTrigger = React.forwardRef<AccordionPrimitive.TriggerRef, Accordi
               )}>
               <>{children}</>
               <Animated.View style={chevronStyle}>
-                <ChevronDown size={18} className={'text-foreground shrink-0'} />
+                <ChevronDown size={18} className={'text-muted shrink-0'} />
               </Animated.View>
             </Trigger>
           </AccordionPrimitive.Trigger>
diff --git a/src/components/ui/dropdown-menu.tsx b/src/components/ui/dropdown-menu.tsx
new file mode 100644
index 0000000..e9d98a6
--- /dev/null
+++ b/src/components/ui/dropdown-menu.tsx
@@ -0,0 +1,253 @@
+import * as DropdownMenuPrimitive from '@rn-primitives/dropdown-menu';
+import * as React from 'react';
+import {
+  Platform,
+  type StyleProp,
+  StyleSheet,
+  Text,
+  type TextProps,
+  View,
+  type ViewStyle,
+} from 'react-native';
+import { Check } from '@/lib/icons/Check';
+import { ChevronDown } from '@/lib/icons/ChevronDown';
+import { ChevronRight } from '@/lib/icons/ChevronRight';
+import { ChevronUp } from '@/lib/icons/ChevronUp';
+import { cn } from '@/lib/utils';
+import { TextClassContext } from '@/components/ui/text';
+
+const DropdownMenu = DropdownMenuPrimitive.Root;
+
+const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;
+
+const DropdownMenuGroup = DropdownMenuPrimitive.Group;
+
+const DropdownMenuPortal = DropdownMenuPrimitive.Portal;
+
+const DropdownMenuSub = DropdownMenuPrimitive.Sub;
+
+const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup;
+
+const DropdownMenuSubTrigger = React.forwardRef<
+  DropdownMenuPrimitive.SubTriggerRef,
+  DropdownMenuPrimitive.SubTriggerProps & {
+    inset?: boolean;
+  }
+>(({ className, inset, children, ...props }, ref) => {
+  const { open } = DropdownMenuPrimitive.useSubContext();
+  const Icon = Platform.OS === 'web' ? ChevronRight : open ? ChevronUp : ChevronDown;
+  return (
+    <TextClassContext.Provider
+      value={cn(
+        'select-none text-sm native:text-lg text-primary',
+        open && 'native:text-accent-foreground'
+      )}
+    >
+      <DropdownMenuPrimitive.SubTrigger
+        ref={ref}
+        className={cn(
+          'flex flex-row web:cursor-default web:select-none gap-2 items-center web:focus:bg-accent web:hover:bg-accent active:bg-accent rounded-sm px-2 py-1.5 native:py-2 web:outline-none',
+          open && 'bg-accent',
+          inset && 'pl-8',
+          className
+        )}
+        {...props}
+      >
+        <>{children}</>
+        <Icon size={18} className='ml-auto text-foreground' />
+      </DropdownMenuPrimitive.SubTrigger>
+    </TextClassContext.Provider>
+  );
+});
+DropdownMenuSubTrigger.displayName = DropdownMenuPrimitive.SubTrigger.displayName;
+
+const DropdownMenuSubContent = React.forwardRef<
+  DropdownMenuPrimitive.SubContentRef,
+  DropdownMenuPrimitive.SubContentProps
+>(({ className, ...props }, ref) => {
+  const { open } = DropdownMenuPrimitive.useSubContext();
+  return (
+    <DropdownMenuPrimitive.SubContent
+      ref={ref}
+      className={cn(
+        'z-50 min-w-[8rem] overflow-hidden rounded-md border border-border mt-1 bg-popover p-1 shadow-md shadow-foreground/5 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+        open
+          ? 'web:animate-in web:fade-in-0 web:zoom-in-95'
+          : 'web:animate-out web:fade-out-0 web:zoom-out',
+        className
+      )}
+      {...props}
+    />
+  );
+});
+DropdownMenuSubContent.displayName = DropdownMenuPrimitive.SubContent.displayName;
+
+const DropdownMenuContent = React.forwardRef<
+  DropdownMenuPrimitive.ContentRef,
+  DropdownMenuPrimitive.ContentProps & {
+    overlayStyle?: StyleProp<ViewStyle>;
+    overlayClassName?: string;
+    portalHost?: string;
+  }
+>(({ className, overlayClassName, overlayStyle, portalHost, ...props }, ref) => {
+  const { open } = DropdownMenuPrimitive.useRootContext();
+  return (
+    <DropdownMenuPrimitive.Portal hostName={portalHost}>
+      <DropdownMenuPrimitive.Overlay
+        style={
+          overlayStyle
+            ? StyleSheet.flatten([
+                Platform.OS !== 'web' ? StyleSheet.absoluteFill : undefined,
+                overlayStyle,
+              ])
+            : Platform.OS !== 'web'
+            ? StyleSheet.absoluteFill
+            : undefined
+        }
+        className={overlayClassName}
+      >
+        <DropdownMenuPrimitive.Content
+          ref={ref}
+          className={cn(
+            'z-50 min-w-[8rem] overflow-hidden rounded-md border border-border bg-popover p-1 shadow-md shadow-foreground/5 web:data-[side=bottom]:slide-in-from-top-2 web:data-[side=left]:slide-in-from-right-2 web:data-[side=right]:slide-in-from-left-2 web:data-[side=top]:slide-in-from-bottom-2',
+            open
+              ? 'web:animate-in web:fade-in-0 web:zoom-in-95'
+              : 'web:animate-out web:fade-out-0 web:zoom-out-95',
+            className
+          )}
+          {...props}
+        />
+      </DropdownMenuPrimitive.Overlay>
+    </DropdownMenuPrimitive.Portal>
+  );
+});
+DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName;
+
+const DropdownMenuItem = React.forwardRef<
+  DropdownMenuPrimitive.ItemRef,
+  DropdownMenuPrimitive.ItemProps & {
+    inset?: boolean;
+  }
+>(({ className, inset, ...props }, ref) => (
+  <TextClassContext.Provider value='select-none text-sm native:text-lg text-popover-foreground web:group-focus:text-accent-foreground'>
+    <DropdownMenuPrimitive.Item
+      ref={ref}
+      className={cn(
+        'relative flex flex-row web:cursor-default gap-2 items-center rounded-sm px-2 py-1.5 native:py-2 web:outline-none web:focus:bg-accent active:bg-accent web:hover:bg-accent group',
+        inset && 'pl-8',
+        props.disabled && 'opacity-50 web:pointer-events-none',
+        className
+      )}
+      {...props}
+    />
+  </TextClassContext.Provider>
+));
+DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName;
+
+const DropdownMenuCheckboxItem = React.forwardRef<
+  DropdownMenuPrimitive.CheckboxItemRef,
+  DropdownMenuPrimitive.CheckboxItemProps
+>(({ className, children, checked, ...props }, ref) => (
+  <DropdownMenuPrimitive.CheckboxItem
+    ref={ref}
+    className={cn(
+      'relative flex flex-row web:cursor-default items-center web:group rounded-sm py-1.5 native:py-2 pl-8 pr-2 web:outline-none web:focus:bg-accent active:bg-accent',
+      props.disabled && 'web:pointer-events-none opacity-50',
+      className
+    )}
+    checked={checked}
+    {...props}
+  >
+    <View className='absolute left-2 flex h-3.5 w-3.5 items-center justify-center'>
+      <DropdownMenuPrimitive.ItemIndicator>
+        <Check size={14} strokeWidth={3} className='text-foreground' />
+      </DropdownMenuPrimitive.ItemIndicator>
+    </View>
+    <>{children}</>
+  </DropdownMenuPrimitive.CheckboxItem>
+));
+DropdownMenuCheckboxItem.displayName = DropdownMenuPrimitive.CheckboxItem.displayName;
+
+const DropdownMenuRadioItem = React.forwardRef<
+  DropdownMenuPrimitive.RadioItemRef,
+  DropdownMenuPrimitive.RadioItemProps
+>(({ className, children, ...props }, ref) => (
+  <DropdownMenuPrimitive.RadioItem
+    ref={ref}
+    className={cn(
+      'relative flex flex-row web:cursor-default web:group items-center rounded-sm py-1.5 native:py-2 pl-8 pr-2 web:outline-none web:focus:bg-accent active:bg-accent',
+      props.disabled && 'web:pointer-events-none opacity-50',
+      className
+    )}
+    {...props}
+  >
+    <View className='absolute left-2 flex h-3.5 w-3.5 items-center justify-center'>
+      <DropdownMenuPrimitive.ItemIndicator>
+        <View className='bg-foreground h-2 w-2 rounded-full' />
+      </DropdownMenuPrimitive.ItemIndicator>
+    </View>
+    <>{children}</>
+  </DropdownMenuPrimitive.RadioItem>
+));
+DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName;
+
+const DropdownMenuLabel = React.forwardRef<
+  DropdownMenuPrimitive.LabelRef,
+  DropdownMenuPrimitive.LabelProps & {
+    inset?: boolean;
+  }
+>(({ className, inset, ...props }, ref) => (
+  <DropdownMenuPrimitive.Label
+    ref={ref}
+    className={cn(
+      'px-2 py-1.5 text-sm native:text-base font-semibold text-foreground web:cursor-default',
+      inset && 'pl-8',
+      className
+    )}
+    {...props}
+  />
+));
+DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName;
+
+const DropdownMenuSeparator = React.forwardRef<
+  DropdownMenuPrimitive.SeparatorRef,
+  DropdownMenuPrimitive.SeparatorProps
+>(({ className, ...props }, ref) => (
+  <DropdownMenuPrimitive.Separator
+    ref={ref}
+    className={cn('-mx-1 my-1 h-px bg-border', className)}
+    {...props}
+  />
+));
+DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName;
+
+const DropdownMenuShortcut = ({ className, ...props }: TextProps) => {
+  return (
+    <Text
+      className={cn(
+        'ml-auto text-xs native:text-sm tracking-widest text-muted-foreground',
+        className
+      )}
+      {...props}
+    />
+  );
+};
+DropdownMenuShortcut.displayName = 'DropdownMenuShortcut';
+
+export {
+  DropdownMenu,
+  DropdownMenuCheckboxItem,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuPortal,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+  DropdownMenuTrigger,
+};
diff --git a/src/index.tsx b/src/index.tsx
index 482fc29..0e9d939 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -1,5 +1,6 @@
 // Components
 export * from './components/NAccordion';
+export * from './components/NActionItem';
 export * from './components/NAlert';
 export * from './components/NButton';
 export * from './components/NButtonGroup';
@@ -13,6 +14,7 @@ export * from './components/NDivider';
 export * from './components/NInput';
 export * from './components/NLinkify';
 export * from './components/NLoading';
+export * from './components/NMenu';
 export * from './components/NMenuItem';
 export * from './components/NPopover';
 export * from './components/NPress';
diff --git a/src/lib/android-navigation-bar.ts b/src/lib/android-navigation-bar.ts
index 3d270d4..a93e698 100644
--- a/src/lib/android-navigation-bar.ts
+++ b/src/lib/android-navigation-bar.ts
@@ -5,5 +5,5 @@ import { THEMES } from './utils';
 export async function setAndroidNavigationBar(theme: string, themeColors: any) {
   if (Platform.OS !== 'android') return;
   await NavigationBar.setButtonStyleAsync(theme === THEMES.dark ? THEMES.light : THEMES.dark);
-  await NavigationBar.setBackgroundColorAsync(theme === THEMES.dark ? themeColors.dark.colors.background : themeColors.light.colors.background);
+  await NavigationBar.setBackgroundColorAsync(theme === THEMES.dark ? themeColors.dark.colors.card : themeColors.light.colors.card);
 }
diff --git a/src/lib/icons/ChevronRight.tsx b/src/lib/icons/ChevronRight.tsx
new file mode 100644
index 0000000..0549a41
--- /dev/null
+++ b/src/lib/icons/ChevronRight.tsx
@@ -0,0 +1,4 @@
+import { ChevronRight } from 'lucide-react-native';
+import { iconWithClassName } from './iconWithClassName';
+iconWithClassName(ChevronRight);
+export { ChevronRight };
\ No newline at end of file
diff --git a/yarn.lock b/yarn.lock
index bf7c0a7..baa3d98 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1574,6 +1574,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/runtime@npm:^7.12.5, @babel/runtime@npm:^7.13.10":
+  version: 7.27.0
+  resolution: "@babel/runtime@npm:7.27.0"
+  dependencies:
+    regenerator-runtime: ^0.14.0
+  checksum: 3e73d9e65f76fad8f99802b5364c941f4a60c693b3eca66147bb0bfa54cf0fbe017232155e16e3fd83c0a049b51b8d7239efbd73626534abe8b54a6dd57dcb1b
+  languageName: node
+  linkType: hard
+
 "@babel/runtime@npm:^7.18.6, @babel/runtime@npm:^7.20.0, @babel/runtime@npm:^7.25.0, @babel/runtime@npm:^7.8.4":
   version: 7.26.9
   resolution: "@babel/runtime@npm:7.26.9"
@@ -2034,6 +2043,28 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@expo/config-plugins@npm:~9.0.17":
+  version: 9.0.17
+  resolution: "@expo/config-plugins@npm:9.0.17"
+  dependencies:
+    "@expo/config-types": ^52.0.5
+    "@expo/json-file": ~9.0.2
+    "@expo/plist": ^0.2.2
+    "@expo/sdk-runtime-versions": ^1.0.0
+    chalk: ^4.1.2
+    debug: ^4.3.5
+    getenv: ^1.0.0
+    glob: ^10.4.2
+    resolve-from: ^5.0.0
+    semver: ^7.5.4
+    slash: ^3.0.0
+    slugify: ^1.6.6
+    xcode: ^3.0.1
+    xml2js: 0.6.0
+  checksum: 5f415a3f4b399024d904d5c6e7b807d52f0efb6eddd217e458fa7d26d04b882f45462aa525ee8e49d404aecfc508e2a829ebd168f9a3b949a215a33699b0b92f
+  languageName: node
+  linkType: hard
+
 "@expo/config-types@npm:^52.0.4, @expo/config-types@npm:^52.0.5":
   version: 52.0.5
   resolution: "@expo/config-types@npm:52.0.5"
@@ -2062,6 +2093,27 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@expo/config@npm:~10.0.11":
+  version: 10.0.11
+  resolution: "@expo/config@npm:10.0.11"
+  dependencies:
+    "@babel/code-frame": ~7.10.4
+    "@expo/config-plugins": ~9.0.17
+    "@expo/config-types": ^52.0.5
+    "@expo/json-file": ^9.0.2
+    deepmerge: ^4.3.1
+    getenv: ^1.0.0
+    glob: ^10.4.2
+    require-from-string: ^2.0.2
+    resolve-from: ^5.0.0
+    resolve-workspace-root: ^2.0.0
+    semver: ^7.6.0
+    slugify: ^1.3.4
+    sucrase: 3.35.0
+  checksum: 28f147b84e49d35306769e620f8e19da12f245e8fd08cf8279512f84eaccfdc3ab69f6ce9ea8e603ae3d0e9d994045336eff450f43b89f0b92f63e4914c47f3a
+  languageName: node
+  linkType: hard
+
 "@expo/devcert@npm:^1.1.2":
   version: 1.1.4
   resolution: "@expo/devcert@npm:1.1.4"
@@ -2170,7 +2222,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@expo/metro-runtime@npm:~4.0.1":
+"@expo/metro-runtime@npm:4.0.1, @expo/metro-runtime@npm:~4.0.1":
   version: 4.0.1
   resolution: "@expo/metro-runtime@npm:4.0.1"
   peerDependencies:
@@ -2261,6 +2313,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@expo/server@npm:^0.5.3":
+  version: 0.5.3
+  resolution: "@expo/server@npm:0.5.3"
+  dependencies:
+    abort-controller: ^3.0.0
+    debug: ^4.3.4
+    source-map-support: ~0.5.21
+    undici: ^6.18.2
+  checksum: 9f16b7c4eb9085d103b5f0da01db5dd9f4c47757760b97b0e7c376432c092ba414a02367d2b2933cb2cfb648fdfe6c95572a6887e967b1184c25f5badfb1a5bc
+  languageName: node
+  linkType: hard
+
 "@expo/spawn-async@npm:^1.7.2":
   version: 1.7.2
   resolution: "@expo/spawn-async@npm:1.7.2"
@@ -2270,7 +2334,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@expo/vector-icons@npm:^14.0.0":
+"@expo/vector-icons@npm:^14.0.0, @expo/vector-icons@npm:^14.0.4":
   version: 14.0.4
   resolution: "@expo/vector-icons@npm:14.0.4"
   dependencies:
@@ -3160,6 +3224,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@radix-ui/react-compose-refs@npm:1.0.0":
+  version: 1.0.0
+  resolution: "@radix-ui/react-compose-refs@npm:1.0.0"
+  dependencies:
+    "@babel/runtime": ^7.13.10
+  peerDependencies:
+    react: ^16.8 || ^17.0 || ^18.0
+  checksum: fb98be2e275a1a758ccac647780ff5b04be8dcf25dcea1592db3b691fecf719c4c0700126da605b2f512dd89caa111352b9fad59528d736b4e0e9a0e134a74a1
+  languageName: node
+  linkType: hard
+
 "@radix-ui/react-compose-refs@npm:1.1.1":
   version: 1.1.1
   resolution: "@radix-ui/react-compose-refs@npm:1.1.1"
@@ -3254,6 +3329,31 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@radix-ui/react-dropdown-menu@npm:^2.1.1":
+  version: 2.1.6
+  resolution: "@radix-ui/react-dropdown-menu@npm:2.1.6"
+  dependencies:
+    "@radix-ui/primitive": 1.1.1
+    "@radix-ui/react-compose-refs": 1.1.1
+    "@radix-ui/react-context": 1.1.1
+    "@radix-ui/react-id": 1.1.0
+    "@radix-ui/react-menu": 2.1.6
+    "@radix-ui/react-primitive": 2.0.2
+    "@radix-ui/react-use-controllable-state": 1.1.0
+  peerDependencies:
+    "@types/react": "*"
+    "@types/react-dom": "*"
+    react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+    "@types/react-dom":
+      optional: true
+  checksum: 6e45e3fcf22191f2327c24cdd4cc9d389aea9af8b736e251f97c615c39e040617ab3ed93d16552bc899c1f5bba56f266e2926f4183843950a879fecd6b4834ab
+  languageName: node
+  linkType: hard
+
 "@radix-ui/react-focus-guards@npm:1.1.1":
   version: 1.1.1
   resolution: "@radix-ui/react-focus-guards@npm:1.1.1"
@@ -3322,6 +3422,42 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@radix-ui/react-menu@npm:2.1.6":
+  version: 2.1.6
+  resolution: "@radix-ui/react-menu@npm:2.1.6"
+  dependencies:
+    "@radix-ui/primitive": 1.1.1
+    "@radix-ui/react-collection": 1.1.2
+    "@radix-ui/react-compose-refs": 1.1.1
+    "@radix-ui/react-context": 1.1.1
+    "@radix-ui/react-direction": 1.1.0
+    "@radix-ui/react-dismissable-layer": 1.1.5
+    "@radix-ui/react-focus-guards": 1.1.1
+    "@radix-ui/react-focus-scope": 1.1.2
+    "@radix-ui/react-id": 1.1.0
+    "@radix-ui/react-popper": 1.2.2
+    "@radix-ui/react-portal": 1.1.4
+    "@radix-ui/react-presence": 1.1.2
+    "@radix-ui/react-primitive": 2.0.2
+    "@radix-ui/react-roving-focus": 1.1.2
+    "@radix-ui/react-slot": 1.1.2
+    "@radix-ui/react-use-callback-ref": 1.1.0
+    aria-hidden: ^1.2.4
+    react-remove-scroll: ^2.6.3
+  peerDependencies:
+    "@types/react": "*"
+    "@types/react-dom": "*"
+    react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+    "@types/react-dom":
+      optional: true
+  checksum: 87065d4416acbfb53cf86e5783196eac9a3d4b5759da6f1af537cdfb1ce39d667fe018a4bff0322f356790ffa47a7ec67575b182a20577c05dcd4e1e6aea33ac
+  languageName: node
+  linkType: hard
+
 "@radix-ui/react-popover@npm:^1.1.1":
   version: 1.1.6
   resolution: "@radix-ui/react-popover@npm:1.1.6"
@@ -3575,6 +3711,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@radix-ui/react-slot@npm:1.0.1":
+  version: 1.0.1
+  resolution: "@radix-ui/react-slot@npm:1.0.1"
+  dependencies:
+    "@babel/runtime": ^7.13.10
+    "@radix-ui/react-compose-refs": 1.0.0
+  peerDependencies:
+    react: ^16.8 || ^17.0 || ^18.0
+  checksum: a20693f8ce532bd6cbff12ba543dfcf90d451f22923bd60b57dc9e639f6e53348915e182002b33444feb6ab753434e78e2a54085bf7092aadda4418f0423763f
+  languageName: node
+  linkType: hard
+
 "@radix-ui/react-slot@npm:1.1.2":
   version: 1.1.2
   resolution: "@radix-ui/react-slot@npm:1.1.2"
@@ -4019,6 +4167,22 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@react-navigation/bottom-tabs@npm:^7.2.0":
+  version: 7.3.3
+  resolution: "@react-navigation/bottom-tabs@npm:7.3.3"
+  dependencies:
+    "@react-navigation/elements": ^2.3.1
+    color: ^4.2.3
+  peerDependencies:
+    "@react-navigation/native": ^7.0.19
+    react: ">= 18.2.0"
+    react-native: "*"
+    react-native-safe-area-context: ">= 4.0.0"
+    react-native-screens: ">= 4.0.0"
+  checksum: f88018dd07a63494b788dc6666b48b1f4cd4203056a7daade588b05f8f78b3e179264db2809610220c271c5e00251bd59b19ecfe50a18621992cf2cf1f6ce147
+  languageName: node
+  linkType: hard
+
 "@react-navigation/core@npm:^6.4.17":
   version: 6.4.17
   resolution: "@react-navigation/core@npm:6.4.17"
@@ -4035,6 +4199,57 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@react-navigation/core@npm:^7.7.0":
+  version: 7.7.0
+  resolution: "@react-navigation/core@npm:7.7.0"
+  dependencies:
+    "@react-navigation/routers": ^7.3.1
+    escape-string-regexp: ^4.0.0
+    nanoid: 3.3.8
+    query-string: ^7.1.3
+    react-is: ^18.2.0
+    use-latest-callback: ^0.2.1
+    use-sync-external-store: ^1.2.2
+  peerDependencies:
+    react: ">= 18.2.0"
+  checksum: 80d52a6b780480002d805d914e5f5dc72b12aed3eacb40ad24e20820724bedb191dfc852224e8282ebf3cae99b6b15902d5d3219c2a17bf8df812a95709243a5
+  languageName: node
+  linkType: hard
+
+"@react-navigation/elements@npm:^2.3.1":
+  version: 2.3.1
+  resolution: "@react-navigation/elements@npm:2.3.1"
+  dependencies:
+    color: ^4.2.3
+  peerDependencies:
+    "@react-native-masked-view/masked-view": ">= 0.2.0"
+    "@react-navigation/native": ^7.0.19
+    react: ">= 18.2.0"
+    react-native: "*"
+    react-native-safe-area-context: ">= 4.0.0"
+  peerDependenciesMeta:
+    "@react-native-masked-view/masked-view":
+      optional: true
+  checksum: 8fc410788f44e0e38af5b30020583dc1edb3d435c45425468604e904f939cf0ecbb48d8575a5c9fa0cfa53263bb0e0882cdce2ccce42e737d52202743b621f60
+  languageName: node
+  linkType: hard
+
+"@react-navigation/native-stack@npm:^7.2.0":
+  version: 7.3.3
+  resolution: "@react-navigation/native-stack@npm:7.3.3"
+  dependencies:
+    "@react-navigation/elements": ^2.3.1
+    warn-once: ^0.1.1
+  peerDependencies:
+    "@react-navigation/native": ^7.0.19
+    react: ">= 18.2.0"
+    react-native: "*"
+    react-native-safe-area-context: ">= 4.0.0"
+    react-native-screens: ">= 4.0.0"
+  checksum: 35d20920a70b556d17f611def4fa37fcbb9be94a4e877892df3331619f6dce7594cb5de4f7e35e6f21733749ad773354c0ca842eff743702f647413b23c9377b
+  languageName: node
+  linkType: hard
+
 "@react-navigation/native@npm:^6.1.18":
   version: 6.1.18
   resolution: "@react-navigation/native@npm:6.1.18"
@@ -4050,6 +4265,22 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@react-navigation/native@npm:^7.0.14":
+  version: 7.0.19
+  resolution: "@react-navigation/native@npm:7.0.19"
+  dependencies:
+    "@react-navigation/core": ^7.7.0
+    escape-string-regexp: ^4.0.0
+    fast-deep-equal: ^3.1.3
+    nanoid: 3.3.8
+    use-latest-callback: ^0.2.1
+  peerDependencies:
+    react: ">= 18.2.0"
+    react-native: "*"
+  checksum: 77680a18001670799ec1e9f677d563f0c6dac82cb09e683d61755ee41c6f7ce9ef823df7afe359c9293d1c90f89e2057c6198a20b5d29b1b0af4786e565569bf
+  languageName: node
+  linkType: hard
+
 "@react-navigation/routers@npm:^6.1.9":
   version: 6.1.9
   resolution: "@react-navigation/routers@npm:6.1.9"
@@ -4059,6 +4290,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@react-navigation/routers@npm:^7.3.1":
+  version: 7.3.1
+  resolution: "@react-navigation/routers@npm:7.3.1"
+  dependencies:
+    nanoid: 3.3.8
+  checksum: e5b6c52ff1a0dbc3cfbfd18f663d9fcb342537eaccfdff3e078b10bdd40eb51b40aaaf0d27d8fa3f88a6a5459aff92ac38f140d1c4bee366c2aea00149432712
+  languageName: node
+  linkType: hard
+
 "@release-it/conventional-changelog@npm:^9.0.2":
   version: 9.0.4
   resolution: "@release-it/conventional-changelog@npm:9.0.4"
@@ -4160,6 +4400,29 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@rn-primitives/dropdown-menu@npm:^1.1.0":
+  version: 1.1.0
+  resolution: "@rn-primitives/dropdown-menu@npm:1.1.0"
+  dependencies:
+    "@radix-ui/react-dropdown-menu": ^2.1.1
+    "@rn-primitives/hooks": 1.1.0
+    "@rn-primitives/slot": 1.1.0
+    "@rn-primitives/types": 1.1.0
+    "@rn-primitives/utils": 1.1.0
+  peerDependencies:
+    "@rn-primitives/portal": "*"
+    react: "*"
+    react-native: "*"
+    react-native-web: "*"
+  peerDependenciesMeta:
+    react-native:
+      optional: true
+    react-native-web:
+      optional: true
+  checksum: f0a3d35b6cd3f46ff8d7044c10909f57fe3fe1e779491f43b858bd3cd45f37b4179dfa99b9f8ae321d956ba891e200b8d3baaaf7de570fb890477bf7c6fae497
+  languageName: node
+  linkType: hard
+
 "@rn-primitives/hooks@npm:1.1.0":
   version: 1.1.0
   resolution: "@rn-primitives/hooks@npm:1.1.0"
@@ -4394,6 +4657,22 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@rn-primitives/utils@npm:1.1.0":
+  version: 1.1.0
+  resolution: "@rn-primitives/utils@npm:1.1.0"
+  peerDependencies:
+    react: "*"
+    react-native: "*"
+    react-native-web: "*"
+  peerDependenciesMeta:
+    react-native:
+      optional: true
+    react-native-web:
+      optional: true
+  checksum: f6dba94cc5477c490acbaa2d350449fbd1218440395c1ed31bd17498dcf57fe64bfd5c9d0b60bcdfcf5ce1d0b395cf02058fcbcad2b1be8c0c0c8c8743b4b031
+  languageName: node
+  linkType: hard
+
 "@segment/loosely-validate-event@npm:^2.0.0":
   version: 2.0.0
   resolution: "@segment/loosely-validate-event@npm:2.0.0"
@@ -4919,6 +5198,31 @@ __metadata:
   languageName: node
   linkType: hard
 
+"ajv-formats@npm:^2.1.1":
+  version: 2.1.1
+  resolution: "ajv-formats@npm:2.1.1"
+  dependencies:
+    ajv: ^8.0.0
+  peerDependencies:
+    ajv: ^8.0.0
+  peerDependenciesMeta:
+    ajv:
+      optional: true
+  checksum: 4a287d937f1ebaad4683249a4c40c0fa3beed30d9ddc0adba04859026a622da0d317851316ea64b3680dc60f5c3c708105ddd5d5db8fe595d9d0207fd19f90b7
+  languageName: node
+  linkType: hard
+
+"ajv-keywords@npm:^5.1.0":
+  version: 5.1.0
+  resolution: "ajv-keywords@npm:5.1.0"
+  dependencies:
+    fast-deep-equal: ^3.1.3
+  peerDependencies:
+    ajv: ^8.8.2
+  checksum: c35193940b853119242c6757787f09ecf89a2c19bcd36d03ed1a615e710d19d450cb448bfda407b939aba54b002368c8bff30529cc50a0536a8e10bcce300421
+  languageName: node
+  linkType: hard
+
 "ajv@npm:^6.12.4":
   version: 6.12.6
   resolution: "ajv@npm:6.12.6"
@@ -4931,7 +5235,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"ajv@npm:^8.11.0":
+"ajv@npm:^8.0.0, ajv@npm:^8.11.0, ajv@npm:^8.9.0":
   version: 8.17.1
   resolution: "ajv@npm:8.17.1"
   dependencies:
@@ -6084,6 +6388,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"client-only@npm:^0.0.1":
+  version: 0.0.1
+  resolution: "client-only@npm:0.0.1"
+  checksum: 0c16bf660dadb90610553c1d8946a7fdfb81d624adea073b8440b7d795d5b5b08beb3c950c6a2cf16279365a3265158a236876d92bce16423c485c322d7dfaf8
+  languageName: node
+  linkType: hard
+
 "cliui@npm:^8.0.1":
   version: 8.0.1
   resolution: "cliui@npm:8.0.1"
@@ -6159,13 +6470,33 @@ __metadata:
   languageName: node
   linkType: hard
 
-"color-name@npm:~1.1.4":
+"color-name@npm:^1.0.0, color-name@npm:~1.1.4":
   version: 1.1.4
   resolution: "color-name@npm:1.1.4"
   checksum: b0445859521eb4021cd0fb0cc1a75cecf67fceecae89b63f62b201cca8d345baf8b952c966862a9d9a2632987d4f6581f0ec8d957dfacece86f0a7919316f610
   languageName: node
   linkType: hard
 
+"color-string@npm:^1.9.0":
+  version: 1.9.1
+  resolution: "color-string@npm:1.9.1"
+  dependencies:
+    color-name: ^1.0.0
+    simple-swizzle: ^0.2.2
+  checksum: c13fe7cff7885f603f49105827d621ce87f4571d78ba28ef4a3f1a104304748f620615e6bf065ecd2145d0d9dad83a3553f52bb25ede7239d18e9f81622f1cc5
+  languageName: node
+  linkType: hard
+
+"color@npm:^4.2.3":
+  version: 4.2.3
+  resolution: "color@npm:4.2.3"
+  dependencies:
+    color-convert: ^2.0.1
+    color-string: ^1.9.0
+  checksum: 0579629c02c631b426780038da929cca8e8d80a40158b09811a0112a107c62e10e4aad719843b791b1e658ab4e800558f2e87ca4522c8b32349d497ecb6adeb4
+  languageName: node
+  linkType: hard
+
 "combined-stream@npm:^1.0.8":
   version: 1.0.8
   resolution: "combined-stream@npm:1.0.8"
@@ -7979,6 +8310,19 @@ __metadata:
   languageName: node
   linkType: hard
 
+"expo-constants@npm:^17.0.8, expo-constants@npm:~17.0.5":
+  version: 17.0.8
+  resolution: "expo-constants@npm:17.0.8"
+  dependencies:
+    "@expo/config": ~10.0.11
+    "@expo/env": ~0.4.2
+  peerDependencies:
+    expo: "*"
+    react-native: "*"
+  checksum: 493e18f8ea2c49efd69aae37b756ede1c37ecc29ac9bd5c23cb2ca88dbc57109c7f915196bcfaab71ceca2141e9a9806a685f8ac787fa206af7f1391be2e09f2
+  languageName: node
+  linkType: hard
+
 "expo-constants@npm:~17.0.7":
   version: 17.0.7
   resolution: "expo-constants@npm:17.0.7"
@@ -8026,6 +8370,19 @@ __metadata:
   languageName: node
   linkType: hard
 
+"expo-linking@npm:^7.0.5":
+  version: 7.0.5
+  resolution: "expo-linking@npm:7.0.5"
+  dependencies:
+    expo-constants: ~17.0.5
+    invariant: ^2.2.4
+  peerDependencies:
+    react: "*"
+    react-native: "*"
+  checksum: 014418cf6a8eabb8e659590d36c1cccc3e4d28833298c7bde99350e63352f8fdc813d56abdc7c5cf6d447e18cb7f0a129e39e143a1cd59f11f63acbf3899e541
+  languageName: node
+  linkType: hard
+
 "expo-modules-autolinking@npm:2.0.8":
   version: 2.0.8
   resolution: "expo-modules-autolinking@npm:2.0.8"
@@ -8067,6 +8424,42 @@ __metadata:
   languageName: node
   linkType: hard
 
+"expo-router@npm:^4.0.19":
+  version: 4.0.19
+  resolution: "expo-router@npm:4.0.19"
+  dependencies:
+    "@expo/metro-runtime": 4.0.1
+    "@expo/server": ^0.5.3
+    "@radix-ui/react-slot": 1.0.1
+    "@react-navigation/bottom-tabs": ^7.2.0
+    "@react-navigation/native": ^7.0.14
+    "@react-navigation/native-stack": ^7.2.0
+    client-only: ^0.0.1
+    react-helmet-async: ^1.3.0
+    react-native-helmet-async: 2.0.4
+    react-native-is-edge-to-edge: ^1.1.6
+    schema-utils: ^4.0.1
+    semver: ~7.6.3
+    server-only: ^0.0.1
+  peerDependencies:
+    "@react-navigation/drawer": ^7.1.1
+    expo: "*"
+    expo-constants: "*"
+    expo-linking: "*"
+    react-native-reanimated: "*"
+    react-native-safe-area-context: "*"
+    react-native-screens: "*"
+  peerDependenciesMeta:
+    "@react-navigation/drawer":
+      optional: true
+    "@testing-library/jest-native":
+      optional: true
+    react-native-reanimated:
+      optional: true
+  checksum: 07928af105520f20a4feeda229045c582acd1cadef0fa22fe7286bdb842b015b955407d2f35c8ad33138a7e2b855b8cd958b0c4183da66a246814563784c9582
+  languageName: node
+  linkType: hard
+
 "expo-status-bar@npm:^2.0.1":
   version: 2.0.1
   resolution: "expo-status-bar@npm:2.0.1"
@@ -9438,6 +9831,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"is-arrayish@npm:^0.3.1":
+  version: 0.3.2
+  resolution: "is-arrayish@npm:0.3.2"
+  checksum: 977e64f54d91c8f169b59afcd80ff19227e9f5c791fa28fa2e5bce355cbaf6c2c356711b734656e80c9dd4a854dd7efcf7894402f1031dfc5de5d620775b4d5f
+  languageName: node
+  linkType: hard
+
 "is-async-function@npm:^2.0.0":
   version: 2.1.1
   resolution: "is-async-function@npm:2.1.1"
@@ -12223,21 +12623,21 @@ __metadata:
   languageName: node
   linkType: hard
 
-"nanoid@npm:^3.1.23, nanoid@npm:^3.3.1":
-  version: 3.3.9
-  resolution: "nanoid@npm:3.3.9"
+"nanoid@npm:3.3.8, nanoid@npm:^3.3.7, nanoid@npm:^3.3.8":
+  version: 3.3.8
+  resolution: "nanoid@npm:3.3.8"
   bin:
     nanoid: bin/nanoid.cjs
-  checksum: 42b1dc3e05d6d4f846e65538dd6fbdf78419d8ef60c531f0faf3264cc90600041ebb53c4276013947e03dc3c9a1ac1fce5bb9e1c3a634db608e95349d7e9d3b6
+  checksum: dfe0adbc0c77e9655b550c333075f51bb28cfc7568afbf3237249904f9c86c9aaaed1f113f0fddddba75673ee31c758c30c43d4414f014a52a7a626efc5958c9
   languageName: node
   linkType: hard
 
-"nanoid@npm:^3.3.7, nanoid@npm:^3.3.8":
-  version: 3.3.8
-  resolution: "nanoid@npm:3.3.8"
+"nanoid@npm:^3.1.23, nanoid@npm:^3.3.1":
+  version: 3.3.9
+  resolution: "nanoid@npm:3.3.9"
   bin:
     nanoid: bin/nanoid.cjs
-  checksum: dfe0adbc0c77e9655b550c333075f51bb28cfc7568afbf3237249904f9c86c9aaaed1f113f0fddddba75673ee31c758c30c43d4414f014a52a7a626efc5958c9
+  checksum: 42b1dc3e05d6d4f846e65538dd6fbdf78419d8ef60c531f0faf3264cc90600041ebb53c4276013947e03dc3c9a1ac1fce5bb9e1c3a634db608e95349d7e9d3b6
   languageName: node
   linkType: hard
 
@@ -13551,6 +13951,38 @@ __metadata:
   languageName: node
   linkType: hard
 
+"react-fast-compare@npm:^3.2.0, react-fast-compare@npm:^3.2.2":
+  version: 3.2.2
+  resolution: "react-fast-compare@npm:3.2.2"
+  checksum: 2071415b4f76a3e6b55c84611c4d24dcb12ffc85811a2840b5a3f1ff2d1a99be1020d9437ee7c6e024c9f4cbb84ceb35e48cf84f28fcb00265ad2dfdd3947704
+  languageName: node
+  linkType: hard
+
+"react-freeze@npm:^1.0.0":
+  version: 1.0.4
+  resolution: "react-freeze@npm:1.0.4"
+  peerDependencies:
+    react: ">=17.0.0"
+  checksum: 6b4d93209dff04a1f25d9f8e0c56a9a8a80e7889e8e8267299f34449c7e41a9ab90cad24569d03dd7173b56b7496576dba68f71f1d4e5c8be72f0633023668bc
+  languageName: node
+  linkType: hard
+
+"react-helmet-async@npm:^1.3.0":
+  version: 1.3.0
+  resolution: "react-helmet-async@npm:1.3.0"
+  dependencies:
+    "@babel/runtime": ^7.12.5
+    invariant: ^2.2.4
+    prop-types: ^15.7.2
+    react-fast-compare: ^3.2.0
+    shallowequal: ^1.1.0
+  peerDependencies:
+    react: ^16.6.0 || ^17.0.0 || ^18.0.0
+    react-dom: ^16.6.0 || ^17.0.0 || ^18.0.0
+  checksum: 7ca7e47f8af14ea186688b512a87ab912bf6041312b297f92516341b140b3f0f8aedf5a44d226d99e69ed067b0cc106e38aeb9c9b738ffcc63d10721c844db90
+  languageName: node
+  linkType: hard
+
 "react-is@npm:^16.13.0, react-is@npm:^16.13.1, react-is@npm:^16.7.0":
   version: 16.13.1
   resolution: "react-is@npm:16.13.1"
@@ -13558,7 +13990,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react-is@npm:^18.0.0":
+"react-is@npm:^18.0.0, react-is@npm:^18.2.0":
   version: 18.3.1
   resolution: "react-is@npm:18.3.1"
   checksum: e20fe84c86ff172fc8d898251b7cc2c43645d108bf96d0b8edf39b98f9a2cae97b40520ee7ed8ee0085ccc94736c4886294456033304151c3f94978cec03df21
@@ -13642,7 +14074,20 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react-native-is-edge-to-edge@npm:1.1.6":
+"react-native-helmet-async@npm:2.0.4":
+  version: 2.0.4
+  resolution: "react-native-helmet-async@npm:2.0.4"
+  dependencies:
+    invariant: ^2.2.4
+    react-fast-compare: ^3.2.2
+    shallowequal: ^1.1.0
+  peerDependencies:
+    react: ^16.6.0 || ^17.0.0 || ^18.0.0
+  checksum: 5487f4eb9d3a0b6747d258d4371667384d0f2722be11ac41c7bb9777d25fb098c702ab94fb010223e2093e417a0d334c9314df40e3b3038290de58c62154000d
+  languageName: node
+  linkType: hard
+
+"react-native-is-edge-to-edge@npm:1.1.6, react-native-is-edge-to-edge@npm:^1.1.6":
   version: 1.1.6
   resolution: "react-native-is-edge-to-edge@npm:1.1.6"
   peerDependencies:
@@ -13680,9 +14125,14 @@ __metadata:
   dependencies:
     "@babel/core": ^7.20.0
     "@expo/metro-runtime": ~4.0.1
+    "@expo/vector-icons": ^14.0.4
     "@react-native-community/datetimepicker": ^8.3.0
     expo: ~52.0.35
+    expo-constants: ^17.0.8
+    expo-linking: ^7.0.5
     expo-navigation-bar: ^4.0.8
+    expo-router: ^4.0.19
+    expo-status-bar: ^2.0.1
     expo-system-ui: ^4.0.8
     nativewind: ^4.1.23
     react: 18.3.1
@@ -13692,6 +14142,7 @@ __metadata:
     react-native-gesture-handler: ^2.24.0
     react-native-reanimated: ^3.16.1
     react-native-safe-area-context: ^4.12.0
+    react-native-screens: ^4.10.0
     react-native-web: ~0.19.13
     tailwindcss: ^3.4.17
   languageName: unknown
@@ -13712,6 +14163,7 @@ __metadata:
     "@rn-primitives/alert-dialog": ^1.1.0
     "@rn-primitives/checkbox": ^1.1.0
     "@rn-primitives/dialog": ^1.1.0
+    "@rn-primitives/dropdown-menu": ^1.1.0
     "@rn-primitives/label": ^1.1.0
     "@rn-primitives/popover": ^1.1.0
     "@rn-primitives/portal": ^1.1.0
@@ -13804,6 +14256,19 @@ __metadata:
   languageName: node
   linkType: hard
 
+"react-native-screens@npm:^4.10.0":
+  version: 4.10.0
+  resolution: "react-native-screens@npm:4.10.0"
+  dependencies:
+    react-freeze: ^1.0.0
+    warn-once: ^0.1.0
+  peerDependencies:
+    react: "*"
+    react-native: "*"
+  checksum: 291f3024eabbb02b3299d4afafba6812f7a1dcd95f762b9be80fa9a69b20650d66a72e64f339776eb4b72e759a1b2201bb80a8501d90f9b4f4d42f19d6c09d5a
+  languageName: node
+  linkType: hard
+
 "react-native-svg@npm:^15.11.2":
   version: 15.11.2
   resolution: "react-native-svg@npm:15.11.2"
@@ -14657,6 +15122,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"schema-utils@npm:^4.0.1":
+  version: 4.3.0
+  resolution: "schema-utils@npm:4.3.0"
+  dependencies:
+    "@types/json-schema": ^7.0.9
+    ajv: ^8.9.0
+    ajv-formats: ^2.1.1
+    ajv-keywords: ^5.1.0
+  checksum: 3dbd9056727c871818eaf3cabeeb5c9e173ae2b17bbf2a9c7a2e49c220fa1a580e44df651c876aea3b4926cecf080730a39e28202cb63f2b68d99872b49cd37a
+  languageName: node
+  linkType: hard
+
 "selfsigned@npm:^2.4.1":
   version: 2.4.1
   resolution: "selfsigned@npm:2.4.1"
@@ -14687,7 +15164,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"semver@npm:7.6.3":
+"semver@npm:7.6.3, semver@npm:~7.6.3":
   version: 7.6.3
   resolution: "semver@npm:7.6.3"
   bin:
@@ -14775,6 +15252,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"server-only@npm:^0.0.1":
+  version: 0.0.1
+  resolution: "server-only@npm:0.0.1"
+  checksum: c432348956641ea3f460af8dc3765f3a1bdbcf7a1e0205b0756d868e6e6fe8934cdee6bff68401a1dd49ba4a831c75916517a877446d54b334f7de36fa273e53
+  languageName: node
+  linkType: hard
+
 "set-function-length@npm:^1.2.2":
   version: 1.2.2
   resolution: "set-function-length@npm:1.2.2"
@@ -14835,6 +15319,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"shallowequal@npm:^1.1.0":
+  version: 1.1.0
+  resolution: "shallowequal@npm:1.1.0"
+  checksum: f4c1de0837f106d2dbbfd5d0720a5d059d1c66b42b580965c8f06bb1db684be8783538b684092648c981294bf817869f743a066538771dbecb293df78f765e00
+  languageName: node
+  linkType: hard
+
 "shebang-command@npm:^1.2.0":
   version: 1.2.0
   resolution: "shebang-command@npm:1.2.0"
@@ -14960,6 +15451,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"simple-swizzle@npm:^0.2.2":
+  version: 0.2.2
+  resolution: "simple-swizzle@npm:0.2.2"
+  dependencies:
+    is-arrayish: ^0.3.1
+  checksum: a7f3f2ab5c76c4472d5c578df892e857323e452d9f392e1b5cf74b74db66e6294a1e1b8b390b519fa1b96b5b613f2a37db6cffef52c3f1f8f3c5ea64eb2d54c0
+  languageName: node
+  linkType: hard
+
 "sisteransi@npm:^1.0.5":
   version: 1.0.5
   resolution: "sisteransi@npm:1.0.5"
@@ -16395,7 +16895,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"warn-once@npm:0.1.1":
+"warn-once@npm:0.1.1, warn-once@npm:^0.1.0, warn-once@npm:^0.1.1":
   version: 0.1.1
   resolution: "warn-once@npm:0.1.1"
   checksum: e6a5a1f5a8dba7744399743d3cfb571db4c3947897875d4962a7c5b1bf2195ab4518c838cb4cea652e71729f21bba2e98dc75686f5fccde0fabbd894e2ed0c0d