CODEWITHSUNDEEP
react-nativeexporeact-native-elements
Mohammad Ali
Mohammad Ali

Reputation: 57

How do I render square ListItem avatar instead of round?

I need to render square avatar. How do I do it?

I have implemented the listItem code as provided by react native element document: https://react-native-training.github.io/react-native-elements/docs/listitem.html

It works well but in this version of react native element 1.1.0 I don't know how to render square avatar instead of round.

 <ListItem
        title={item.name}
        subtitle={item.subtitle}
        leftAvatar={{ source: { uri: item.icon } }}
    />

I need to have left squar avatar filling the listview height.

Upvotes: 1

Views: 1926

Answers (1)

sophon
sophon

Reputation: 231

You can specify rounded prop as false

with props:

<ListItem
    title={item.name}
    subtitle={item.subtitle}
    leftAvatar={{ source: { uri: item.icon }, rounded: false}}
/>

or with component:

<ListItem
    title={item.name}
    subtitle={item.subtitle}
    leftAvatar={<Avatar source={{uri: item.icon}} rounded={false} /> }
/>

https://react-native-training.github.io/react-native-elements/docs/avatar.html#avatar-props

Upvotes: 3

Related Questions