React-Native and Styled Components performance concern

Viewed 42

Instead of creating a View every time i need one I came up with a solution, I made a styled component which is a view and conditionally adds what i style i need, i pass it as prop Example:

const ViewStyling = css<ViewStyleProps>`
${({ flex }) => flex && `flex: ${flex};`}
${({ flexGrow }) => flexGrow && `flex-grow: ${flexGrow};`}
${({ alignSelf }) => alignSelf && `align-self: ${alignSelf};`}
${({ alignItems }) => alignItems && `align-items: ${alignItems};`}
${({ alignContent }) => alignContent && `align-content: ${alignContent};`}
// a lot of other styles i might need
`

export const FlexView = styled.View<ViewStyleProps>`
  ${ViewStyling}
`;

And I use FlexView whenever I need it, why style another view just to add flex 1 when i can just do a <FlexView flex={1} padding="10px". Could this cause performance problems in the long run, if yes, how and why? Could this cause performance improvements in the long run?

0 Answers
Related