Superscript Text in React Native

Question

I would like to style text as superscript in React Native. How would this be accomplished? Is there a way to make use of the Javascript sup() string method to r

Answer 1

Just use fontSize, lineHeight, textAlignVertical:

<Text style={{fontSize:20, lineHeight:22}}>
  foo
  <Text style={{fontSize:20 * 1.6, lineHeight:22 * 1.1, textAlignVertical: 'top'}}>
    bar
  </Text>
</Text>

Answer 2

I got this working for me using a view container and flex.

<View style={{flexDirection: 'row', alignItems: 'flex-start'}}>
    <Text style={{fontSize: 20, lineHeight: 30}}>10</Text>
    <Text style={{fontSize: 11, lineHeight: 18}}>am</Text>
</View>

Here is the link to this in action https://repl.it/Haap/0

Cheers!

Answer 3

The best method I found for this problem is not ideal, but it works cross-platform. The character I needed to superscript is the ® which some fonts have superscripted by default. So, I simply included a similar font family with the superscripted ® and it worked like magic.

Answer 4

i just do this to achieve superscript in my case

 <View style={{ flexDirection: 'row' }}>
  <Text style={{ fontSize: 30 }}>e</Text>
  <Text style={{ fontSize: 10 }}>x</Text>
 </View>

Answer 5

Javascripts sub() function will only surround your text with <sub></sub> tags and they are recognized as text in RN. You would need to build your own function like:

export default class Test extends Component {
    sub = (base, exponent) => {
        return <View style={{flexDirection: 'row'}}>
            <View style={{alignItems: 'flex-end'}}>
                <Text style={{fontSize: 13}}>{base}</Text>
            </View>
            <View style={{alignItems: 'flex-start'}}>
                <Text style={{fontSize: 10}}>{exponent}</Text>
            </View>
        </View>
    }

    render() {
        return(
            <View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
                <Text>{(() => 'hello'+'world'.sub())()}</Text>
                {(() => this.sub('hello','world'))()}
                {(() => this.sub('2','6'))()}
            </View>
        );
    }
}