diff --git a/doc/docs/example-components/styled-image.mdx b/doc/docs/example-components/styled-image.mdx
index 5f2ba982..6017faf7 100644
--- a/doc/docs/example-components/styled-image.mdx
+++ b/doc/docs/example-components/styled-image.mdx
@@ -4,6 +4,10 @@ sidebar_position: 4
 
 # StyledImage
 
+:::tip
+We recommand use `createSxComponent` to `Image` of React Native.
+:::
+
 ```tsx title='StyledImage.tsx'
 import type { PropsWithChildren, Ref } from 'react';
 import React, { forwardRef } from 'react';
diff --git a/doc/docs/example-components/styled-view.mdx b/doc/docs/example-components/styled-view.mdx
index 258dd5e7..0c4fd78f 100644
--- a/doc/docs/example-components/styled-view.mdx
+++ b/doc/docs/example-components/styled-view.mdx
@@ -3,6 +3,10 @@ sidebar_position: 1
 title: StyledView
 ---
 
+:::tip
+We recommand use `createSxComponent` to `View` of React Native.
+:::
+
 ```tsx title='StyledView.tsx'
 import { forwardRef, Ref, PropsWithChildren } from 'react';
 import { View, ViewProps } from 'react-native';
diff --git a/doc/docs/usage/component.mdx b/doc/docs/usage/component.mdx
index 93c42e42..7f8f9d34 100644
--- a/doc/docs/usage/component.mdx
+++ b/doc/docs/usage/component.mdx
@@ -35,6 +35,24 @@ How to use the completed `StyledView` component is as follows.
 
 It can be defined as follows:
 
