Superscript text in a React Native book

Question

I would like to draw text as superscript in React Native. How will this be done? Is there a way to use the Javascript sup()string method to return a string as a superscript inside an object <Text>?

Answer 1

I got this working for me using the 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 a link to it in action https://repl.it/Haap/0

Hooray!

Answer 2

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 3

The Javascripts function sub()will only surround the text with tags <sub></sub>, and they are recognized as text in RN. You will need to create your own function, for example:

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>
        );
    }
}

Answer 4

The best method I found for this problem is not perfect, but it works cross-platform. The character I need for the add-in is the character, which by default has some fonts. So, I just turned on a similar superscript ® font family and worked like magic.