Styling Card from react-native-elements: Align Title and icon vertically

user_8518930 0
Viewed 1426

I'm using a Card from react-native-elements. Turns out I want to add an icon next to its title but I can't get it to look nice. Here's my code:

<Card
  //title={this.props.item.offer.amount + " " + this.props.item.request.good}
  title={
    <View style={{justifyContent: 'center'}}>
      <View style={{display: "flex",flexDirection: "row", justifyContent: 'center'}}>
        <Text style={{fontSize: 18, justifyContent: 'center', fontWeight: 'bold'}}>{this.props.item.offer.amount + " " + this.props.item.request.good}</Text>
        <View style={{flexGrow: 1}} />
        <Button
        buttonStyle={styles.localize}
        icon={<Ionicons name="md-locate" color={'white'} size={28} style={{alignSelf: 'center'}}/>}
        onPress={() => this.props.navigation.push('Rastrear')}
        />
      </View>
      <View
            style ={{
              borderWidth: 0.5,
              borderColor:'grey',
              margin:2,
        }}
      />
  </View>
  }
  titleStyle={{textAlign: 'left'}}
  containerStyle={{width: Dimensions.get('window').width-25}}>
  ...
</Card>

Turns out that looks like this:

enter image description here

What I want is to align the title and the icon vertically. How can I achieve this?

If comment out that "title" line you see inside of the Card and comment my personalized one it looks like this:

enter image description here

As you see the title here's centered vertically.

Update. styles.localize looks like this:

localize: {
    padding: 4,
    backgroundColor: '#FF5733',
    borderColor: '#FF5733',
    borderWidth: 2,
    width: Dimensions.get('window').width-370, 
    borderRadius: 10,
    justifyContent: 'center'
}
react-native javascript
1 Answers

Actually, once you have already declared justifyContent to be center in the parent View, this would have effected the rest of the child Views to have this styling prop. What you can do is to replace justifyContent in the second View housing your Text and Icon components with alignItems. This should vertically align them in the space provided by your parent View.

Also, you can set a height constraint in the parent View and textAlignVertical in the Text for better alignment.

        <View style={{justifyContent: 'center', height: 60}}>
          <View style={{display: 'flex', flexDirection: 'row', alignItems: 'center'}}>
            <Text style={{fontSize: 18, textAlignVertical: 'center', fontWeight: 'bold'}}>12 Mouses</Text>
            <View style={{flexGrow: 1}} />
            <Button
              buttonStyle={styles.localize}
              icon={<Icon name="md-locate" color={'white'} size={28} style={{alignSelf: 'center'}}/>}
              onPress={() => {}}
            />
          </View>
          <View
                style ={{
                  borderWidth: 0.5,
                  borderColor:'grey',
                  margin:2,
            }}
          />
        </View>

I have included a Snack here for testing. :)

user_55572200
Related