+
+### Method 1 - use `createSxComponent` HOC
+
+```tsx title="StyledView.tsx"
+import type { ComponentProps } from 'react';
+import { View } from 'react-native';
+import { createSxComponent } from '@react-native-styled-system/core';
+
+export const StyledView = createSxComponent(View)();
+export type StyledViewProps = ComponentProps<typeof StyledView>;
+```
+
+`createSxComponent` and `createSxTextComponent` are simple but may have limitations in their usage.
+
+These HOCs simply add style-related fields to the Props and create a style object to pass to the passed view.
+
+### Method 2 - use `useSx` hook manually
+
 ```tsx title="StyledView.tsx"
 import { forwardRef, Ref, PropsWithChildren } from 'react';
 import { View, ViewProps } from 'react-native';
diff --git a/example/src/components/StyledImage.tsx b/example/src/components/StyledImage.tsx
deleted file mode 100644
index 475b7209..00000000
--- a/example/src/components/StyledImage.tsx
+++ /dev/null
@@ -1,17 +0,0 @@
-import type { PropsWithChildren, Ref } from 'react';
-import React, { forwardRef } from 'react';
-import type { ImageProps, ImageStyle } from 'react-native';
-import { Image } from 'react-native';
-import type { SxProps } from '@react-native-styled-system/core';
-import { useSx } from '@react-native-styled-system/core';
-
-type StyledImageProps = PropsWithChildren<ImageProps & SxProps>;
-
-const StyledImage = forwardRef((props: StyledImageProps, ref: Ref<Image>) => {
-  const { getStyle, filteredProps } = useSx<ImageStyle>(props);
-
-  return <Image ref={ref} style={getStyle()} {...filteredProps} />;
-});
-
-export { StyledImage };
-export type { StyledImageProps };
diff --git a/example/src/components/StyledView.tsx b/example/src/components/StyledView.tsx
deleted file mode 100644
index ab84da55..00000000
--- a/example/src/components/StyledView.tsx
+++ /dev/null
@@ -1,17 +0,0 @@
-import type { PropsWithChildren, Ref } from 'react';
-import React, { forwardRef } from 'react';
-import type { ViewProps } from 'react-native';
-import { View } from 'react-native';
-import type { SxProps } from '@react-native-styled-system/core';
-import { useSx } from '@react-native-styled-system/core';
-
-type StyledViewProps = PropsWithChildren<ViewProps & SxProps>;
-
-const StyledView = forwardRef((props: StyledViewProps, ref: Ref<View>) => {
-  const { getStyle, filteredProps } = useSx(props);
-
-  return <View ref={ref} style={getStyle()} {...filteredProps} />;
-});
-
-export { StyledView };
-export type { StyledViewProps };
diff --git a/example/src/components/StyledViews.tsx b/example/src/components/StyledViews.tsx
new file mode 100644
index 00000000..74d2bfa9
--- /dev/null
+++ b/example/src/components/StyledViews.tsx
@@ -0,0 +1,9 @@
+import type { ComponentProps } from 'react';
+import { Image, View } from 'react-native';
+import { createSxComponent } from '@react-native-styled-system/core';
+
+export const StyledView = createSxComponent(View)();
+export type StyledViewProps = ComponentProps<typeof StyledView>;
+
+export const StyledImage = createSxComponent(Image)();
+export type StyledImageProps = ComponentProps<typeof StyledImage>;
diff --git a/example/src/screen/Home.tsx b/example/src/screen/Home.tsx
index 05436d3e..2c868bf6 100644
--- a/example/src/screen/Home.tsx
+++ b/example/src/screen/Home.tsx
@@ -2,9 +2,8 @@ import React from 'react';
 import ExpoStatusBar from 'expo-status-bar/build/ExpoStatusBar';
 
 import { StyledButton } from '../components/StyledButton';
-import { StyledImage } from '../components/StyledImage';
 import { StyledScrollView } from '../components/StyledScrollView';
-import { StyledView } from '../components/StyledView';
+import { StyledImage, StyledView } from '../components/StyledViews';
 import { Txt } from '../components/Txt';
 import { useDarkTheme } from '../theme/AppThemeProvider';
 
diff --git a/packages/core/src/index.ts b/packages/core/src/index.ts
index ea8d265c..75dd8b08 100644
--- a/packages/core/src/index.ts
+++ b/packages/core/src/index.ts
@@ -6,3 +6,4 @@ export * from './hook/useSxStyle';
 export * from './hook/useSxTokens';
 export * from './provider/StyledSystemProvider';
 export * from './util/propsToThemedStyle';
+export * from './util/createSxComponent';
diff --git a/packages/core/src/util/createSxComponent.tsx b/packages/core/src/util/createSxComponent.tsx
new file mode 100644
index 00000000..fa0ac53e
--- /dev/null
+++ b/packages/core/src/util/createSxComponent.tsx
@@ -0,0 +1,33 @@
+import type { ComponentType } from 'react';
+import React, { forwardRef } from 'react';
+
+import type { SxProps, TextSxProps } from '../@types/SxProps';
+import { useSx } from '../hook/useSx';
+
+export function createSxComponent<Props extends object, Ref>(Base: ComponentType<Props>) {
+  return () => {
+    const Transformed = forwardRef<Ref, Props & SxProps>(function (props, ref) {
+      const { filteredProps, getStyle } = useSx(props);
+
+      return <Base {...(filteredProps as any)} style={getStyle()} ref={ref as any} />;
+    });
+
+    Transformed.displayName = `Sx.${Base.displayName || Base.name || 'NoName'}`;
+
+    return Transformed;
+  };
+}
+
+export function createSxTextComponent<Props extends object, Ref>(Base: ComponentType<Props>) {
+  return () => {
+    const Transformed = forwardRef<Ref, Props & TextSxProps>(function (props, ref) {
+      const { filteredProps, getStyle } = useSx(props, { styleType: 'TextStyle' });
+
+      return <Base {...(filteredProps as any)} style={getStyle()} ref={ref as any} />;
+    });
+
+    Transformed.displayName = `Sx.${Base.displayName || Base.name || 'NoName'}`;
+
+    return Transformed;
+  };
+}