diff --git a/example/storybook/src/api/ExtendComponents/ExtendComponents.tsx b/example/storybook/src/api/ExtendComponents/ExtendComponents.tsx
index 9c99e08d8..1c3eebb86 100644
--- a/example/storybook/src/api/ExtendComponents/ExtendComponents.tsx
+++ b/example/storybook/src/api/ExtendComponents/ExtendComponents.tsx
@@ -1,48 +1,19 @@
 import React from 'react';
 import { View, Text } from 'react-native';
-import { Wrapper } from '../../components/Wrapper';
-import { Camera } from 'lucide-react-native';
-import { StyledHeading } from '../../ui-components/AsForwarder';
-import { H2 } from '@expo/html-elements';
-import {
-  StyledProvider,
-  createComponents,
-  styled,
-} from '@gluestack-style/react';
+import { StyledProvider, styled } from '@gluestack-style/react';
 import { config } from '../../components/nb.config';
 
-config.components = {
-  Box: {
-    theme: {
-      bg: '$red500',
-      p: '$10',
-      // props: {
-      // ':initial': {
-      //   scale: 0.5,
-      // },
-      // ':animate': {
-      //   scale: 1,
-      // },
-      // props: {
-      //   p: '$5',
-      // },
-      // },
-    },
-  },
-};
-
 const Box = styled(
-  AnimatedView,
-  {},
+  View,
+  {
+    bg: '$amber400',
+    p: '$10',
+  },
   {
     componentName: 'Box',
   }
 );
-import Svg from 'react-native-svg';
-import { AnimatedView } from '@gluestack-style/animation-resolver';
-
 export function ExtendComponentsExample() {
-  const [state, setState] = React.useState(false);
   return (
     <StyledProvider config={config} colorMode={'dark'}>
       <View
diff --git a/packages/react/CHANGELOG.md b/packages/react/CHANGELOG.md
index 050eca451..0caade931 100644
--- a/packages/react/CHANGELOG.md
+++ b/packages/react/CHANGELOG.md
@@ -1,5 +1,11 @@
 # @gluestack-style/react
 
+## 1.0.10
+
+### Patch Changes
+
+- Fixed theme and styled circular dependency
+
 ## 1.0.9
 
 ### Patch Changes
diff --git a/packages/react/package.json b/packages/react/package.json
index 639343744..011410b46 100644
--- a/packages/react/package.json
+++ b/packages/react/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@gluestack-style/react",
   "description": "A universal & performant styling library for React Native, Next.js & React",
-  "version": "1.0.9",
+  "version": "1.0.10",
   "keywords": [
     "React Native",
     "Next.js",
diff --git a/packages/react/src/Theme.tsx b/packages/react/src/Theme.tsx
index 451a66184..77f265f57 100644
--- a/packages/react/src/Theme.tsx
+++ b/packages/react/src/Theme.tsx
@@ -1,6 +1,6 @@
 import { View } from 'react-native';
+import type { ViewProps } from 'react-native';
 import * as React from 'react';
-import { styled } from './styled';
 type Config = any;
 
 export const defaultConfig: { theme?: string } = {
@@ -10,16 +10,14 @@ export const defaultConfig: { theme?: string } = {
 const defaultContextData: Config = defaultConfig;
 const ThemeContext = React.createContext<Config>(defaultContextData);
 // Can be discussed should we provide flex 1 by default or not.
-const StyledView = styled(
-  View,
-  {
-    // flex: 1
-  },
-  { componentName: 'GluestackThemeView' }
-);
 
-// @ts-ignore
-export const Theme: typeof StyledView = ({ children, name, ...props }) => {
+export const Theme = ({
+  children,
+  name,
+  ...props
+}: ViewProps & {
+  name: string;
+}) => {
   const contextValue = React.useMemo(() => {
     return {
       theme: name,
@@ -29,9 +27,9 @@ export const Theme: typeof StyledView = ({ children, name, ...props }) => {
   return (
     <ThemeContext.Provider value={contextValue}>
       {/* @ts-ignore */}
-      <StyledView dataSet={{ 'theme-id': name }} {...props}>
+      <View dataSet={{ 'theme-id': name }} {...props}>
         {children}
-      </StyledView>
+      </View>
     </ThemeContext.Provider>
   );
 };