From 0ebf46d51254f3df1a6d7ba4b0ffaf0ab312e898 Mon Sep 17 00:00:00 2001
From: Viraj Ajay Joshi <virajajayjoshi@Virajs-MacBook-Pro.local>
Date: Tue, 26 Mar 2024 16:58:37 +0530
Subject: [PATCH] fix: added use client to themed

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

diff --git a/example/storybook-nativewind/src/core-components/themed/Wrapper.tsx b/example/storybook-nativewind/src/core-components/themed/Wrapper.tsx
index b24dab639f..05ad7427e5 100644
--- a/example/storybook-nativewind/src/core-components/themed/Wrapper.tsx
+++ b/example/storybook-nativewind/src/core-components/themed/Wrapper.tsx
@@ -1,3 +1,4 @@
+'use client';
 import React from 'react';
 import { Box, Center } from '@gluestack-ui/themed';
 import { StyledProvider, useColorMode } from '@gluestack-style/react';
diff --git a/example/storybook-nativewind/src/core-components/themed/accordion/index.tsx b/example/storybook-nativewind/src/core-components/themed/accordion/index.tsx
index 49d6aa9a1a..016277e019 100644
--- a/example/storybook-nativewind/src/core-components/themed/accordion/index.tsx
+++ b/example/storybook-nativewind/src/core-components/themed/accordion/index.tsx
@@ -1,3 +1,4 @@
+'use client';
 import { createAccordion } from '@gluestack-ui/accordion';
 import { AsForwarder, styled } from '@gluestack-style/react';
 import { View, Pressable, Text, Platform } from 'react-native';
