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 return a string as superscript within a <Text> object?

score 17 · Answer 1 · answered May 02 '17 at 02:18

17

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!

answered May 02 '17 at 02:18

Jaspal Singh

1,210
1
12
17

I tried your solution but it gives me problems as described in the comments of one of the answers here https://stackoverflow.com/questions/49536698/superscript-style-is-broken-in-my-react-native/49539524 – John Mar 30 '18 at 18:24

score 3 · Answer 2 · answered May 26 '18 at 09:56

3

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>

answered May 26 '18 at 09:56

Himanshu Katiyar

39
3

The "x" needs to be positioned above the "e" though. – Adam Zerner May 22 '20 at 22:10

Gergely Vízvári · Answer 3 · 2017-03-29T17:37:11.620

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>

edited Mar 29 '17 at 17:37

answered Mar 29 '17 at 16:29

Gergely Vízvári

368
1
7

I needed to fix because a special aspect ratio needs between the lineHeights – Gergely Vízvári Mar 29 '17 at 17:37
3

textAlignVertical is android only! – Max Jun 15 '17 at 08:39

score 1 · Answer 4 · answered Aug 18 '16 at 05:23

1

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

answered Aug 18 '16 at 05:23

Fabian

3,139
2
23
49

Getting an error when I include this inside an existing `View`: "Views nested within a must have a width and height" – Steed-Asprey Aug 19 '16 at 13:21
Also, from the React Native documentation, embedding a `View` within `Text` will work in iOS only. Not cross-platform. – Steed-Asprey Aug 19 '16 at 15:15
That's right but if you are on android you could simply use `textAlignVertical: 'top'` – Fabian Aug 19 '16 at 15:58
I think for now (if you want to use Text + nested exponents) you have to do really ugly mixtures of Views and Text Elements. Maybe take a look at [productpains](https://productpains.com/post/react-native/text-add-support-for-vertical-align-style-property) there is a voting system for future features. I added the link to [CSS vertical align property page](http://www.w3schools.com/cssref/pr_pos_vertical-align.asp) with a reference to the sub/super properties. – Fabian Aug 19 '16 at 17:03
On Android, I tried the `textAlignVertical: 'top'` property like so: `Productname®` to no avail. Any thoughts? – Steed-Asprey Aug 23 '16 at 19:52

score 0 · Answer 5 · answered Dec 07 '16 at 16:34

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.

Superscript Text in React Native

5 Answers5

Linked