Vertical Text Styling on React Native

Question

I'm new to react-native, and trying to style a page as follows, specifically the name of the player and the number:

However, no matter what I try to do, I can't seem to get this to work with the vertical text. My current result is as follows:

My code is as follows:

       <View style = {styles.namenumcontain}>
          <View style={styles.numbercontainer}>
            <Text style={styles.number}>{this.state.number}</Text>
          </View>
          <View style={styles.namecontainer}>
            <Text style = {styles.horizontalLastName}>{this.state.l_name.toUpperCase()}</Text>
          </View>
        </View>

  number: {
    fontFamily: 'Champion',
    fontSize: 200,
    color: Colors.NMUYellow,
    opacity: 0.3,
  },
  horizontalLastName: {
    color: 'white',
    fontFamily: 'BebasNeue-Bold',
    fontSize: 70,
    transform: [{ rotate: '-90deg'}],
    opacity: 0.3,
    width: 200,
    textAlign: 'center'
  },
  namecontainer: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center'
  },
  numbercontainer: {
    flex: 2,
    alignItems: 'center',
    justifyContent: 'center',
  },
  namenumcontain: {
    flexDirection: 'row',
    width: 155,
    height: 200,
  }

I really want to be able to fix this (and it'd be best if it could be somewhat responsive for different names and numbers but I'm desperate for anything right now). Is there any way to style this properly?

Answer 1

You can rotate the text by using transform rotate. This is one of the solution for this.

<Text style={{transform: [{rotate: '-90deg'}]}>
     name
</Text>