Styling react app so second column aligns

I have a react app where on a certain screen I list scores, like so:

Team 0

Team 0

Now this looks fine because both teams have the same number of characters. But not so here:

San Antonio 0

Dallas 0

What I want is to have the second column of the actual score values line up, regardless of the fact that the first column will have values with different character lengths, like so:

Not sure how to accomplish that with flexbox.

Here is my relevant component code:

const ScoresScreen = () => {
  return (
    <ScrollView>
      <View style={styles.container}>
        {SCORES.map((score) => (
          <View key={uuid.v4()}>
            <View style={styles.game} key={uuid.v4()}>
              <Image
                source={{
                  uri: getTeamLogo(score.team1),
                }}
                style={styles.logo}
                resizeMode={'contain'}
              />
              <Text style={styles.team}>{score.team1}</Text>
              <Text style={styles.score}>{score.team1Score}</Text>
              {score.team1Score > score.team2Score && (
                <AntDesign style={styles.check} name='checkcircle' size={18} color={Colors.midGreen} />
              )}
            </View>
            <View style={styles.game} key={uuid.v4()}>
              <Image
                source={{
                  uri: getTeamLogo(score.team2),
                }}
                style={styles.logo}
                resizeMode={'contain'}
              />
              <Text style={styles.team}>{score.team2}</Text>
              <Text style={styles.score}>{score.team2Score}</Text>
              {score.team1Score < score.team2Score && (
                <AntDesign style={styles.check} name='checkcircle' size={16} color={Colors.midGreen} />
              )}
            </View>
            <Divider></Divider>
          </View>
        ))}
      </View>
    </ScrollView>
  );
};

And here is my styling:

const styles = StyleSheet.create({
  container: {
    margin: 15,
  },
  game: {
    flexDirection: 'row',
  },
  team: {
    fontSize: 18,
  },
  logo: {
    width: Dimensions.get('window').width * 0.05,
    height: Dimensions.get('window').height * 0.05,
    marginRight: 10,
    marginTop: -10,
  },
  score: {
    marginLeft: 30,
    fontSize: 18,
  },
  check: {
    marginLeft: 12,
    marginTop: 3,
  },
});

>Solution :

I’m not yet familiar with React syntax as I’m learning it, but flexbox works in the following way: if you set a fixed width for your first column, the second column will have the correct alignment. Otherwise, I would maybe try to change the flexbox by a grid for such a layout, with two columns. Therefore, the alignment should work directly without changing anything else.