Styling a Reusable Component in React Native-CodePudding

I just want to ask if this the right way of styling a reusable component in React Native. I got inspired in Box component of Material-UI v5 so I wanted to recreate something like that in React Native but I don't know if this is the right way.

Feedbacks, suggestions will be so much appreciated. Thanks!

import React from 'react';
import {ChildrenProps} from 'types';

interface BoxProps extends ChildrenProps {
  flexDirection?: 'row' | 'column' | 'row-reverse' | 'column-reverse';
  marginVertical: number | undefined;
  ...other types
}
const Box = ({
  children,
  flexDirection,
  marginVertical,
...other props
}: BoxProps) => {
  return (
    <View
      style={[
        {
          flexDirection, marginVertical, ...other props
        },
      ]}>
      {children}
    </View>
  );
};

export default Box;

CodePudding user response：

Since you are simply forwarding the props to style, what I usually do is to have it as a prop named style:

import React from 'react';
import {ChildrenProps} from 'types';
import {ViewStyle,StyleProp,StyleSheet} from "react-native"

interface BoxProps extends ChildrenProps {
  style?: StyleProp<ViewStyle>;
}

const boxStyles = StyleSheet.create({
  originalBoxStyle: { /* ... */ }
})

const Box = ({
  children,
  style
...other props
}: BoxProps) => {
  return (
    <View
      style={StyleSheet.compose(boxStyles.originalBoxStyle, style)}>
      {children}
    </View>
  );
};

export default Box;

CodePudding user response：

Sorry but I don't know if I really understand...

So, if you want to expose all View style props directly, you can just use ViewStyles type from react-native, like below:

    import React from 'react';
    import { ViewStyle } from 'react-native';   

    const Box = ({ ...props }: ViewStyle) => {
      return (
        <View style={[{ ...props }]}>
          {children}
        </View>
      );
    };
    
    export default Box;