diff --git a/example/storybook-nativewind/src/core-components/themed/actionsheet/index.tsx b/example/storybook-nativewind/src/core-components/themed/actionsheet/index.tsx
index c1a605233a..4056662001 100644
--- a/example/storybook-nativewind/src/core-components/themed/actionsheet/index.tsx
+++ b/example/storybook-nativewind/src/core-components/themed/actionsheet/index.tsx
@@ -1,3 +1,4 @@
+'use client';
 import { H1, H2, H3, H4, H5, H6 } from '@expo/html-elements';
 import {
   AnimatePresence,
diff --git a/example/storybook-nativewind/src/core-components/themed/alert-dialog/index.tsx b/example/storybook-nativewind/src/core-components/themed/alert-dialog/index.tsx
index d099b38ec1..de03bbd722 100644
--- a/example/storybook-nativewind/src/core-components/themed/alert-dialog/index.tsx
+++ b/example/storybook-nativewind/src/core-components/themed/alert-dialog/index.tsx
@@ -1,3 +1,4 @@
+'use client';
 import {
   AnimatePresence,
   AnimatedView,
diff --git a/example/storybook-nativewind/src/core-components/themed/alert/index.tsx b/example/storybook-nativewind/src/core-components/themed/alert/index.tsx
index 00f5543885..771b888b74 100644
--- a/example/storybook-nativewind/src/core-components/themed/alert/index.tsx
+++ b/example/storybook-nativewind/src/core-components/themed/alert/index.tsx
@@ -1,3 +1,4 @@
+'use client';
 import { AsForwarder, styled } from '@gluestack-style/react';
 import { createAlert } from '@gluestack-ui/alert';
 import { View, Text } from 'react-native';
diff --git a/example/storybook-nativewind/src/core-components/themed/avatar/index.tsx b/example/storybook-nativewind/src/core-components/themed/avatar/index.tsx
index 9aefa3232a..fbd1ead795 100644
--- a/example/storybook-nativewind/src/core-components/themed/avatar/index.tsx
+++ b/example/storybook-nativewind/src/core-components/themed/avatar/index.tsx
@@ -1,5 +1,5 @@
+'use client';
 import { createAvatar } from '@gluestack-ui/avatar';
-
 import { styled } from '@gluestack-style/react';
 import { View, Text, Image } from 'react-native';
 const StyledRoot = styled(
diff --git a/example/storybook-nativewind/src/core-components/themed/badge/index.tsx b/example/storybook-nativewind/src/core-components/themed/badge/index.tsx
index dd4ace986d..3a4233ff0e 100644
--- a/example/storybook-nativewind/src/core-components/themed/badge/index.tsx
+++ b/example/storybook-nativewind/src/core-components/themed/badge/index.tsx
@@ -1,3 +1,4 @@
+'use client';
 import { AsForwarder, styled } from '@gluestack-style/react';
 import { Text, View } from 'react-native';
 
diff --git a/example/storybook-nativewind/src/core-components/themed/box/index.tsx b/example/storybook-nativewind/src/core-components/themed/box/index.tsx
index fa2594ba5a..33d9cffd8c 100644
--- a/example/storybook-nativewind/src/core-components/themed/box/index.tsx
+++ b/example/storybook-nativewind/src/core-components/themed/box/index.tsx
@@ -1,3 +1,4 @@
+'use client';
 import { View } from 'react-native';
 
 import { styled } from '@gluestack-style/react';
diff --git a/example/storybook-nativewind/src/core-components/themed/button/index.tsx b/example/storybook-nativewind/src/core-components/themed/button/index.tsx
index f419448269..82545210a7 100644
--- a/example/storybook-nativewind/src/core-components/themed/button/index.tsx
+++ b/example/storybook-nativewind/src/core-components/themed/button/index.tsx
@@ -1,5 +1,5 @@
+'use client';
 import { ActivityIndicator, Pressable, Text, View } from 'react-native';
-
 import { createButton } from '@gluestack-ui/button';
 import { AsForwarder, styled } from '@gluestack-style/react';
 
diff --git a/example/storybook-nativewind/src/core-components/themed/card/index.tsx b/example/storybook-nativewind/src/core-components/themed/card/index.tsx
index ecef2430e1..505bbbd470 100644
--- a/example/storybook-nativewind/src/core-components/themed/card/index.tsx
+++ b/example/storybook-nativewind/src/core-components/themed/card/index.tsx
@@ -1,3 +1,4 @@
+'use client';
 import { View } from 'react-native';
 import { styled } from '@gluestack-style/react';
 
diff --git a/example/storybook-nativewind/src/core-components/themed/center/index.tsx b/example/storybook-nativewind/src/core-components/themed/center/index.tsx
index c5e80efb57..a5e5372b29 100644
--- a/example/storybook-nativewind/src/core-components/themed/center/index.tsx
+++ b/example/storybook-nativewind/src/core-components/themed/center/index.tsx
@@ -1,3 +1,4 @@
+'use client';
 import { View } from 'react-native';
 import { styled } from '@gluestack-style/react';
 const StyledRoot = styled(
diff --git a/example/storybook-nativewind/src/core-components/themed/checkbox/index.tsx b/example/storybook-nativewind/src/core-components/themed/checkbox/index.tsx
index cbd0999f95..58ec4b0907 100644
--- a/example/storybook-nativewind/src/core-components/themed/checkbox/index.tsx
+++ b/example/storybook-nativewind/src/core-components/themed/checkbox/index.tsx
@@ -1,3 +1,4 @@
+'use client';
 import { createCheckbox } from '@gluestack-ui/checkbox';
 import { View, Pressable, Text } from 'react-native';
 
diff --git a/example/storybook-nativewind/src/core-components/themed/divider/index.tsx b/example/storybook-nativewind/src/core-components/themed/divider/index.tsx
index e74bb7dadb..d6e20a3e50 100644
--- a/example/storybook-nativewind/src/core-components/themed/divider/index.tsx
+++ b/example/storybook-nativewind/src/core-components/themed/divider/index.tsx
@@ -1,3 +1,4 @@
+'use client';
 import { createDivider } from '@gluestack-ui/divider';
 import { styled } from '@gluestack-style/react';
 import { View } from 'react-native';
diff --git a/example/storybook-nativewind/src/core-components/themed/fab/index.tsx b/example/storybook-nativewind/src/core-components/themed/fab/index.tsx
index c147b739d6..55b63f23d3 100644
--- a/example/storybook-nativewind/src/core-components/themed/fab/index.tsx
+++ b/example/storybook-nativewind/src/core-components/themed/fab/index.tsx
@@ -1,3 +1,4 @@
+'use client';
 import { AsForwarder, styled } from '@gluestack-style/react';
 import { createFab } from '@gluestack-ui/fab';
 import { Text } from 'react-native';
diff --git a/example/storybook-nativewind/src/core-components/themed/flat-list/index.tsx b/example/storybook-nativewind/src/core-components/themed/flat-list/index.tsx
index ef7356e1bb..de51b8396a 100644
--- a/example/storybook-nativewind/src/core-components/themed/flat-list/index.tsx
+++ b/example/storybook-nativewind/src/core-components/themed/flat-list/index.tsx
@@ -1,3 +1,4 @@
+'use client';
 import { FlatList as RNFlatList } from 'react-native';
 import { styled, useStyled, propertyTokenMap } from '@gluestack-style/react';
 
diff --git a/example/storybook-nativewind/src/core-components/themed/form-control/index.tsx b/example/storybook-nativewind/src/core-components/themed/form-control/index.tsx
index 0643a4e049..93a9c53011 100644
--- a/example/storybook-nativewind/src/core-components/themed/form-control/index.tsx
+++ b/example/storybook-nativewind/src/core-components/themed/form-control/index.tsx
@@ -1,3 +1,4 @@
+'use client';
 import { Text, View } from 'react-native';
 
 import { styled } from '@gluestack-style/react';
diff --git a/example/storybook-nativewind/src/core-components/themed/gluestack-ui-provider/config.ts b/example/storybook-nativewind/src/core-components/themed/gluestack-ui-provider/config.ts
index 894efc3183..0d6674286c 100644
--- a/example/storybook-nativewind/src/core-components/themed/gluestack-ui-provider/config.ts
+++ b/example/storybook-nativewind/src/core-components/themed/gluestack-ui-provider/config.ts
@@ -1,3 +1,4 @@
+'use client';
 import { AnimationResolver } from '@gluestack-style/animation-resolver';
 import { MotionAnimationDriver } from '@gluestack-style/legend-motion-animation-driver';
 import { createConfig } from '@gluestack-style/react';
diff --git a/example/storybook-nativewind/src/core-components/themed/gluestack-ui-provider/index.tsx b/example/storybook-nativewind/src/core-components/themed/gluestack-ui-provider/index.tsx
index 9d2e77cfb6..c52c202329 100644
--- a/example/storybook-nativewind/src/core-components/themed/gluestack-ui-provider/index.tsx
+++ b/example/storybook-nativewind/src/core-components/themed/gluestack-ui-provider/index.tsx
@@ -1,3 +1,4 @@
+'use client';
 import React from 'react';
 import { createProvider } from '@gluestack-ui/provider';
 import { StyledProvider } from '@gluestack-style/react';
diff --git a/example/storybook-nativewind/src/core-components/themed/heading/index.tsx b/example/storybook-nativewind/src/core-components/themed/heading/index.tsx
index 43b54c696f..9067b915ae 100644
--- a/example/storybook-nativewind/src/core-components/themed/heading/index.tsx
+++ b/example/storybook-nativewind/src/core-components/themed/heading/index.tsx
@@ -1,3 +1,4 @@
+'use client';
 import { styled } from '@gluestack-style/react';
 import { H1, H2, H3, H4, H5, H6 } from '@expo/html-elements';
 
diff --git a/example/storybook-nativewind/src/core-components/themed/hstack/index.tsx b/example/storybook-nativewind/src/core-components/themed/hstack/index.tsx
index b485e0fec7..f65cbf217f 100644
--- a/example/storybook-nativewind/src/core-components/themed/hstack/index.tsx
+++ b/example/storybook-nativewind/src/core-components/themed/hstack/index.tsx
@@ -1,5 +1,5 @@
+'use client';
 import { View } from 'react-native';
-
 import { styled } from '@gluestack-style/react';
 
 const StyledRoot = styled(View, {
diff --git a/example/storybook-nativewind/src/core-components/themed/icon/index.tsx b/example/storybook-nativewind/src/core-components/themed/icon/index.tsx
index d659a161da..fef135ac98 100644
--- a/example/storybook-nativewind/src/core-components/themed/icon/index.tsx
+++ b/example/storybook-nativewind/src/core-components/themed/icon/index.tsx
@@ -1,3 +1,4 @@
+'use client';
 import React from 'react';
 import { createIcon } from '@gluestack-ui/icon';
 import { styled, AsForwarder } from '@gluestack-style/react';
diff --git a/example/storybook-nativewind/src/core-components/themed/image-background/index.tsx b/example/storybook-nativewind/src/core-components/themed/image-background/index.tsx
index 2da5eec5ca..f51ae7749b 100644
--- a/example/storybook-nativewind/src/core-components/themed/image-background/index.tsx
+++ b/example/storybook-nativewind/src/core-components/themed/image-background/index.tsx
@@ -1,3 +1,4 @@
+'use client';
 import { styled } from '@gluestack-style/react';
 import { ImageBackground as RNImageBackground } from 'react-native';
 
diff --git a/example/storybook-nativewind/src/core-components/themed/image/index.tsx b/example/storybook-nativewind/src/core-components/themed/image/index.tsx
index 175fa5af3a..f971e2d95e 100644
--- a/example/storybook-nativewind/src/core-components/themed/image/index.tsx
+++ b/example/storybook-nativewind/src/core-components/themed/image/index.tsx
@@ -1,3 +1,4 @@
+'use client';
 import { createImage } from '@gluestack-ui/image';
 import { Image as RNImage } from 'react-native';
 import { styled } from '@gluestack-style/react';
diff --git a/example/storybook-nativewind/src/core-components/themed/input-accessory-view/index.tsx b/example/storybook-nativewind/src/core-components/themed/input-accessory-view/index.tsx
index b1bf65a60d..697e3ddf0a 100644
--- a/example/storybook-nativewind/src/core-components/themed/input-accessory-view/index.tsx
+++ b/example/storybook-nativewind/src/core-components/themed/input-accessory-view/index.tsx
@@ -1,3 +1,4 @@
+'use client';
 import { styled } from '@gluestack-style/react';
 import { InputAccessoryView as RNInputAccessoryView } from 'react-native';
 
diff --git a/example/storybook-nativewind/src/core-components/themed/input/index.tsx b/example/storybook-nativewind/src/core-components/themed/input/index.tsx
index b940b0c5bc..eadc523685 100644
--- a/example/storybook-nativewind/src/core-components/themed/input/index.tsx
+++ b/example/storybook-nativewind/src/core-components/themed/input/index.tsx
@@ -1,3 +1,4 @@
+'use client';
 import { createInput } from '@gluestack-ui/input';
 import { styled, AsForwarder } from '@gluestack-style/react';
 import { View, Pressable, TextInput } from 'react-native';
diff --git a/example/storybook-nativewind/src/core-components/themed/keyboard-avoiding-view/index.tsx b/example/storybook-nativewind/src/core-components/themed/keyboard-avoiding-view/index.tsx
index 380c641bda..b03bd3d692 100644
--- a/example/storybook-nativewind/src/core-components/themed/keyboard-avoiding-view/index.tsx
+++ b/example/storybook-nativewind/src/core-components/themed/keyboard-avoiding-view/index.tsx
@@ -1,3 +1,4 @@
+'use client';
 import { styled, useStyled } from '@gluestack-style/react';
 import { KeyboardAvoidingView as RNKeyboardAvoidingView } from 'react-native';
 
diff --git a/example/storybook-nativewind/src/core-components/themed/linear-gradient/index.tsx b/example/storybook-nativewind/src/core-components/themed/linear-gradient/index.tsx
index 91aee59bb3..4e63b2f3ba 100644
--- a/example/storybook-nativewind/src/core-components/themed/linear-gradient/index.tsx
+++ b/example/storybook-nativewind/src/core-components/themed/linear-gradient/index.tsx
@@ -1,3 +1,4 @@
+'use client';
 import { styled } from '@gluestack-style/react';
 import { View } from 'react-native';
 
diff --git a/example/storybook-nativewind/src/core-components/themed/link/index.tsx b/example/storybook-nativewind/src/core-components/themed/link/index.tsx
index 1305535077..783c796954 100644
--- a/example/storybook-nativewind/src/core-components/themed/link/index.tsx
+++ b/example/storybook-nativewind/src/core-components/themed/link/index.tsx
@@ -1,3 +1,4 @@
+'use client';
 import { styled } from '@gluestack-style/react';
 import { createLink } from '@gluestack-ui/link';
 import { Pressable, Text } from 'react-native';
diff --git a/example/storybook-nativewind/src/core-components/themed/menu/index.tsx b/example/storybook-nativewind/src/core-components/themed/menu/index.tsx
index ecb1ac6e55..a14c05340a 100644
--- a/example/storybook-nativewind/src/core-components/themed/menu/index.tsx
+++ b/example/storybook-nativewind/src/core-components/themed/menu/index.tsx
@@ -1,3 +1,4 @@
+'use client';
 import { AnimatePresence } from '@gluestack-style/animation-resolver';
 import { createMenu } from '@gluestack-ui/menu';
 import { styled } from '@gluestack-style/react';
diff --git a/example/storybook-nativewind/src/core-components/themed/modal/index.tsx b/example/storybook-nativewind/src/core-components/themed/modal/index.tsx
index cdca1e5dfc..9f33dc9afc 100644
--- a/example/storybook-nativewind/src/core-components/themed/modal/index.tsx
+++ b/example/storybook-nativewind/src/core-components/themed/modal/index.tsx
@@ -1,3 +1,4 @@
+'use client';
 import { createModal } from '@gluestack-ui/modal';
 import {
   AnimatePresence,
diff --git a/example/storybook-nativewind/src/core-components/themed/popover/index.tsx b/example/storybook-nativewind/src/core-components/themed/popover/index.tsx
index c028680638..f16864d9fd 100644
--- a/example/storybook-nativewind/src/core-components/themed/popover/index.tsx
+++ b/example/storybook-nativewind/src/core-components/themed/popover/index.tsx
@@ -1,3 +1,4 @@
+'use client';
 import { View, ScrollView, Pressable } from 'react-native';
 import { styled } from '@gluestack-style/react';
 import {
diff --git a/example/storybook-nativewind/src/core-components/themed/pressable/index.tsx b/example/storybook-nativewind/src/core-components/themed/pressable/index.tsx
index cc877034a5..a8544374c6 100644
--- a/example/storybook-nativewind/src/core-components/themed/pressable/index.tsx
+++ b/example/storybook-nativewind/src/core-components/themed/pressable/index.tsx
@@ -1,3 +1,4 @@
+'use client';
 import { styled } from '@gluestack-style/react';
 import { Pressable as RNPressable } from 'react-native';
 import { createPressable } from '@gluestack-ui/pressable';
diff --git a/example/storybook-nativewind/src/core-components/themed/progress/index.tsx b/example/storybook-nativewind/src/core-components/themed/progress/index.tsx
index 9c0fe8c862..e9ea411f5f 100644
--- a/example/storybook-nativewind/src/core-components/themed/progress/index.tsx
+++ b/example/storybook-nativewind/src/core-components/themed/progress/index.tsx
@@ -1,3 +1,4 @@
+'use client';
 import { styled } from '@gluestack-style/react';
 import { createProgress } from '@gluestack-ui/progress';
 import { View } from 'react-native';
diff --git a/example/storybook-nativewind/src/core-components/themed/radio/index.tsx b/example/storybook-nativewind/src/core-components/themed/radio/index.tsx
index cfcfe42552..f439558ef5 100644
--- a/example/storybook-nativewind/src/core-components/themed/radio/index.tsx
+++ b/example/storybook-nativewind/src/core-components/themed/radio/index.tsx
@@ -1,3 +1,4 @@
+'use client';
 import { createRadio } from '@gluestack-ui/radio';
 import { Pressable, View, Platform, Text } from 'react-native';
 import { styled, AsForwarder } from '@gluestack-style/react';
diff --git a/example/storybook-nativewind/src/core-components/themed/refresh-control/index.tsx b/example/storybook-nativewind/src/core-components/themed/refresh-control/index.tsx
index 95e86d5eeb..c048d911c5 100644
--- a/example/storybook-nativewind/src/core-components/themed/refresh-control/index.tsx
+++ b/example/storybook-nativewind/src/core-components/themed/refresh-control/index.tsx
@@ -1,3 +1,4 @@
+'use client';
 import { styled } from '@gluestack-style/react';
 import { RefreshControl as RNRefreshControl } from 'react-native';
 
diff --git a/example/storybook-nativewind/src/core-components/themed/safe-area-view/index.tsx b/example/storybook-nativewind/src/core-components/themed/safe-area-view/index.tsx
index 34e9630893..6d2e54d530 100644
--- a/example/storybook-nativewind/src/core-components/themed/safe-area-view/index.tsx
+++ b/example/storybook-nativewind/src/core-components/themed/safe-area-view/index.tsx
@@ -1,5 +1,5 @@
+'use client';
 import { SafeAreaView as RNSafeAreaView } from 'react-native';
-
 import { styled } from '@gluestack-style/react';
 
 const StyledRoot = styled(RNSafeAreaView);
diff --git a/example/storybook-nativewind/src/core-components/themed/scroll-view/index.tsx b/example/storybook-nativewind/src/core-components/themed/scroll-view/index.tsx
index 4b317f5b97..bd85ceaa09 100644
--- a/example/storybook-nativewind/src/core-components/themed/scroll-view/index.tsx
+++ b/example/storybook-nativewind/src/core-components/themed/scroll-view/index.tsx
@@ -1,3 +1,4 @@
+'use client';
 import { ScrollView as RNScrollView } from 'react-native';
 
 import { styled, useStyled, propertyTokenMap } from '@gluestack-style/react';
diff --git a/example/storybook-nativewind/src/core-components/themed/section-list/index.tsx b/example/storybook-nativewind/src/core-components/themed/section-list/index.tsx
index cf549c9cd2..fc1058b433 100644
--- a/example/storybook-nativewind/src/core-components/themed/section-list/index.tsx
+++ b/example/storybook-nativewind/src/core-components/themed/section-list/index.tsx
@@ -1 +1,2 @@
+'use client';
 export { SectionList } from 'react-native';
diff --git a/example/storybook-nativewind/src/core-components/themed/select/index.tsx b/example/storybook-nativewind/src/core-components/themed/select/index.tsx
index f2a360ddfc..0dc46a4cef 100644
--- a/example/storybook-nativewind/src/core-components/themed/select/index.tsx
+++ b/example/storybook-nativewind/src/core-components/themed/select/index.tsx
@@ -1,3 +1,4 @@
+'use client';
 import { H1, H2, H3, H4, H5, H6 } from '@expo/html-elements';
 import {
   AnimatePresence,
diff --git a/example/storybook-nativewind/src/core-components/themed/slider/index.tsx b/example/storybook-nativewind/src/core-components/themed/slider/index.tsx
index ada50c2688..b80be7fa0d 100644
--- a/example/storybook-nativewind/src/core-components/themed/slider/index.tsx
+++ b/example/storybook-nativewind/src/core-components/themed/slider/index.tsx
@@ -1,3 +1,4 @@
+'use client';
 import { styled } from '@gluestack-style/react';
 import { createSlider } from '@gluestack-ui/slider';
 import { Pressable } from 'react-native';
diff --git a/example/storybook-nativewind/src/core-components/themed/spinner/index.tsx b/example/storybook-nativewind/src/core-components/themed/spinner/index.tsx
index b435326f7a..5d46996695 100644
--- a/example/storybook-nativewind/src/core-components/themed/spinner/index.tsx
+++ b/example/storybook-nativewind/src/core-components/themed/spinner/index.tsx
@@ -1,3 +1,4 @@
+'use client';
 import { ActivityIndicator } from 'react-native';
 import { styled } from '@gluestack-style/react';
 import { createSpinner } from '@gluestack-ui/spinner';
diff --git a/example/storybook-nativewind/src/core-components/themed/status-bar/index.tsx b/example/storybook-nativewind/src/core-components/themed/status-bar/index.tsx
index b1e74de9fe..279dec8b32 100644
--- a/example/storybook-nativewind/src/core-components/themed/status-bar/index.tsx
+++ b/example/storybook-nativewind/src/core-components/themed/status-bar/index.tsx
@@ -1,3 +1,4 @@
+'use client';
 import { styled } from '@gluestack-style/react';
 import { StatusBar as RNStatusBar } from 'react-native';
 
diff --git a/example/storybook-nativewind/src/core-components/themed/switch/index.tsx b/example/storybook-nativewind/src/core-components/themed/switch/index.tsx
index 6bbba26105..263977de20 100644
--- a/example/storybook-nativewind/src/core-components/themed/switch/index.tsx
+++ b/example/storybook-nativewind/src/core-components/themed/switch/index.tsx
@@ -1,3 +1,4 @@
+'use client';
 import { styled } from '@gluestack-style/react';
 import { Switch as RNSwitch } from 'react-native';
 import { createSwitch } from '@gluestack-ui/switch';
diff --git a/example/storybook-nativewind/src/core-components/themed/text/index.tsx b/example/storybook-nativewind/src/core-components/themed/text/index.tsx
index 7d13e17a1f..0ced125216 100644
--- a/example/storybook-nativewind/src/core-components/themed/text/index.tsx
+++ b/example/storybook-nativewind/src/core-components/themed/text/index.tsx
@@ -1,3 +1,4 @@
+'use client';
 import { Text as RNText } from 'react-native';
 import { styled } from '@gluestack-style/react';
 
diff --git a/example/storybook-nativewind/src/core-components/themed/textarea/index.tsx b/example/storybook-nativewind/src/core-components/themed/textarea/index.tsx
index b8844a5e87..374a6b2061 100644
--- a/example/storybook-nativewind/src/core-components/themed/textarea/index.tsx
+++ b/example/storybook-nativewind/src/core-components/themed/textarea/index.tsx
@@ -1,5 +1,5 @@
+'use client';
 import { createTextarea } from '@gluestack-ui/textarea';
-
 import { View, TextInput } from 'react-native';
 import { styled } from '@gluestack-style/react';
 const StyledRoot = styled(
diff --git a/example/storybook-nativewind/src/core-components/themed/toast/index.tsx b/example/storybook-nativewind/src/core-components/themed/toast/index.tsx
index b14e5e74b2..5e44f009e5 100644
--- a/example/storybook-nativewind/src/core-components/themed/toast/index.tsx
+++ b/example/storybook-nativewind/src/core-components/themed/toast/index.tsx
@@ -1,3 +1,4 @@
+'use client';
 import { createToast, createToastHook } from '@gluestack-ui/toast';
 import {
   AnimatePresence,
diff --git a/example/storybook-nativewind/src/core-components/themed/tooltip/index.tsx b/example/storybook-nativewind/src/core-components/themed/tooltip/index.tsx
index 905e49428b..b09ff557a7 100644
--- a/example/storybook-nativewind/src/core-components/themed/tooltip/index.tsx
+++ b/example/storybook-nativewind/src/core-components/themed/tooltip/index.tsx
@@ -1,3 +1,4 @@
+'use client';
 import { createTooltip } from '@gluestack-ui/tooltip';
 import {
   AnimatePresence,
diff --git a/example/storybook-nativewind/src/core-components/themed/view/index.tsx b/example/storybook-nativewind/src/core-components/themed/view/index.tsx
index 8f32b6b168..ae97908127 100644
--- a/example/storybook-nativewind/src/core-components/themed/view/index.tsx
+++ b/example/storybook-nativewind/src/core-components/themed/view/index.tsx
@@ -1 +1,2 @@
+'use client';
 export { View } from 'react-native';
diff --git a/example/storybook-nativewind/src/core-components/themed/virtualized-list/index.tsx b/example/storybook-nativewind/src/core-components/themed/virtualized-list/index.tsx
index be3e260683..b90d3a60f5 100644
--- a/example/storybook-nativewind/src/core-components/themed/virtualized-list/index.tsx
+++ b/example/storybook-nativewind/src/core-components/themed/virtualized-list/index.tsx
@@ -1 +1,2 @@
+'use client';
 export { VirtualizedList } from 'react-native';
diff --git a/example/storybook-nativewind/src/core-components/themed/vstack/index.tsx b/example/storybook-nativewind/src/core-components/themed/vstack/index.tsx
index 90c3cd8bc5..8ff64e08ef 100644
--- a/example/storybook-nativewind/src/core-components/themed/vstack/index.tsx
+++ b/example/storybook-nativewind/src/core-components/themed/vstack/index.tsx
@@ -1,3 +1,4 @@
+'use client';
 import { styled } from '@gluestack-style/react';
 import { View } from 'react-native';