проблема с выравниванием элементов в центре компонента View

Question

Я использую реагировать нативно и styled-components и пытаюсь центрировать контент в середине View компонента.

Мой код выглядит следующим образом:

render() {
    return (
      <View>
        <FixturesContainer>
          {fixtures.map((fixture, i) => {
            return (
              <View key={fixture.fixture}>             
                <FixtureTextContainer>
                  <TeamText>{fixtureText[0]}</TeamText>
                  <FixtureText>{fixture.kickOffTime}</FixtureText>
                  <TeamText>{fixtureText[1]}</TeamText>
                </FixtureTextContainer>
              </View>
            )
          })}
        </FixturesContainer>
      </View>
    );
  }
}

const FixtureTextContainer = styled.View`
  display: flex;
  flex-direction: row;
  justify-content: center;
`

const FixtureText = styled.Text`
  color: rgb(51, 51, 51);
  padding: 10px;
  text-align: center;
`

const TeamText = styled.Text`
  color: rgb(51, 51, 51);
  padding: 10px;
  font-weight: 800;
`

Этовыглядит как ниже.Вы можете видеть, что имена и время не совпадают.Я перепробовал все различные комбинации text-align: center и justify-content, но не могу их централизовать.Кто-нибудь может посоветовать?