Superscript style is broken in my react-native?

Question

I have the following react-native code.

<View style={styleOptions.container}>   
    <Text style={styleOptions.regular}>Hello world I am going to eat some Pizza for the sake of eating pizza. 
        <Text style={[{fontWeight:"bold"},styleOptions.strong]}>Super Pizza Store. </Text>
        You will pay $10
        <Text style={[{textAlignVertical:'top'},styleOptions.superscript]}>8</Text>
    .  I doubt you can afford it.
    </Text>
</View>

const styleOptions = {
    container:{flexDirection:"row",flexWrap:"wrap",width:300,padding:10},
    regular:{fontSize:13},
    superscript:{fontSize:8,lineHeight:22,textAlignVertical:'top',backgroundColor:'red',color:'white'},
    strong:{fontSize:13},
}

My problem is that I can't get the superscript (highlighted in red) to appear as a superscript. It seems to only stay as a subscript. See image

How do I change my styles to make superscript appear as a superscript without breaking the styles of the other text elements?

This is based on what I learnt from here Superscript Text in React Native

EDIT Also, the solution must work in iOS as well. Right now, textAlignVertical doesn't seem to do anything for iOS because I heard it's not supported.

Answer 1

Supplying lineHeight to the nested Text shows weird behaviour differently for android and ios.

A workaround for this would be making a separate component this superscript contained Text as

<View style={styleOptions.container}>
                <Text style={styleOptions.regular}>Hello world I am going to eat some Pizza for the sake of eating pizza.
                    <Text style={[{fontWeight:"bold"},styleOptions.strong]}>Super Pizza Store. </Text>
                    You will pay
                    <View style={{flexDirection: 'row' , height: 13, width: 30}}>
                        <Text style={{fontSize: 13, lineHeight: 13}}> $10</Text>
                        <Text style={{fontSize: 8, lineHeight: 8}}>8</Text>
                    </View>
                    .  I doubt you can afford it.
                </Text>
            </View>


const styleOptions = {
  container:{flexDirection:"row",flexWrap:"wrap",width:300,padding:10},
  regular:{fontSize:13, lineHeight:22},
  strong:{fontSize:13},
}