CODEWITHSUNDEEP
react-nativeexporeact-native-paper
Shamoon
Shamoon

Reputation: 43639

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

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?

Upvotes: 2

Views: 2004

Answers (2)

Muhammad Numan
Muhammad Numan

Reputation: 25423

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
    }}
     />
  );

Upvotes: 1

Maycon Mesquita
Maycon Mesquita

Reputation: 4600

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',
  }}
/>

Upvotes: 2

Related Questions