Padding around React Native Elements ListItem Buttons (per documentation)

Question

In the React Native Elements Documentation for ListItem (https://react-native-training.github.io/react-native-elements/docs/listitem.html#linear-gradient-scale-feedback) the buttons of ListItem have padding between them and are rounded.

However, when I try do the following (direct from the documentation), it does not yield the same styling:

<ListItem
  Component={TouchableScale}
  friction={90} //
  tension={100} // These props are passed to the parent component (here TouchableScale)
  activeScale={0.95} //
  linearGradientProps={{
    colors: ['#FF9800', '#F44336'],
    start: [1, 0],
    end: [0.2, 0],
  }}
  ViewComponent={LinearGradient} // Only if no expo
  leftAvatar={{ rounded: true, source: { uri: avatar_url } }}
  title="Chris Jackson"
  titleStyle={{ color: 'white', fontWeight: 'bold' }}
  subtitleStyle={{ color: 'white' }}
  subtitle="Vice Chairman"
  chevronColor="white"
  chevron
/>

Further, I have tried adding pad and divider props but this does not yield the correct look.

How would one style individual ListItem components to match this style?

score 4 · Accepted Answer · answered Apr 21 '19 at 19:50

Per the React Native Elements documentation - https://react-native-training.github.io/react-native-elements/docs/customization.html#component-styles - all components can be styled individually using the containerStyle prop.

The following, added as a prop in ListItem, achieves the above requirement:

containerStyle = {{ marginLeft: 5,
                    marginRight: 5, 
                    marginTop: 10, 
                    borderRadius: 10, // adds the rounded corners
                    backgroundColor: '#fff' }}

Padding around React Native Elements ListItem Buttons (per documentation)

1 Answers1