Vertically align items in the center inside flew direction row

Question

I have some icon buttons inside a view which is pushed to the right of the container by flex direction row on the parent. Currently I cannot align them vertically in the middle of the container. Here is the code I have:
JSX:

<View style={styles.groupContainer}>
  <View style={styles.groupTextContainer}>
    <Text style={styles.groupText}>{title.toUpperCase()}</Text>
  </View>
  <View style={styles.groupButtonsContainer}>
    <Icon
      key={name + type}
      onPress={onPress}
      style={{marginLeft: 8}}
      name={name}
      type={type}
      color='silver' />
    <Icon
      key={name + type}
      onPress={onPress}
      style={{marginLeft: 8}}
      name={name}
      type={type}
      color='silver' />
  </View>
</View>

styles:

  groupContainer: {
    backgroundColor: '#ddd',
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
  },
  groupText: {
    fontWeight: 'bold',
    color: '#808080',
  },
  groupTextContainer: {
    padding: 10,
    alignSelf: 'flex-start',
  },
  groupButtonsContainer: {
    alignSelf: 'flex-end',
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'center',
  }

UPDATE
Forgot to mention that Icon is a react-native-elements component.
I need it to look like this:

But I get this:

Answer 1

<View style={styles.groupContainer}>
 <View style={styles.groupButtonsContainer}>
   <Text style={styles.groupText}>{title.toUpperCase()}</Text>
   <Icon
     key={name + type}
     onPress={onPress}
     style={{marginLeft: 8}}
     name={name}
     type={type}
     color='silver' />
 </View>
</View>

mybe you can follow this code and you restyle from text