Styling multiple style props with styled-components on React Native

Question

I have been using Styled-components with React web for a while now, but recently I have started working on a React Native app which I decided to use styled-compoents in. It's been great when styling components that have just the style property, such as the default react-native components.

The problem I've been having though is when I need to style a more complex component that has multiple style properties such as containerStyle, inputStyle, and others.

When it's only one style property with a different name I can do the following:

const StyledBadge = styled(({ style, ...rest }) => {
  return <Badge {...rest} containerStyle={style} />;
})`
  position: absolute;
  right: 0;
  top: 0;
`;

This works flawlessly but when the component has multiple styles, I have no idea what to do:

const StyledList = styled(({ style, ...rest }) => {
  return <List {...rest} containerStyle={style} searchInputStyle={?} searchItemStyle={?} />;
})`
`;

With components like Gifted-React-Native-Chat is even worse because it has properties for passing properties as objects to its internal components, such as messageProps, listViewProps, containerProps and all of them have the style property.

Does anyone have any idea how to do that or if it's even possible?

I've been searching and trying to find a solution for this for a few days but I can't.

Thanks!

I'm also curious about this as well for React Native. Did you find a solution? — Larbear
– Larbear, Commented Mar 2, 2019 at 18:43
You have to use .attrs constructor mentioned here styled-components.com/docs/basics#attaching-additional-props but will lose the css syntax rules and have to use styles like you would with Stylesheet. — Larbear
– Larbear, Commented Mar 12, 2019 at 6:05
Thanks @Larbear, That's pretty awful but it gave me a really good idea on how to solve this. I'll leave an update here once I have it solved. — Eric.M
– Eric.M, Commented Mar 13, 2019 at 3:59

GollyJer · Accepted Answer · 2020-05-23 03:25:47Z

2

Here's how we ended up doing it.

Styled-components only work with the style prop but many custom components don't expose this prop. Instead they provide a *Style prop that gets passed to child component style props.

As an example, react-native-material-textfield has 5 style props.

We use the attrs function to keep the organization of styles in one file with the rest of the styled components.

This doesn't allow you to use traditional css syntax for the pseudo component, but it's the best we could think of to keep all styles organized.

answered May 23, 2020 at 3:25

GollyJer

27.2k18 gold badges126 silver badges190 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Styling multiple style props with styled-components on React Native

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related