React-Native: центрируйте два текстовых компонента в одном компоненте View

Я пытаюсь центрировать два отдельных текста в их компонентах, я использую react-native и native-base. Я не могу центрировать текст по вертикали и горизонтали в самом текстовом компоненте. Я разделил их на цвета, чтобы увидеть проблему графически.

Элементы:

<View
  style = {{
    flex: 1,
    flexDirection: 'column',
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: 'red'
  }}>
  <Text uppercase = {false} style = {styles.buttonTextLeft}>
    {title}
  </Text>
  <Text uppercase = {false} style = {styles.buttonTextLeftGreen}>
    {subTitle}
  </Text>
</View>

Стили:

buttonTextLeft: {
  fontFamily: 'Cuprum-Bold',
  fontSize: normalize(20),
  color: '#005f99',
  flex: 1,
  flexDirection: 'row',
  backgroundColor: 'yellow'
},
buttonTextLeftGreen: {
  fontFamily: 'Cuprum-Bold',
  fontSize: normalize(20),
  color: '#94cf1c',
  flex: 1,
  flexDirection: 'row',
  backgroundColor: 'green'
},

вы видите, что прокомментированы все тесты, которые я сделал. конечно, это глупо, но я еще не решил, у вас есть идеи? Спасибо.

SOLUTION

Для тех, у кого была такая же проблема, я ввожу код моей правильной и чистой текущей ситуации (без backgroundColor):

JS

<View
  style = {{
    flex: 1,
    flexDirection: 'column',
    justifyContent: 'center',
  }}
>
  <Text uppercase = {false} style = {styles.buttonTextLeft}>
    {title}
  </Text>
  <Text uppercase = {false} style = {styles.buttonTextLeftGreen}>
    {subTitle}
  </Text>
 </View>

Styles

buttonTextLeft: {
  fontFamily: 'Cuprum-Bold',
  fontSize: normalize(20),
  flex: 1,
  flexDirection: 'row',
  lineHeight: normalize(20),
  paddingVertical: normalize(4),
  color: '#005f99',
},
buttonTextLeftGreen: {
  fontFamily: 'Cuprum-Bold',
  fontSize: normalize(20),
  flex: 1,
  flexDirection: 'row',
  lineHeight: normalize(20),
  paddingVertical: normalize(4),
  color: '#94cf1c',
},