Center Text in FlatList next to Icon - React Native

Question

I am currently trying to center the text from the FlatList. By centering I mean I want it to be in the middle, right of each Icon.

Currently this is how is displaying, it's on the bottom. I just want it to be a little bit higher:

Here is how my component looks like: I have tried to implement few styles, but still no success. The thing that crossed my mind but did not try was to hard code each line and drop the loop, but I am not sure if this is right to do.

import SocialIcon from 'react-native-vector-icons/AntDesign';
import BookingIcon from 'react-native-vector-icons/FontAwesome';
import FeatherIcons from 'react-native-vector-icons/Feather';


export const bookIcon = (<BookingIcon name="pencil-square-o" size={40} color="purple" />);
export const calendarIcon = (<SocialIcon name="calendar" size={40} color="purple" />);
export const questionIcon = (<SocialIcon name="questioncircleo" size={40} color="purple" />);
export const externalLinkIcon = (<FeatherIcons name="external-link" size={40} color="purple" />);



class AboutMe extends Component {
    static navigationOptions = {
      title: "About Me",
    }
    render() {
      return (
        <View style={styles.container}>
          <View style={styles.topBox}>
          <View style={styles.circleOuter} />
            <View style={styles.circle} />

          </View>
          <View style={styles.middleBox}>

          </View>
          <View style={styles.bottomBox}>
            <FlatList
              contentContainerStyle={styles.listItem}
              data={[
                {key: 'Book a free appointment', page:'Book', icon: bookIcon},
                {key: 'Availability', page:'Availability', icon:calendarIcon},
                {key: 'FAQ', page:'Faq', icon: questionIcon},
                {key: 'Useful Links', page: 'Links', icon: externalLinkIcon},
              ]}
              onPress={() => this.props.navigation.navigate('Book')}
              renderItem={({item}) => {
                  return (
                    <TouchableHighlight onPress={() => this.props.navigation.navigate(`${item.page}`)}>
                      <Text >{item.icon}{item.key}</Text>
                    </TouchableHighlight>
                  )
              }}
            />
          </View>
        </View>
      );
    };
  };

  const styles = StyleSheet.create({
    container: {
      flex: 1
    },
    topBox: {
      flex:3,
      backgroundColor: 'red',
      justifyContent:'center',
      alignItems: 'center'
    },
    middleBox: {
      flex:1,
      backgroundColor: 'yellow'
    },
    bottomBox: {
      flex:4,
      backgroundColor: 'orange',
      padding: 20

    },
    circle: {
      width: 160,
      height: 160,
      borderRadius: 160/2,
      backgroundColor: 'green',
      position: 'absolute'
  },
    circleOuter: {
      width: 180,
      height: 180,
      borderRadius: 180/2,
      backgroundColor: 'black'
  },
    listItem: {
      flex:1,
      justifyContent: 'center' 
    },
    text: {
      fontSize: 20,
    }

  });

Answer 1

You need to wrap the Text tag in a View/TouchableHighlight tag and then center the text tag vertically. Try this and let me know. It could be necessary that you wrap the icons in a separated image tag. if the code avode dont work means that a separeted tag is necessary so let me know!

<TouchableHighlight  
  style={styles.buttonsStyle}
  onPress={() => this.props.navigation.navigate(`${item.page}`)}
>
   <Text>{item.icon}{item.key}</Text>
</TouchableHighlight>
...
...
...
//in the styles add
buttonsStyle:{
  justifyContent: 'center',
}

EDIT1

In order to wrap the icons it should be like following.. Note that you cannot use TouchableHighlight in this case. it seems to be a bug with react-native. aslo i used TouchableOpacity

renderItem={({item}) => {
   return (
     <TouchableOpacity 
       style={styles.buttonsStyle} 
       onPress={() => this.props.navigation.navigate(`${item.page}`)}
     >
       <Image style={styles.imgStyles} source={item.icon} />
       <Text style={styles.mappedTextStyle}>{item.key}</Text>
     </TouchableOpacity>
    )
  }}

styles to change/add

    buttonsStyle:{
      alignItems: 'center',
      flexDirection:'row',
      marginTop: 5, 
    },
    imgStyles:{
      width: 40, 
      height: 40, 
      marginRight: 10
    },
    mappedTextStyle: {
      fontSize: 18,
      color: 'black'
    },

EDIT 2

In order to cover vector-icons lib, i have created a Expo snack for producing the desired behavior. Expo snack has also the expected solution for the problem Expo Snack