diff --git a/example/storybook/src/api/DescendantsStyles/ContextBasedStyles.tsx b/example/storybook/src/api/DescendantsStyles/ContextBasedStyles.tsx
index 3e8c6b700..67f8610cd 100644
--- a/example/storybook/src/api/DescendantsStyles/ContextBasedStyles.tsx
+++ b/example/storybook/src/api/DescendantsStyles/ContextBasedStyles.tsx
@@ -15,28 +15,31 @@ import {
 } from 'react-native';
 import { AsForwarder, styled, Theme } from '@gluestack-style/react';
 import { Wrapper } from '../../components/Wrapper';
+import { AddIcon, Box, Icon } from '@gluestack/design-system';
 // import { AddIcon } from '@gluestack/design-system';
+import { AlertCircle, Circle } from 'lucide-react-native';
 
 const Pressable = styled(
   RNPressable,
   {
-    'bg': '$red500',
+    bg: '$red500',
+    p: '$2',
     // 'bg': '$red600',
-    'w': 100,
-    'h': 100,
-    '_light': {
-      bg: '$red600',
-    },
-    '@base': {
-      bg: '$blue500',
-    },
-    ':hover': {
-      bg: '$red500',
-    },
+    // 'w': 100,
+    // 'h': 100,
+    // '_light': {
+    //   bg: '$red600',
+    // },
+    // '@base': {
+    //   bg: '$blue500',
+    // },
+    // ':hover': {
+    //   bg: '$red500',
+    // },
   },
   {
     componentName: 'Pressable',
-    descendantStyle: ['_text'],
+    // descendantStyle: ['_text'],
   }
 );
 
@@ -48,6 +51,43 @@ const Text = styled(
   }
 );
 
