Issues with styled-components

This issue seems to affect a lot of the components provided by react-native-elements. Here’s an example with <ListItem />:

If I use styled-components with a <ListItem/>, the default container style isn’t used anymore.

Here’s how the styled component is created:

const StyledListItem = styled(ListItem).attrs({
  titleStyle: { /* ... */ },
})``;

Here’s the result when using <StyledListItem> for my first element in the list:

As you may see, the bottom border defined as default is lost.

The problem is located here: https://github.com/react-native-training/react-native-elements/blob/master/src/list/ListItem.js#L97-L103

When using styled-components, attributes gets automatically passed this value:

{ style: [ 540, undefined ],
  innerRef: [Function],
  children: undefined }

so the default style gets overrided.

Solution

An obvious solution would be to spread attributes first, then define your own props, as you definitely don’t want them to be overridden (or do you?)

    <Component
      {...attributes}
      onLongPress={onLongPress}
      onPress={onPress}
      underlayColor={underlayColor}
      style={[styles.container, containerStyle && containerStyle]}
    >

I’d happily work on a PR for this, but i’d like to make sure that it’s not done on purpose on the first place.

[machour]

@Monte9 so far so good on GitPoint. Thank you all for this quick handling, such quick, much love ❤️

[Monte9]

RNE x GitPoint = 💯

Happy to help! 😄