From 3bf3708939afd0f0bf91b9f3e8772a578fbd9547 Mon Sep 17 00:00:00 2001
From: Viraj Ajay Joshi <virajajayjoshi@Virajs-MacBook-Pro.local>
Date: Tue, 26 Mar 2024 16:50:45 +0530
Subject: [PATCH] fix: added use client

---
 .../src/core-components/nativewind/Wrapper.tsx         |  1 +
 .../src/core-components/nativewind/accordion/index.tsx |  1 +
 .../core-components/nativewind/actionsheet/index.tsx   |  1 +
 .../core-components/nativewind/alert-dialog/index.tsx  |  1 +
 .../src/core-components/nativewind/alert/index.tsx     |  1 +
 .../src/core-components/nativewind/avatar/index.tsx    |  1 +
 .../src/core-components/nativewind/badge/index.tsx     |  1 +
 .../src/core-components/nativewind/box/index.tsx       |  1 +
 .../src/core-components/nativewind/button/index.tsx    |  1 +
 .../src/core-components/nativewind/card/index.tsx      |  1 +
 .../src/core-components/nativewind/center/index.tsx    |  1 +
 .../src/core-components/nativewind/checkbox/index.tsx  |  1 +
 .../src/core-components/nativewind/divider/index.tsx   |  1 +
 .../src/core-components/nativewind/fab/index.tsx       |  1 +
 .../src/core-components/nativewind/flat-list/index.tsx |  1 +
 .../core-components/nativewind/form-control/index.tsx  |  1 +
 .../nativewind/gluestack-ui-provider/config.ts         |  1 +
 .../nativewind/gluestack-ui-provider/index.web.tsx     |  1 +
 .../src/core-components/nativewind/heading/index.tsx   |  1 +
 .../src/core-components/nativewind/hstack/index.tsx    |  1 +
 .../src/core-components/nativewind/icon/index.tsx      |  1 +
 .../nativewind/image-background/index.tsx              |  1 +
 .../src/core-components/nativewind/image/index.tsx     |  1 +
 .../nativewind/input-accessory-view/index.tsx          |  1 +
 .../src/core-components/nativewind/input/index.tsx     |  1 +
 .../nativewind/keyboard-avoiding-view/index.tsx        |  1 +
 .../nativewind/linear-gradient/index.tsx               |  1 +
 .../src/core-components/nativewind/link/index.tsx      |  1 +
 .../src/core-components/nativewind/menu/index.tsx      | 10 +++++-----
 .../src/core-components/nativewind/modal/index.tsx     |  1 +
 .../src/core-components/nativewind/popover/index.tsx   |  2 ++
 .../src/core-components/nativewind/pressable/index.tsx |  1 +
 .../src/core-components/nativewind/progress/index.tsx  |  1 +
 .../src/core-components/nativewind/radio/index.tsx     |  1 +
 .../nativewind/refresh-control/index.tsx               |  1 +
 .../nativewind/safe-area-view/index.tsx                |  1 +
 .../core-components/nativewind/scroll-view/index.tsx   |  1 +
 .../core-components/nativewind/section-list/index.tsx  |  1 +
 .../src/core-components/nativewind/slider/index.tsx    |  1 +
 .../src/core-components/nativewind/spinner/index.tsx   |  1 +
 .../core-components/nativewind/status-bar/index.tsx    |  1 +
 .../src/core-components/nativewind/switch/index.tsx    |  1 +
 .../src/core-components/nativewind/text/index.tsx      |  1 +
 .../src/core-components/nativewind/textarea/index.tsx  |  1 +
 .../src/core-components/nativewind/toast/index.tsx     |  1 +
 .../src/core-components/nativewind/tooltip/index.tsx   |  1 +
 .../src/core-components/nativewind/view/index.tsx      |  1 +
 .../nativewind/virtualized-list/index.tsx              |  1 +
 .../src/core-components/nativewind/vstack/index.tsx    |  1 +
 49 files changed, 54 insertions(+), 5 deletions(-)

