I make reusable component like this:
export type ElementKeysType = | keyof ViewStyle | keyof TextStyle | keyof ImageStyle;export const handleElementProps = <T>(obj: T, keys: ElementKeysType[]) => { const stylesProps = Object.fromEntries( keys.filter(key => key in obj).map(key => [key, obj[key as keyof T]]), ); const elementProps = Object.fromEntries( Object.keys(obj) .filter(key => !keys.includes(key as ElementKeysType)) .map(key => [key, obj[key as keyof T]]), ); const elementStyles = createStyle(stylesProps); return [elementStyles, elementProps];};const createStyle = (styles: ViewStyle | ImageStyle | TextStyle) => StyleSheet.create({ element: styles, });const createWithStylePropsComponent =<P extends object>( Component: React.ComponentClass<P, any> | React.FunctionComponent<P>, ): React.FunctionComponent<P> => ({ style, ...props }: P & { style?: StyleProp<ElementKeysType> }) => { // find style keys from props const [elementStyles, elementNativeProps] = handleElementProps(props, [ ...RNViewStyleKeys, ...RNTextStyleKeys, ...RNImageStylekeys, ]); return (<Component {...(elementNativeProps as P)} // make component receive style prop style={[elementStyles.element, style]} /> ); };export const DynamicView = createWithStylePropsComponent< ViewProps & ViewProps['style']>(View);export const DynamicText = createWithStylePropsComponent< TextProps & TextProps['style']>(Text);export const DynamicTouchableOpacity = createWithStylePropsComponent< TouchableOpacityProps & TouchableOpacityProps['style']>(TouchableOpacity);export const DynamicImage = createWithStylePropsComponent< ImageProps & ImageProps['style']>(Image);export const DynamicPressable = createWithStylePropsComponent< PressableProps['style'] & PressableProps>(Pressable);when i use it, it's like this:
<DynamicTouchableOpacity flexDirection="row" alignItems="center" justifyContent="space-between" paddingLeft={Pixel(24)} paddingVertical={Pixel(24)} onPress={onPress}><View><DynamicText color={appTheme.typographyHighEmphasis} fontSize={Pixel(15)} lineHeight={Pixel(24)} letterSpacing={Pixel(0.75)} fontFamily={fonts.poppinsMedium}> {displayDate}</DynamicText><DynamicText color={appTheme.typographyLowEmphasis} fontSize={Pixel(13)} lineHeight={Pixel(22)} letterSpacing={Pixel(0.25)} fontFamily={fonts.poppinsRegular}> {remarks}</DynamicText></View><DynamicView alignItems="center" flexDirection="row" paddingRight={Pixel(8)}><DynamicView marginRight={Pixel(12)}><DynamicText fontSize={Pixel(11)} lineHeight={Pixel(16)} letterSpacing={Pixel(0.25)} fontFamily={fonts.poppinsMedium} textAlign="right" style={[ { color: isDebitTransaction ? appTheme.typographyPrimary : appTheme.typographyAccent, }, ]}> {label}</DynamicText><DynamicText textAlign="right" fontSize={Pixel(13)} lineHeight={Pixel(22)} letterSpacing={Pixel(0.25)} fontFamily={fonts.poppinsSemiBold} style={[ { color: isDebitTransaction ? appTheme.typographyPrimary : appTheme.typographyAccent, }, ]}> {amount}</DynamicText> {isDebitTransaction && (<DynamicText color={appTheme.typographyLowEmphasis} fontSize={Pixel(11)} lineHeight={Pixel(16)} letterSpacing={Pixel(0.25)} fontFamily={fonts.poppinsMedium}> {`Due ${dueDate}`}</DynamicText> )}</DynamicView><Icon name="keyboard-arrow-right" size={Pixel(24)} color={appTheme.typographyLowEmphasis} /></DynamicView></DynamicTouchableOpacity>what i like about it is that with typescript auto suggestion, i save time styling and it's easy to distinguish style props rather than think of another property on StyleSheet as the app gets big and native props for component is auto suggested.
But does doing this slows the app? i mean, every component goes on reusable hook createWithStylePropsComponent. But my idea is like this and maybe want to know suggestions how to improve it?