my personal view component

import { FlexAlignType, FlexStyle, View, type ViewProps, type ViewStyle } from 'react-native';

import { useThemeColor } from '@/hooks/useThemeColor';

export type ThemedViewProps = ViewProps & {
  lightColor?: string;
  darkColor?: string;
};

export function ThemedView({ style, lightColor, darkColor, ...otherProps }: ThemedViewProps) {
  const backgroundColor = useThemeColor({ light: lightColor, dark: darkColor }, 'background');

  return <View 
  style={[
     { backgroundColor }, 
     // { ...addOtherPropsStyleConverter(otherProps) } ,
     style
]} 
{...otherProps}
 />;
}

function addOtherPropsStyleConverter(otherProps: ThemedViewProps) : ViewStyle{ 

     type FlexWrapType =  "wrap" | "nowrap" | "wrap-reverse" | undefined
     let FlexWrap: FlexWrapType = undefined;
     if(otherProps.wrap){
          FlexWrap = 'wrap'
     }else if(otherProps.noWrap){
          FlexWrap = 'nowrap'
     }else if(otherProps.wrapReverse){
          FlexWrap = 'wrap-reverse'
     }

     type FlexDirectionType = "row" | "row-reverse" | "column" | "column-reverse" | undefined
     let FlexDirection: FlexDirectionType = undefined;
     if(otherProps.row){
          FlexDirection = 'row'
     }else if(otherProps.col){
          FlexDirection = 'column'
     }else if(otherProps.rowReverse){
          FlexDirection = 'row-reverse'
     }else if(otherProps.colReverse){
          FlexDirection = 'column-reverse'
     }

     return{
          padding: otherProps.p ?? 0,
          paddingLeft: otherProps.pl ?? 0,
          paddingRight: otherProps.pr ?? 0,
          paddingTop: otherProps.pt ?? 0,
          paddingBottom: otherProps.pb ?? 0,
          paddingHorizontal: otherProps.px ?? 0,
          paddingVertical: otherProps.py ?? 0,
          paddingStart: otherProps.ps ?? 0,
          paddingEnd: otherProps.pe ?? 0,

          margin: otherProps.m ?? 0,
          marginLeft: otherProps.ml ?? 0,
          marginRight: otherProps.mr ?? 0,
          marginTop: otherProps.mt ?? 0,
          marginBottom: otherProps.mb ?? 0,
          marginHorizontal: otherProps.mx ?? 0,
          marginVertical: otherProps.my ?? 0,
          marginStart: otherProps.ms ?? 0,
          marginEnd: otherProps.me ?? 0,

          borderRadius: otherProps.r ?? 0,
          borderTopLeftRadius: otherProps.rtl ?? 0,
          borderTopRightRadius: otherProps.rtr ?? 0,
          borderBottomLeftRadius: otherProps.rbl ?? 0,
          borderBottomRightRadius: otherProps.rbr ?? 0,

          flex: otherProps.f ?? undefined,
          flexBasis: otherProps.fb ?? undefined,
          flexGrow: otherProps.fg ?? undefined,
          flexShrink: otherProps.fs?? undefined,
          alignItems: otherProps.ai?? undefined,
          alignContent: otherProps.ac?? undefined,
          justifyContent: otherProps.jc?? undefined,
          flexWrap: FlexWrap,
          flexDirection: FlexDirection
     }
}

type CustomStyleProps = {
     // padding
     p?: number,
     ps?: number,
     pe?: number
     pt?: number,
     pr?: number,
     pb?: number,
     pl?: number,
     px?: number,
     py?: number,

     // margin
     m?: number,
     ms?: number,
     me?: number
     mt?: number,
     mr?: number,
     mb?: number,
     ml?: number,
     mx?: number,
     my?: number,

     // rounded
     r?: number,
     rtl?: number,
     rtr?: number
     rbl?: number,
     rbr?: number,

     // flexBox
     contain?: boolean, // flex: 1
     f?: number, // flex
     row?: boolean, // flex direction row
     col?: boolean, // flex direction column
     fs?: number, // flex shrink
     fg?: number, // flex grow
     fb?: number, // flex basis
     ai?: FlexAlignType, // align items
     ac?: "flex-start" | "flex-end" | "center" | "stretch" | "space-between" | "space-around" | "space-evenly" | undefined, // align content
     jc?: "flex-start" | "flex-end" | "center" | "space-between" | "space-around" | "space-evenly" | undefined, // justify content

     // wrap
     wrap?: boolean,
     noWrap?: boolean,
     wrapReverse?: boolean,
     rowReverse?: boolean,
     colReverse?: boolean
}