Вертикальное центрирование в React Native не работает

Я использую ScrollView, и мне не удается центрировать значок на одном из внутренних View.

    import Icon from 'react-native-vector-icons/MaterialCommunityIcons';

<ScrollView>
...
        <View style = {styles.detailRowContainer}>
          <View style = {{flex: 1}}>
            <Text style = {styles.label} numberOfLines = {1}>
              {'Phone Number'}
            </Text>
            <Text style = {styles.value} numberOfLines = {1}>
              {phone}
            </Text>
          </View>
          <View style = {styles.round}>
            <TouchableWithoutFeedback onPress = {this._onPressPhone}>
              <Icon size = {22} name = "phone" />
            </TouchableWithoutFeedback>
          </View>
        </View>;
...
</ScrollView>



        detailRowContainer: {
            flexDirection: 'row',
            justifyContent: 'center',
            flex: 1,
            marginTop: 10,
            paddingBottom: 10,
            borderBottomWidth: 1,
            borderBottomColor: Colors.lightGray,
        },
        label: {
            color: Colors.glofoxDark,
            marginBottom: 3,
        },
        value: {
            color: Colors.glofoxDark,
            fontWeight: '800',
            borderBottomWidth: 1,
            borderBottomColor: Colors.lightGray,
        },
        round: {
            backgroundColor: Colors.lightBlue,
            width: 30,
            height: 30,
            borderRadius: 30,
            overflow: 'hidden',
            justifyContent: 'center',
            alignItems: 'flex-end',
            flexDirection: 'row',
            padding: 4,
        },