CODEWITHSUNDEEP
reactjsreact-nativereact-native-elements
Sharath
Sharath

Reputation: 2428

Align 3 dots icon on Top in ListItem in React Native Elements

In screen shot shown how to place the 3 dots icon in top right side right now its in center.

Using https://react-native-training.github.io/react-native-elements/docs/listitem.html

Sample Code

<ListItem
  containerStyle={styles.containerStyle}
  title={this.getTitleView(data)}
  subtitle={this.getAddressView(data)}
  leftElement={this.getAvatarView(data)}
  rightElement={<Icon type="material" color="#C8C8C8" name="more-vert" />}
  />

Basically I want the rightElement to be placed on top instead of center

Sampe Image

Upvotes: 0

Views: 5068

Answers (1)

Bruno Eduardo
Bruno Eduardo

Reputation: 1393

I got the icon to move up, but I wasn't able to make it move even more to the right.

To actually get the <Icon> to align to the top corner add the containerStyle prop to it and use the alignSelf: 'flex-start' style, just like this:

rightElement={<Icon containerStyle={{ alignSelf: 'flex-start' }} type="material" color="#C8C8C8" name="more-vert" />

It should look like this image.

enter image description here

Hope this helps.

Upvotes: 1

Related Questions