docs: update docs

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';

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';

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';