javascript – (React Native) Align items in ListView

0
157


I do have the following ListView:

enter image description here

The “Unfollow” button is aligned as it should, while the Profile Picture and the user data are not.

I want the Profile Picture to be aligned in the center of the first column, and the User Info to be aligned on the left of the second column.

The code is the following:

    <ListItem.Content style={{width: '100%', display: 'flex', flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center'}}>
    <ListItem.Title>{item.title}</ListItem.Title>
    <TouchableOpacity 
      onPress={() => this.props.navigation.navigate("ProfileScreen", {userInfo: {uri: item.probability, username: item.country_id, id_user: item.id_user}})} 
      style={{ flexDirection: 'row'}}
    >
      <Image
        style={{ borderRadius: 50 }}
        source={{ uri: item.probability, width: 48, height: 48 }}
      />
    </TouchableOpacity>
    <TouchableOpacity 
      onPress={() => this.props.navigation.navigate("ProfileScreen", {userInfo: {uri: item.probability, username: item.country_id, id_user: item.id_user}})} 
      style={{ flexDirection: 'row'}}
    >
      <ListItem.Subtitle style={{color: '#000'}}>
        <Text style={{fontFamily: 'Montserrat_600SemiBold' }}>{item.name} {item.surname}</Text>
        {"\n"}
        <Text style={{fontFamily: 'Montserrat_600SemiBold' }}>@{item.country_id}</Text>
        {"\n"}
        {"\n"}
        <Text style={{fontFamily: 'Montserrat_600SemiBold' }}>{item.followers}</Text>
        {"\n"}
        <Text style={{fontFamily: 'Montserrat_600SemiBold' }}>{item.following}</Text> Following
      </ListItem.Subtitle>
    </TouchableOpacity>
    <Button
      buttonStyle={{backgroundColor: "#a6aba7", padding: 9, textAlign: "right", borderRadius: 10, display: item.isFollowing=="Same user" ? "none" : "flex"}}
      title={item.isFollowing}
      onPress={() => {
        if(item.isFollowing=="Follow"){
          this.follow(item.id_user);
        }
        else if(item.isFollowing=="Unfollow"){
          this.unfollow(item.id_user);
        }
        else if(item.isFollowing=="Same user"){
          alert("Same user");
        }
      }}
    />
  </ListItem.Content>