i want to create a function that returns the component with the props i want to assign with it? something like this, a reusable component for Text/View/Pressable with extracted styles as props, i personally find it's faster to style with styles as props in React Native:
const DynamicView = ({ children, backfaceVisibility, backgroundColor, borderBottomColor, borderBottomEndRadius, borderBottomLeftRadius, borderBottomRightRadius, borderBottomStartRadius, borderBottomWidth, borderColor, borderEndColor, borderLeftColor, borderLeftWidth, borderRadius, borderRightColor, borderRightWidth, borderStartColor, borderStyle, borderTopColor, borderTopEndRadius, borderTopLeftRadius, borderTopRightRadius, borderTopStartRadius, borderTopWidth, borderWidth, opacity, alignContent, alignItems, alignSelf, aspectRatio, borderEndWidth, borderStartWidth, bottom, display, end, flex, flexBasis, flexDirection, flexGrow, flexShrink, flexWrap, height, justifyContent, left, margin, marginBottom, marginEnd, marginHorizontal, marginLeft, marginRight, marginStart, marginTop, marginVertical, maxHeight, maxWidth, minHeight, minWidth, overflow, padding, paddingBottom, paddingEnd, paddingHorizontal, paddingLeft, paddingRight, paddingStart, paddingTop, paddingVertical, position, right, start, top, width, zIndex, direction, shadowColor, shadowOffset, shadowOpacity, shadowRadius, transform, style, ...rest}: ViewStyle & ViewProps) => (<View style={[ { backfaceVisibility, backgroundColor, borderBottomColor, borderBottomEndRadius, borderBottomLeftRadius, borderBottomRightRadius, borderBottomStartRadius, borderBottomWidth, borderColor, borderEndColor, borderLeftColor, borderLeftWidth, borderRadius, borderRightColor, borderRightWidth, borderStartColor, borderStyle, borderTopColor, borderTopEndRadius, borderTopLeftRadius, borderTopRightRadius, borderTopStartRadius, borderTopWidth, borderWidth, opacity, alignContent, alignItems, alignSelf, aspectRatio, borderEndWidth, borderStartWidth, bottom, display, end, flex, flexBasis, flexDirection, flexGrow, flexShrink, flexWrap, height, justifyContent, left, margin, marginBottom, marginEnd, marginHorizontal, marginLeft, marginRight, marginStart, marginTop, marginVertical, maxHeight, maxWidth, minHeight, minWidth, overflow, padding, paddingBottom, paddingEnd, paddingHorizontal, paddingLeft, paddingRight, paddingStart, paddingTop, paddingVertical, position, right, start, top, width, zIndex, direction, shadowColor, shadowOffset, shadowOpacity, shadowRadius, transform, } as StyleProp<ViewStyle>, style && style, ]} {...rest}> {children}</View>);this is what i want to do, a reusable function that accepts a Component, e.g. Text, View, Pressable and assign the styles props:
import React from 'react';import { Pressable, TextStyle, View, ViewProps, ViewStyle } from 'react-native';type Comp = typeof View | typeof Pressable;export const createDynamicElement = (RElement: Comp) => { // How to dynamically pass TS props? // e.g. for Pressable class DynamicElement extends React.Component< (ViewStyle | TextStyle) & typeof RElement> { render(): React.ReactNode { // How to dynamically extract the styles key? // const stylesKeys = keyExtractor(this.props) const { backfaceVisibility, backgroundColor, borderBottomColor, borderBottomEndRadius, borderBottomLeftRadius, borderBottomRightRadius, borderBottomStartRadius, borderBottomWidth, borderColor, borderEndColor, borderLeftColor, borderLeftWidth, borderRadius, borderRightColor, borderRightWidth, borderStartColor, borderStyle, borderTopColor, borderTopEndRadius, borderTopLeftRadius, borderTopRightRadius, borderTopStartRadius, borderTopWidth, borderWidth, opacity, alignContent, alignItems, alignSelf, aspectRatio, borderEndWidth, borderStartWidth, bottom, display, end, flex, flexBasis, flexDirection, flexGrow, flexShrink, flexWrap, height, justifyContent, left, margin, marginBottom, marginEnd, marginHorizontal, marginLeft, marginRight, marginStart, marginTop, marginVertical, maxHeight, maxWidth, minHeight, minWidth, overflow, padding, paddingBottom, paddingEnd, paddingHorizontal, paddingLeft, paddingRight, paddingStart, paddingTop, paddingVertical, position, right, start, top, width, zIndex, direction, shadowColor, shadowOffset, shadowOpacity, shadowRadius, transform, ...rest } = this.props; return (<RElement {...rest} style={[ { backfaceVisibility, backgroundColor, borderBottomColor, borderBottomEndRadius, borderBottomLeftRadius, borderBottomRightRadius, borderBottomStartRadius, borderBottomWidth, borderColor, borderEndColor, borderLeftColor, borderLeftWidth, borderRadius, borderRightColor, borderRightWidth, borderStartColor, borderStyle, borderTopColor, borderTopEndRadius, borderTopLeftRadius, borderTopRightRadius, borderTopStartRadius, borderTopWidth, borderWidth, opacity, alignContent, alignItems, alignSelf, aspectRatio, borderEndWidth, borderStartWidth, bottom, display, end, flex, flexBasis, flexDirection, flexGrow, flexShrink, flexWrap, height, justifyContent, left, margin, marginBottom, marginEnd, marginHorizontal, marginLeft, marginRight, marginStart, marginTop, marginVertical, maxHeight, maxWidth, minHeight, minWidth, overflow, padding, paddingBottom, paddingEnd, paddingHorizontal, paddingLeft, paddingRight, paddingStart, paddingTop, paddingVertical, position, right, start, top, width, zIndex, direction, shadowColor, shadowOffset, shadowOpacity, shadowRadius, transform, }, ]} /> ); } } return DynamicElement;};