Is superscript style broken in my native response?

Question

I have the following response 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 cannot make the superscript (highlighted in red) appear as a superscript. It seems to be just an index. See Image

How do I change my styles so that the superscript is displayed as a superscript without violating the styles of other text elements?

This is based on what I learned from here superscript text in React Native

EDIT In addition, the solution should work on iOS as well. Right now textAlignVerticalit doesn't seem to be doing anything for iOS, because I heard that it is not supported.

Answer 1

lineHeight nested Text - android ios.

, Text

<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},
}