+const MyIcon = styled(
+  AsForwarder,
+  {
+    variants: {
+      size: {
+        sm: {
+          width: 32,
+          height: 32,
+          props: {
+            size: 32,
+          },
+        },
+        md: {
+          props: {
+            size: 32,
+          },
+          width: '$4',
+          height: '$4',
+        },
+      },
+    },
+    props: {
+      size: 'sm',
+    },
+  },
+  {
+    componentName: 'MyIcon',
+  }
+);
+
+const MyNewIcon = styled(
+  MyIcon,
+  {},
+  {
+    componentName: 'MyNewIcon',
+  }
+);
 export function ContextBasedStyles() {
   return (
     <Wrapper colorMode="dark">
@@ -60,48 +100,52 @@ export function ContextBasedStylesContent() {
   // return <MyFlatList></MyFlatList>;
 
   const [tabName, setTabName] = useState(true);
+  const [state, setState] = useState(false);
 
   const handleTabChange = (tabName: any) => {
     setTabName(tabName);
   };
 
   // const color = tabName ? '$red500' : '$green500';
+  // return (
+  //   <>
+  //     {/* <Theme name={'modern'}>
+  //       <Box states={{ hover: true }}></Box>
+  //     </Theme>
+  //     <Box states={{ hover: true }}></Box> */}
+  //     {/* <Icon as={Circle} size="md" color="$red500" />
+  //     <Pressable
+  //       onPress={() => {
+  //         handleTabChange(!tabName);
+  //       }}
+  //       bg="$amber400"
+  //       h="$50"
+  //       w="$50"
+  //     >
+  //       <Text
+  //         sx={{
+  //           _dark: {
+  //             color: tabName ? '$red500' : '$green500',
+  //           },
+  //         }}
+  //       >
+  //         hello world
+  //       </Text>
+  //     </Pressable> */}
+  //   </>
+  // );
+
   return (
     <>
-      {/* <Theme name={'modern'}>
-        <Box states={{ hover: true }}></Box>
-      </Theme>
-      <Box states={{ hover: true }}></Box> */}
-
-      <Pressable
-        // onPress={() => handleTabChange(tabName)}
-        onPress={() => {
-          handleTabChange(!tabName);
-        }}
-        bg="$amber400"
-        h="$50"
-        w="$50"
-      >
-        <Text
-          // color={tabName ? '$red500' : '$green500'}
-          sx={{
-            // color: tabName ? '$red500' : '$green500',
-            _dark: {
-              // color: '$red500',
-              color: tabName ? '$red500' : '$green500',
-            },
-          }}
-        >
-          hello world
-        </Text>
-      </Pressable>
+      <MyNewIcon as={AlertCircle} size="sm"></MyNewIcon>
     </>
   );
-
   return (
     <>
       <RNPressable
-        onPress={handlePress}
+        onPress={() => {
+          setState(!state);
+        }}
         style={{
           height: 50,
           width: 200,
@@ -111,16 +155,16 @@ export function ContextBasedStylesContent() {
           left: 0,
         }}
       >
-        <Text style={{ color: 'black' }}>Mount</Text>
+        <Text style={{ color: 'black' }}>{state ? 'Unmount' : 'Mount'}</Text>
       </RNPressable>
       {/* <MyPressable>
         <RNText>Hello</RNText>
       </MyPressable> */}
       {/* {state && <MyList />
       } */}
-      <Box pointerEvents="none" style={{ display: state ? 'flex' : 'none' }}>
-        <MyList />
-      </Box>
+      {/* <Box pointerEvents="none" style={{ display: state ? 'flex' : 'none' }}> */}
+      {state && <MyList />}
+      {/* </Box> */}
     </>
   );
 }
@@ -132,7 +176,7 @@ const MyList = React.memo(() => {
   }, []);
   const data = useMemo(
     () =>
-      Array(2000)
+      Array(1)
         .fill(0)
         .map((_, index) => `Item ${index}`),
     []
@@ -140,21 +184,26 @@ const MyList = React.memo(() => {
 
   const renderItem = useCallback(
     (item: any) => (
-      <MyPressable key={item}>
-        <RNText>{item}</RNText>
-      </MyPressable>
+      <Pressable
+        key={item}
+        sx={{
+          bg: '$amber400',
+        }}
+      >
+        {/* <RNText>{item}</RNText> */}
+      </Pressable>
     ),
     []
   );
 
-  const renderItem2 = useCallback(
-    (item: any) => (
-      <RNPressable key={item} style={styleshet.style}>
-        <RNText>{item}</RNText>r
-      </RNPressable>
-    ),
-    []
-  );
+  // const renderItem2 = useCallback(
+  //   (item: any) => (
+  //     <RNPressable key={item} style={styleshet.style}>
+  //       <RNText>{item}</RNText>r
+  //     </RNPressable>
+  //   ),
+  //   []
+  // );
   return <>{data.map(renderItem)}</>;
 });
 export default ContextBasedStyles;
diff --git a/packages/react/src/styled.tsx b/packages/react/src/styled.tsx
index 996bac3f3..f19b82ea2 100644
--- a/packages/react/src/styled.tsx
+++ b/packages/react/src/styled.tsx
@@ -1723,15 +1723,34 @@ export function verboseStyled<P, Variants, ComCon>(
       resolvedStyleMemo = StyleSheet.flatten(resolvedStyleMemo);
     }
 
-    const component = !AsComp ? (
-      <Component {...resolvedStyleProps} style={resolvedStyleMemo} ref={ref}>
-        {children}
-      </Component>
-    ) : (
-      <AsComp {...resolvedStyleProps} style={resolvedStyleMemo} ref={ref}>
-        {children}
-      </AsComp>
-    );
+    let component;
+    if (AsComp) {
+      //@ts-ignore
+      if (Component.isStyledComponent) {
+        component = (
+          <Component
+            {...resolvedStyleProps}
+            style={resolvedStyleMemo}
+            as={AsComp}
+            ref={ref}
+          >
+            {children}
+          </Component>
+        );
+      } else {
+        component = (
+          <AsComp {...resolvedStyleProps} style={resolvedStyleMemo} ref={ref}>
+            {children}
+          </AsComp>
+        );
+      }
+    } else {
+      component = (
+        <Component {...resolvedStyleProps} style={resolvedStyleMemo} ref={ref}>
+          {children}
+        </Component>
+      );
+    }
 
     if (containsDescendant) {
       return (
@@ -1755,6 +1774,9 @@ export function verboseStyled<P, Variants, ComCon>(
     ? 'Styled' + displayName
     : 'StyledComponent';
 
+  //@ts-ignore
+  StyledComp.isStyledComponent = true;
+
   return StyledComp;
 }