How to vertically center the right (and left) element of a ListItem?

[MatteoBuffo]

Hi!

I have a List made of basic ListItems and I would like to vertically center both the left and the right element of each item.

As you can see from the screenshot, the left element actually is vertically aligned because it is larger (size={40}) than the right one (default size). The right one, instead, is misaligned.

The same thing happens when I have a right element that is larger than the left one.

Any hints? I tried passing style={{verticalAlign:"middle"}} to both elements but no luck.

Check out the Snack example

Thanks

[github-actions]

Hey! Thanks for opening the issue. The issue doesn't seem to contain a link to a repro (a snack.expo.dev link or link to a GitHub repo under your username).

Can you provide a minimal repro which demonstrates the issue? A repro will help us debug the issue faster. Please try to keep the repro as small as possible and make sure that we can run it without additional setup.

[github-actions]

Couldn't find version numbers for the following packages in the issue:

• react-native
• react-native-paper
• react-native-vector-icons

Can you update the issue to include version numbers for those packages? The version numbers must match the format 1.2.3.

[lukewalczak]

Hey @MatteoBuffo, you can add style={{ alignSelf: 'center' }} to the right icon.

[MatteoBuffo]

Hey @MatteoBuffo, you can add style={{ alignSelf: 'center' }} to the right icon.

Woah, great! Thank you!