move text in center for all lines

Question

I render such an item in a FlatList. When the name is too long, it extends to the next line, which is okay but I want that it should still be in the center. The second line should also be positioned in the center. For example, Ross should also approximately come under Vom. Is that possible?

export const FriendEntry: React.FunctionComponent<FriendEntryProps> = ({
  friend,
  currentUserId,
}) => {

  return (
    <View style={styles.item}>
      <TouchableOpacity>
        <Thumbnail
          style={styles.thumbnail}
          source={{
            uri:
              'https://cdn4.iconfinder.com/data/icons/avatars-xmas-giveaway/128/afro_woman_female_person-512.png',
          }} />
      </TouchableOpacity>
      <View style={styles.nameContainer}>
        <Text style={styles.userName}>{userName}</Text>
      </View>
      <View style={styles.deleteButtonContainer}>
        <Button
          rounded
          style={styles.deleteButton}
          <Icon name="trash-o" size={moderateScale(20)} color="black" />
        </Button>
      </View>
    </View>
  );
};

export const styles = StyleSheet.create({
  item: {
    backgroundColor: 'white',
    borderRadius: moderateScale(20),
    padding: moderateScale(20),
    marginVertical: moderateScale(8),
    marginHorizontal: 16,
    height: moderateScale(110),
    justifyContent: 'space-between',
    flexDirection: 'row',
  },
  userName: {
    paddingRight: 55,
    paddingLeft: 10,
    paddingTop: 20,
  },
  deleteButton: {
    backgroundColor: '#31C283',
    width: moderateScale(45),
    justifyContent: 'center',
  },
  deleteButtonContainer: {
    paddingTop: 12,
    marginRight: 2,
  },
  thumbnail: {
    height: 85,
    width: 85,
    marginLeft: 2,
    paddingRight: 0,
    position: 'relative',
  },
  nameContainer: {
    flex: 1,
    alignItems: 'center',
    textAlign: 'center'
  },
});

Answer 1

Add textAlign: 'center' to your userName object.

userName: {
    paddingRight: 55,
    paddingLeft: 10,
    paddingTop: 20,
    textAlign: 'center'
}

Answer 2

To align them vertically use alignItems: 'center' in

items: {
  alignItems: 'center'
}

That way TouchableOpacity and Views will be vertically aligned in the center.

Answer 3

Use textAlign for your text's style

userName: {
    //other styles
    textAlign: 'center'
}