How can I vertically align an icon in an expo react-native List.Item?

Question

i am using List.Item component of react-native-paper.

I have following code:

                <List.Item
                    title={<FirstNameInput />}
                    right={props => <List.Icon {...props} icon="pencil" />}

                    style={{ backgroundColor: customTheme.colors.background, justifyContent: 'center' }}
                />

But the icon stays to the top. How can I keep it vertically aligned regardless of the height of the title?

Answer 1

You can align the List.Item using flex:

<List.Item
  title={<FirstNameInput />}
  right={props => <List.Icon {...props} icon="pencil" />}
  style={{
    backgroundColor: customTheme.colors.background,
    justifyContent: 'center',
    alignSelf: 'center',
    alignItems:'center',
  }}
/>

Answer 2

the only way to make List.Icon vertically centered is to pass marginVertical in List.Icon style.

you have to pass marginVertical:hight/2-offset

you need to set offset because title is using marginVertical:6 referance

because of title, right and left style controlled by <View style={styles.row}> reference

 const ListItemHeight=300;
  const offset=12;
  return (
    <List.Item
    title={"ABC"}
    right={props => <List.Icon {...props} style={{marginVertical:ListItemHeight/2-offset}} icon="pencil" />}
    style={{
      backgroundColor: "red",
      width:"100%",
      height:ListItemHeight
    }}
     />
  );