diff --git a/example/storybook-nativewind/src/core-components/nativewind/Wrapper.tsx b/example/storybook-nativewind/src/core-components/nativewind/Wrapper.tsx
index 39825a3fff..b0c5b269c8 100644
--- a/example/storybook-nativewind/src/core-components/nativewind/Wrapper.tsx
+++ b/example/storybook-nativewind/src/core-components/nativewind/Wrapper.tsx
@@ -1,3 +1,4 @@
+'use client';
 import React from 'react';
 import { Box, Center, useColorMode } from '@gluestack-ui/themed';
 import { GluestackUIProvider } from './gluestack-ui-provider';
diff --git a/example/storybook-nativewind/src/core-components/nativewind/accordion/index.tsx b/example/storybook-nativewind/src/core-components/nativewind/accordion/index.tsx
index 9f46cce351..c949bd7333 100644
--- a/example/storybook-nativewind/src/core-components/nativewind/accordion/index.tsx
+++ b/example/storybook-nativewind/src/core-components/nativewind/accordion/index.tsx
@@ -1,3 +1,4 @@
+'use client';
 import React from 'react';
 import { createAccordion } from '@gluestack-ui/accordion';
 import { View, Pressable, Text, Platform } from 'react-native';
diff --git a/example/storybook-nativewind/src/core-components/nativewind/actionsheet/index.tsx b/example/storybook-nativewind/src/core-components/nativewind/actionsheet/index.tsx
index cacabe803f..a458381ef8 100644
--- a/example/storybook-nativewind/src/core-components/nativewind/actionsheet/index.tsx
+++ b/example/storybook-nativewind/src/core-components/nativewind/actionsheet/index.tsx
@@ -1,3 +1,4 @@
+'use client';
 import { H4 } from '@expo/html-elements';
 import { createActionsheet } from '@gluestack-ui/actionsheet';
 import {
diff --git a/example/storybook-nativewind/src/core-components/nativewind/alert-dialog/index.tsx b/example/storybook-nativewind/src/core-components/nativewind/alert-dialog/index.tsx
index 27fc9ca2a8..bdb311b22b 100644
--- a/example/storybook-nativewind/src/core-components/nativewind/alert-dialog/index.tsx
+++ b/example/storybook-nativewind/src/core-components/nativewind/alert-dialog/index.tsx
@@ -1,3 +1,4 @@
+'use client';
 import React from 'react';
 import { createAlertDialog } from '@gluestack-ui/alert-dialog';
 
diff --git a/example/storybook-nativewind/src/core-components/nativewind/alert/index.tsx b/example/storybook-nativewind/src/core-components/nativewind/alert/index.tsx
index 2add9fdb79..b87eacecb8 100644
--- a/example/storybook-nativewind/src/core-components/nativewind/alert/index.tsx
+++ b/example/storybook-nativewind/src/core-components/nativewind/alert/index.tsx
@@ -1,3 +1,4 @@
+'use client';
 import { createAlert } from '@gluestack-ui/alert';
 import { View, Text } from 'react-native';
 
diff --git a/example/storybook-nativewind/src/core-components/nativewind/avatar/index.tsx b/example/storybook-nativewind/src/core-components/nativewind/avatar/index.tsx
index f7870c5e53..fe6352235b 100644
--- a/example/storybook-nativewind/src/core-components/nativewind/avatar/index.tsx
+++ b/example/storybook-nativewind/src/core-components/nativewind/avatar/index.tsx
@@ -1,3 +1,4 @@
+'use client';
 import React from 'react';
 import { createAvatar } from '@gluestack-ui/avatar';
 
diff --git a/example/storybook-nativewind/src/core-components/nativewind/badge/index.tsx b/example/storybook-nativewind/src/core-components/nativewind/badge/index.tsx
index 00bc7672c5..4bbd555b97 100644
--- a/example/storybook-nativewind/src/core-components/nativewind/badge/index.tsx
+++ b/example/storybook-nativewind/src/core-components/nativewind/badge/index.tsx
@@ -1,3 +1,4 @@
+'use client';
 import React from 'react';
 import { Text, View, Platform } from 'react-native';
 
diff --git a/example/storybook-nativewind/src/core-components/nativewind/box/index.tsx b/example/storybook-nativewind/src/core-components/nativewind/box/index.tsx
index 16ccc5338e..1d9adcd006 100644
--- a/example/storybook-nativewind/src/core-components/nativewind/box/index.tsx
+++ b/example/storybook-nativewind/src/core-components/nativewind/box/index.tsx
@@ -1,3 +1,4 @@
+'use client';
 import React from 'react';
 import { View } from 'react-native';
 
diff --git a/example/storybook-nativewind/src/core-components/nativewind/button/index.tsx b/example/storybook-nativewind/src/core-components/nativewind/button/index.tsx
index 9c1876d2e6..c48ddfb3e6 100644
--- a/example/storybook-nativewind/src/core-components/nativewind/button/index.tsx
+++ b/example/storybook-nativewind/src/core-components/nativewind/button/index.tsx
@@ -1,3 +1,4 @@
+'use client';
 import React from 'react';
 import { createButton } from '@gluestack-ui/button';
 
diff --git a/example/storybook-nativewind/src/core-components/nativewind/card/index.tsx b/example/storybook-nativewind/src/core-components/nativewind/card/index.tsx
index 250c3355ca..f166efac9d 100644
--- a/example/storybook-nativewind/src/core-components/nativewind/card/index.tsx
+++ b/example/storybook-nativewind/src/core-components/nativewind/card/index.tsx
@@ -1,3 +1,4 @@
+'use client';
 import React from 'react';
 import { tva } from '@gluestack-ui/nativewind-utils/tva';
 import { View } from 'react-native';
diff --git a/example/storybook-nativewind/src/core-components/nativewind/center/index.tsx b/example/storybook-nativewind/src/core-components/nativewind/center/index.tsx
index 9129fdcd89..a0d3514458 100644
--- a/example/storybook-nativewind/src/core-components/nativewind/center/index.tsx
+++ b/example/storybook-nativewind/src/core-components/nativewind/center/index.tsx
@@ -1,3 +1,4 @@
+'use client';
 import { View } from 'react-native';
 import React from 'react';
 import { tva } from '@gluestack-ui/nativewind-utils/tva';
diff --git a/example/storybook-nativewind/src/core-components/nativewind/checkbox/index.tsx b/example/storybook-nativewind/src/core-components/nativewind/checkbox/index.tsx
index 4d9cfe9b7c..bd746e5920 100644
--- a/example/storybook-nativewind/src/core-components/nativewind/checkbox/index.tsx
+++ b/example/storybook-nativewind/src/core-components/nativewind/checkbox/index.tsx
@@ -1,3 +1,4 @@
+'use client';
 import React from 'react';
 import { createCheckbox } from '@gluestack-ui/checkbox';
 import { View, Pressable, Text } from 'react-native';
diff --git a/example/storybook-nativewind/src/core-components/nativewind/divider/index.tsx b/example/storybook-nativewind/src/core-components/nativewind/divider/index.tsx
index 6b3b0e5bf2..d2849534ff 100644
--- a/example/storybook-nativewind/src/core-components/nativewind/divider/index.tsx
+++ b/example/storybook-nativewind/src/core-components/nativewind/divider/index.tsx
@@ -1,3 +1,4 @@
+'use client';
 import { createDivider } from '@gluestack-ui/divider';
 import { tva } from '@gluestack-ui/nativewind-utils/tva';
 import { View } from 'react-native';
diff --git a/example/storybook-nativewind/src/core-components/nativewind/fab/index.tsx b/example/storybook-nativewind/src/core-components/nativewind/fab/index.tsx
index d517eec829..9044e8f60c 100644
--- a/example/storybook-nativewind/src/core-components/nativewind/fab/index.tsx
+++ b/example/storybook-nativewind/src/core-components/nativewind/fab/index.tsx
@@ -1,3 +1,4 @@
+'use client';
 import { createFab } from '@gluestack-ui/fab';
 import { Platform, Text, View } from 'react-native';
 import { Pressable } from 'react-native';
diff --git a/example/storybook-nativewind/src/core-components/nativewind/flat-list/index.tsx b/example/storybook-nativewind/src/core-components/nativewind/flat-list/index.tsx
index bc5e26faa2..4ccadcd66c 100644
--- a/example/storybook-nativewind/src/core-components/nativewind/flat-list/index.tsx
+++ b/example/storybook-nativewind/src/core-components/nativewind/flat-list/index.tsx
@@ -1 +1,2 @@
+'use client';
 export { FlatList } from 'react-native';
diff --git a/example/storybook-nativewind/src/core-components/nativewind/form-control/index.tsx b/example/storybook-nativewind/src/core-components/nativewind/form-control/index.tsx
index 43f2ee2a84..726d557461 100644
--- a/example/storybook-nativewind/src/core-components/nativewind/form-control/index.tsx
+++ b/example/storybook-nativewind/src/core-components/nativewind/form-control/index.tsx
@@ -1,3 +1,4 @@
+'use client';
 import { Text, View } from 'react-native';
 import React from 'react';
 import { createFormControl } from '@gluestack-ui/form-control';
diff --git a/example/storybook-nativewind/src/core-components/nativewind/gluestack-ui-provider/config.ts b/example/storybook-nativewind/src/core-components/nativewind/gluestack-ui-provider/config.ts
index 44b24394f1..d02453399d 100644
--- a/example/storybook-nativewind/src/core-components/nativewind/gluestack-ui-provider/config.ts
+++ b/example/storybook-nativewind/src/core-components/nativewind/gluestack-ui-provider/config.ts
@@ -1,3 +1,4 @@
+'use client';
 import { vars } from 'nativewind';
 
 export const config = {
diff --git a/example/storybook-nativewind/src/core-components/nativewind/gluestack-ui-provider/index.web.tsx b/example/storybook-nativewind/src/core-components/nativewind/gluestack-ui-provider/index.web.tsx
index 83729410d9..df62bbd792 100644
--- a/example/storybook-nativewind/src/core-components/nativewind/gluestack-ui-provider/index.web.tsx
+++ b/example/storybook-nativewind/src/core-components/nativewind/gluestack-ui-provider/index.web.tsx
@@ -1,3 +1,4 @@
+'use client';
 import { config } from './config';
 
 export function GluestackUIProvider({
diff --git a/example/storybook-nativewind/src/core-components/nativewind/heading/index.tsx b/example/storybook-nativewind/src/core-components/nativewind/heading/index.tsx
index bd50c46ea3..438d214ed4 100644
--- a/example/storybook-nativewind/src/core-components/nativewind/heading/index.tsx
+++ b/example/storybook-nativewind/src/core-components/nativewind/heading/index.tsx
@@ -1,3 +1,4 @@
+'use client';
 import React, { useCallback } from 'react';
 import { H1, H2, H3, H4, H5, H6 } from '@expo/html-elements';
 import { tva } from '@gluestack-ui/nativewind-utils/tva';
diff --git a/example/storybook-nativewind/src/core-components/nativewind/hstack/index.tsx b/example/storybook-nativewind/src/core-components/nativewind/hstack/index.tsx
index cd899676d8..fd9558d8b9 100644
--- a/example/storybook-nativewind/src/core-components/nativewind/hstack/index.tsx
+++ b/example/storybook-nativewind/src/core-components/nativewind/hstack/index.tsx
@@ -1,3 +1,4 @@
+'use client';
 import React from 'react';
 import { tva } from '@gluestack-ui/nativewind-utils/tva';
 import { View } from 'react-native';
diff --git a/example/storybook-nativewind/src/core-components/nativewind/icon/index.tsx b/example/storybook-nativewind/src/core-components/nativewind/icon/index.tsx
index 79175a52ba..e9e734d529 100644
--- a/example/storybook-nativewind/src/core-components/nativewind/icon/index.tsx
+++ b/example/storybook-nativewind/src/core-components/nativewind/icon/index.tsx
@@ -1,3 +1,4 @@
+'use client';
 import React from 'react';
 import { createIcon } from '@gluestack-ui/icon';
 import { Path, Svg } from 'react-native-svg';
diff --git a/example/storybook-nativewind/src/core-components/nativewind/image-background/index.tsx b/example/storybook-nativewind/src/core-components/nativewind/image-background/index.tsx
index 600a7a30f5..3d856c71cd 100644
--- a/example/storybook-nativewind/src/core-components/nativewind/image-background/index.tsx
+++ b/example/storybook-nativewind/src/core-components/nativewind/image-background/index.tsx
@@ -1,3 +1,4 @@
+'use client';
 import { ImageBackground as RNImageBackground } from 'react-native';
 import React from 'react';
 import { tva } from '@gluestack-ui/nativewind-utils/tva';
diff --git a/example/storybook-nativewind/src/core-components/nativewind/image/index.tsx b/example/storybook-nativewind/src/core-components/nativewind/image/index.tsx
index 2d6a1795d8..637f076459 100644
--- a/example/storybook-nativewind/src/core-components/nativewind/image/index.tsx
+++ b/example/storybook-nativewind/src/core-components/nativewind/image/index.tsx
@@ -1,3 +1,4 @@
+'use client';
 import React from 'react';
 import { createImage } from '@gluestack-ui/image';
 import { Image as RNImage } from 'react-native';
diff --git a/example/storybook-nativewind/src/core-components/nativewind/input-accessory-view/index.tsx b/example/storybook-nativewind/src/core-components/nativewind/input-accessory-view/index.tsx
index 3fadb3b0da..25ebef794f 100644
--- a/example/storybook-nativewind/src/core-components/nativewind/input-accessory-view/index.tsx
+++ b/example/storybook-nativewind/src/core-components/nativewind/input-accessory-view/index.tsx
@@ -1 +1,2 @@
+'use client';
 export { InputAccessoryView } from 'react-native';
diff --git a/example/storybook-nativewind/src/core-components/nativewind/input/index.tsx b/example/storybook-nativewind/src/core-components/nativewind/input/index.tsx
index 4e9f9fb076..de9b02c382 100644
--- a/example/storybook-nativewind/src/core-components/nativewind/input/index.tsx
+++ b/example/storybook-nativewind/src/core-components/nativewind/input/index.tsx
@@ -1,3 +1,4 @@
+'use client';
 import React from 'react';
 import { createInput } from '@gluestack-ui/input';
 import { View, Pressable, TextInput, Platform } from 'react-native';
diff --git a/example/storybook-nativewind/src/core-components/nativewind/keyboard-avoiding-view/index.tsx b/example/storybook-nativewind/src/core-components/nativewind/keyboard-avoiding-view/index.tsx
index 6743386f9b..7fc72834b5 100644
--- a/example/storybook-nativewind/src/core-components/nativewind/keyboard-avoiding-view/index.tsx
+++ b/example/storybook-nativewind/src/core-components/nativewind/keyboard-avoiding-view/index.tsx
@@ -1 +1,2 @@
+'use client';
 export { KeyboardAvoidingView } from 'react-native';
diff --git a/example/storybook-nativewind/src/core-components/nativewind/linear-gradient/index.tsx b/example/storybook-nativewind/src/core-components/nativewind/linear-gradient/index.tsx
index 93f898e53e..99cd8cb8bf 100644
--- a/example/storybook-nativewind/src/core-components/nativewind/linear-gradient/index.tsx
+++ b/example/storybook-nativewind/src/core-components/nativewind/linear-gradient/index.tsx
@@ -1,3 +1,4 @@
+'use client';
 import { View } from 'react-native';
 import React from 'react';
 import { tva } from '@gluestack-ui/nativewind-utils/tva';
diff --git a/example/storybook-nativewind/src/core-components/nativewind/link/index.tsx b/example/storybook-nativewind/src/core-components/nativewind/link/index.tsx
index b55b725417..811e6fa9c8 100644
--- a/example/storybook-nativewind/src/core-components/nativewind/link/index.tsx
+++ b/example/storybook-nativewind/src/core-components/nativewind/link/index.tsx
@@ -1,3 +1,4 @@
+'use client';
 import { createLink } from '@gluestack-ui/link';
 import { Pressable, Platform } from 'react-native';
 import { Text } from 'react-native';
diff --git a/example/storybook-nativewind/src/core-components/nativewind/menu/index.tsx b/example/storybook-nativewind/src/core-components/nativewind/menu/index.tsx
index ba57e3a9dc..678a4087ae 100644
--- a/example/storybook-nativewind/src/core-components/nativewind/menu/index.tsx
+++ b/example/storybook-nativewind/src/core-components/nativewind/menu/index.tsx
@@ -1,10 +1,11 @@
+'use client';
 import React from 'react';
 import { createMenu } from '@gluestack-ui/menu';
 import { tva } from '@gluestack-ui/nativewind-utils/tva';
 import { cssInterop } from '@gluestack-ui/nativewind-utils/cssInterop';
 import { Pressable, Text } from 'react-native';
 import { Motion, AnimatePresence } from '@legendapp/motion';
-import { VariantProps } from '@gluestack-ui/nativewind-utils';
+import type { VariantProps } from '@gluestack-ui/nativewind-utils';
 
 const menuStyle = tva({
   base: 'min-w-[200px] py-2 rounded-sm bg-background-0',
@@ -101,6 +102,9 @@ export const UIMenu = createMenu({
   AnimatePresence: AnimatePresence,
 });
 
+cssInterop(UIMenu, { className: 'style' });
+cssInterop(UIMenu.ItemLabel, { className: 'style' });
+
 type IMenuProps = React.ComponentProps<typeof UIMenu> &
   VariantProps<typeof menuStyle>;
 type IMenuItemLabelProps = React.ComponentProps<typeof UIMenu.ItemLabel> &
@@ -138,10 +142,6 @@ const Menu = React.forwardRef(
   }
 );
 
-cssInterop(UIMenu, { className: 'style' });
-cssInterop(UIMenu.Item, { className: 'style' });
-cssInterop(UIMenu.ItemLabel, { className: 'style' });
-
 const MenuItem = UIMenu.Item;
 
 const MenuItemLabel = React.forwardRef(
diff --git a/example/storybook-nativewind/src/core-components/nativewind/modal/index.tsx b/example/storybook-nativewind/src/core-components/nativewind/modal/index.tsx
index 942d33692f..4a1f2c940f 100644
--- a/example/storybook-nativewind/src/core-components/nativewind/modal/index.tsx
+++ b/example/storybook-nativewind/src/core-components/nativewind/modal/index.tsx
@@ -1,3 +1,4 @@
+'use client';
 import React from 'react';
 import { createModal } from '@gluestack-ui/modal';
 import { Pressable, View, ScrollView, Platform } from 'react-native';
diff --git a/example/storybook-nativewind/src/core-components/nativewind/popover/index.tsx b/example/storybook-nativewind/src/core-components/nativewind/popover/index.tsx
index 07109cc784..fd46fb9257 100644
--- a/example/storybook-nativewind/src/core-components/nativewind/popover/index.tsx
+++ b/example/storybook-nativewind/src/core-components/nativewind/popover/index.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import React from 'react';
 import { createPopover } from '@gluestack-ui/popover';
 import { tva } from '@gluestack-ui/nativewind-utils/tva';
diff --git a/example/storybook-nativewind/src/core-components/nativewind/pressable/index.tsx b/example/storybook-nativewind/src/core-components/nativewind/pressable/index.tsx
index 77168938b6..c1d5acd64b 100644
--- a/example/storybook-nativewind/src/core-components/nativewind/pressable/index.tsx
+++ b/example/storybook-nativewind/src/core-components/nativewind/pressable/index.tsx
@@ -1,3 +1,4 @@
+'use client';
 import React from 'react';
 import { createPressable } from '@gluestack-ui/pressable';
 import { Pressable as RNPressable, Platform } from 'react-native';
diff --git a/example/storybook-nativewind/src/core-components/nativewind/progress/index.tsx b/example/storybook-nativewind/src/core-components/nativewind/progress/index.tsx
index f632452770..8c7fdedf67 100644
--- a/example/storybook-nativewind/src/core-components/nativewind/progress/index.tsx
+++ b/example/storybook-nativewind/src/core-components/nativewind/progress/index.tsx
@@ -1,3 +1,4 @@
+'use client';
 import React from 'react';
 import { createProgress } from '@gluestack-ui/progress';
 import { View } from 'react-native';
diff --git a/example/storybook-nativewind/src/core-components/nativewind/radio/index.tsx b/example/storybook-nativewind/src/core-components/nativewind/radio/index.tsx
index 63e093128a..6c6b335fda 100644
--- a/example/storybook-nativewind/src/core-components/nativewind/radio/index.tsx
+++ b/example/storybook-nativewind/src/core-components/nativewind/radio/index.tsx
@@ -1,3 +1,4 @@
+'use client';
 import React from 'react';
 import { createRadio } from '@gluestack-ui/radio';
 import { Pressable, View, Platform, Text } from 'react-native';
diff --git a/example/storybook-nativewind/src/core-components/nativewind/refresh-control/index.tsx b/example/storybook-nativewind/src/core-components/nativewind/refresh-control/index.tsx
index cd7c666356..761bf777db 100644
--- a/example/storybook-nativewind/src/core-components/nativewind/refresh-control/index.tsx
+++ b/example/storybook-nativewind/src/core-components/nativewind/refresh-control/index.tsx
@@ -1 +1,2 @@
+'use client';
 export { RefreshControl } from 'react-native';
diff --git a/example/storybook-nativewind/src/core-components/nativewind/safe-area-view/index.tsx b/example/storybook-nativewind/src/core-components/nativewind/safe-area-view/index.tsx
index cb948c8dc3..10df75d7de 100644
--- a/example/storybook-nativewind/src/core-components/nativewind/safe-area-view/index.tsx
+++ b/example/storybook-nativewind/src/core-components/nativewind/safe-area-view/index.tsx
@@ -1 +1,2 @@
+'use client';
 export { SafeAreaView } from 'react-native';
diff --git a/example/storybook-nativewind/src/core-components/nativewind/scroll-view/index.tsx b/example/storybook-nativewind/src/core-components/nativewind/scroll-view/index.tsx
index dbc6258f28..22bd5633cb 100644
--- a/example/storybook-nativewind/src/core-components/nativewind/scroll-view/index.tsx
+++ b/example/storybook-nativewind/src/core-components/nativewind/scroll-view/index.tsx
@@ -1 +1,2 @@
+'use client';
 export { ScrollView } from 'react-native';
diff --git a/example/storybook-nativewind/src/core-components/nativewind/section-list/index.tsx b/example/storybook-nativewind/src/core-components/nativewind/section-list/index.tsx
index cf549c9cd2..fc1058b433 100644
--- a/example/storybook-nativewind/src/core-components/nativewind/section-list/index.tsx
+++ b/example/storybook-nativewind/src/core-components/nativewind/section-list/index.tsx
@@ -1 +1,2 @@
+'use client';
 export { SectionList } from 'react-native';
diff --git a/example/storybook-nativewind/src/core-components/nativewind/slider/index.tsx b/example/storybook-nativewind/src/core-components/nativewind/slider/index.tsx
index 057be5a7ed..8bf46c68be 100644
--- a/example/storybook-nativewind/src/core-components/nativewind/slider/index.tsx
+++ b/example/storybook-nativewind/src/core-components/nativewind/slider/index.tsx
@@ -1,3 +1,4 @@
+'use client';
 import { createSlider } from '@gluestack-ui/slider';
 import { Pressable } from 'react-native';
 import { View, Platform } from 'react-native';
diff --git a/example/storybook-nativewind/src/core-components/nativewind/spinner/index.tsx b/example/storybook-nativewind/src/core-components/nativewind/spinner/index.tsx
index aadaeee5c5..fe22daf355 100644
--- a/example/storybook-nativewind/src/core-components/nativewind/spinner/index.tsx
+++ b/example/storybook-nativewind/src/core-components/nativewind/spinner/index.tsx
@@ -1,3 +1,4 @@
+'use client';
 import { ActivityIndicator } from 'react-native';
 import React from 'react';
 import { createSpinner } from '@gluestack-ui/spinner';
diff --git a/example/storybook-nativewind/src/core-components/nativewind/status-bar/index.tsx b/example/storybook-nativewind/src/core-components/nativewind/status-bar/index.tsx
index b73ed6b0e2..3a61fac5cc 100644
--- a/example/storybook-nativewind/src/core-components/nativewind/status-bar/index.tsx
+++ b/example/storybook-nativewind/src/core-components/nativewind/status-bar/index.tsx
@@ -1 +1,2 @@
+'use client';
 export { StatusBar } from 'react-native';
diff --git a/example/storybook-nativewind/src/core-components/nativewind/switch/index.tsx b/example/storybook-nativewind/src/core-components/nativewind/switch/index.tsx
index a1505ace84..86c2024fa5 100644
--- a/example/storybook-nativewind/src/core-components/nativewind/switch/index.tsx
+++ b/example/storybook-nativewind/src/core-components/nativewind/switch/index.tsx
@@ -1,3 +1,4 @@
+'use client';
 import React from 'react';
 import { Switch as RNSwitch, Platform } from 'react-native';
 import { createSwitch } from '@gluestack-ui/switch';
diff --git a/example/storybook-nativewind/src/core-components/nativewind/text/index.tsx b/example/storybook-nativewind/src/core-components/nativewind/text/index.tsx
index ed94f88da8..030e5bce7a 100644
--- a/example/storybook-nativewind/src/core-components/nativewind/text/index.tsx
+++ b/example/storybook-nativewind/src/core-components/nativewind/text/index.tsx
@@ -1,3 +1,4 @@
+'use client';
 import React from 'react';
 import { tva } from '@gluestack-ui/nativewind-utils/tva';
 
diff --git a/example/storybook-nativewind/src/core-components/nativewind/textarea/index.tsx b/example/storybook-nativewind/src/core-components/nativewind/textarea/index.tsx
index ac79396883..1dd5b7216b 100644
--- a/example/storybook-nativewind/src/core-components/nativewind/textarea/index.tsx
+++ b/example/storybook-nativewind/src/core-components/nativewind/textarea/index.tsx
@@ -1,3 +1,4 @@
+'use client';
 import React from 'react';
 import { createTextarea } from '@gluestack-ui/textarea';
 import { View, TextInput, Platform } from 'react-native';
diff --git a/example/storybook-nativewind/src/core-components/nativewind/toast/index.tsx b/example/storybook-nativewind/src/core-components/nativewind/toast/index.tsx
index fd378ad76e..3ee66ea168 100644
--- a/example/storybook-nativewind/src/core-components/nativewind/toast/index.tsx
+++ b/example/storybook-nativewind/src/core-components/nativewind/toast/index.tsx
@@ -1,3 +1,4 @@
+'use client';
 import React from 'react';
 import { createToast, createToastHook } from '@gluestack-ui/toast';
 import { Text, View } from 'react-native';
diff --git a/example/storybook-nativewind/src/core-components/nativewind/tooltip/index.tsx b/example/storybook-nativewind/src/core-components/nativewind/tooltip/index.tsx
index b15652a994..8f20993fb2 100644
--- a/example/storybook-nativewind/src/core-components/nativewind/tooltip/index.tsx
+++ b/example/storybook-nativewind/src/core-components/nativewind/tooltip/index.tsx
@@ -1,3 +1,4 @@
+'use client';
 import React from 'react';
 import { createTooltip } from '@gluestack-ui/tooltip';
 import { View, Text, Platform } from 'react-native';
diff --git a/example/storybook-nativewind/src/core-components/nativewind/view/index.tsx b/example/storybook-nativewind/src/core-components/nativewind/view/index.tsx
index 8f32b6b168..ae97908127 100644
--- a/example/storybook-nativewind/src/core-components/nativewind/view/index.tsx
+++ b/example/storybook-nativewind/src/core-components/nativewind/view/index.tsx
@@ -1 +1,2 @@
+'use client';
 export { View } from 'react-native';
diff --git a/example/storybook-nativewind/src/core-components/nativewind/virtualized-list/index.tsx b/example/storybook-nativewind/src/core-components/nativewind/virtualized-list/index.tsx
index be3e260683..b90d3a60f5 100644
--- a/example/storybook-nativewind/src/core-components/nativewind/virtualized-list/index.tsx
+++ b/example/storybook-nativewind/src/core-components/nativewind/virtualized-list/index.tsx
@@ -1 +1,2 @@
+'use client';
 export { VirtualizedList } from 'react-native';
diff --git a/example/storybook-nativewind/src/core-components/nativewind/vstack/index.tsx b/example/storybook-nativewind/src/core-components/nativewind/vstack/index.tsx
index 81ed8a921f..cb8a9e4a4b 100644
--- a/example/storybook-nativewind/src/core-components/nativewind/vstack/index.tsx
+++ b/example/storybook-nativewind/src/core-components/nativewind/vstack/index.tsx
@@ -1,3 +1,4 @@
+'use client';
 import React from 'react';
 import { tva } from '@gluestack-ui/nativewind-utils/tva';
 import type { VariantProps } from '@gluestack-ui/nativewind-utils';