feat(util): createSxComponent

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

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

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

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;
+ };
+}