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?

Jaspal Singh · Accepted Answer · 2017-05-02 02:18:52Z

20

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 2, 2017 at 2:18

Jaspal Singh

1,2401 gold badge12 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

learningtech Over a year ago

I tried your solution but it gives me problems as described in the comments of one of the answers here stackoverflow.com/questions/49536698/…

Himanshu Katiyar · Accepted Answer · 2018-05-26 09:56:14Z

5

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, 2018 at 9:56

Himanshu Katiyar

591 silver badge3 bronze badges

1 Comment

Adam Zerner Over a year ago

The "x" needs to be positioned above the "e" though.

Gergely Vízvári · Accepted Answer · 2017-03-29 17:37:11Z

3

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, 2017 at 17:37

answered Mar 29, 2017 at 16:29

Gergely Vízvári

3861 silver badge8 bronze badges

2 Comments

Gergely Vízvári Over a year ago

I needed to fix because a special aspect ratio needs between the lineHeights

Max Over a year ago

textAlignVertical is android only!

Fabian · Accepted Answer · 2016-08-18 05:23:04Z

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, 2016 at 5:23

Fabian

3,5082 gold badges27 silver badges51 bronze badges

5 Comments

Steed-Asprey Over a year ago

Getting an error when I include this inside an existing View: "Views nested within a <Text> must have a width and height"

Steed-Asprey Over a year ago

Also, from the React Native documentation, embedding a View within Text will work in iOS only. Not cross-platform.

Fabian Over a year ago

That's right but if you are on android you could simply use textAlignVertical: 'top'

Fabian Over a year ago

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 there is a voting system for future features. I added the link to CSS vertical align property page with a reference to the sub/super properties.

Steed-Asprey Over a year ago

On Android, I tried the textAlignVertical: 'top' property like so: <Text>Productname<Text style={{fontSize: 9, textAlignVertical: 'top'}}>®</Text></Text> to no avail. Any thoughts?

Steed-Asprey · Accepted Answer · 2016-12-07 16:34:07Z

1

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.

answered Dec 7, 2016 at 16:34

Steed-Asprey

2,1918 gold badges24 silver badges31 bronze badges

1 Comment

Andrew Over a year ago

I think in many cases this is the right answer. We discovered that the issue was that we'd stripped out unused glyphs in our font when we installed it (of 1800 in Source Sans Pro, we were only using 200); but looking back, one of those we stripped was a superscripted ®.

mleister · Accepted Answer · 2023-10-31 17:22:02Z

1

Simple method for superscript Text in 2023

import React, { Text } from 'react-native'

type Props = {
  children: string
}

const SuperscriptText: React.FC<Props> = ({children}) => {
  return (
    <Text
      style={{
        fontSize: 8, // Should be smaller than the other text
        textAlignVertical: 'top',
      }}
    >
      {children}
    </Text>
  )
}

export default SuperscriptText

Working on Android & iOs:

<Text>Default Text</Text>
<SuperscriptText>Hi</SuperscriptText>
<Text>Continue here</Text>

Important note: Currently this does not work when nesting text elements. See here: https://github.com/facebook/react-native/issues/30375

answered Oct 31, 2023 at 17:22

mleister

2,7143 gold badges34 silver badges50 bronze badges

Comments

Oluwafemi Akerele · Accepted Answer · 2023-11-01 09:41:17Z

0

Wrap your super text inside of a normal test and all the style verticalAlign: 'super', to the super text.

  <Text style={{fontSize: 16}}>
   Main Text and{' '}
    <Text style={{fontSize: 10, lineHeight: 12, verticalAlign: 'super'}}>Superscript</Text>
  </Text>

edited Nov 1, 2023 at 9:41

answered Nov 1, 2023 at 9:34

Oluwafemi Akerele

3441 gold badge3 silver badges15 bronze badges

Comments

Andrew · Accepted Answer · 2024-10-03 17:17:49Z

0

For my use case (which runs up against this bug where textAlignVertical doesn't work), the only thing I could get to work was to create an image of the text I wanted superscripted, with space under it, and put that inline within the <Text> block I was working within.

Worked alright, because it was the "registered mark" symbol, rather than something the user actually needs to read; but admittedly a much-less-than-desirable solution. One drawback is you can't prevent line-breaking between the superscript and the word it's attached to without adding a  .

answered Oct 3, 2024 at 17:17

Andrew

5,5114 gold badges36 silver badges54 bronze badges

Comments

Justin Joy · Accepted Answer · 2025-07-24 16:47:46Z

As others have already mentioned, this is still an open issue with React Native's Text component.

There is a workaround, though.

Assuming this is what you're trying to display. Here, "sup" is supposed to be a superscript. This does not currently work with React Native.

<Text style={{ lineHeight: 22 }}>
    Lorem ipsum
    <Text 
        style={{"fontSize": 10, "lineHeight": 22, "textAlignVertical": "top"}}
    >
        sup
    </Text>
</Text>

This is what that looks like:

The trick is to wrap the superscript text in a View and match the lineHeight of the parent Text and the nested superscript/subscript Text

<Text style={{ lineHeight: 22 }}>
    Lorem ipsum
    <View>
        <Text 
            style={{"fontSize": 10, "lineHeight": 22, "textAlignVertical": "top"}}
        >
            sup
        </Text>
    </View>
</Text>

And, here's what the fixed superscript looks like:

Hope that helps!

Oliver Dams · Accepted Answer · 2024-06-14 08:14:45Z

-1

<View style={styles.container}>
  <Text>This is a </Text>
  <Text style={styles.superscript}>superscript</Text>
  <Text> example.</Text>
</View>

const styles = StyleSheet.create({ container: { flexDirection: 'row', justifyContent: 'center', alignItems: 'center', }, superscript: { fontSize: 10, lineHeight: 10, alignSelf: 'baseline', }, });

This works perfectly, also provide independent styling ability

answered Jun 14, 2024 at 8:14

Oliver Dams

94 bronze badges

Collectives™ on Stack Overflow

Superscript Text in React Native

10 Answers 10

1 Comment

1 Comment

2 Comments

5 Comments

1 Comment

Simple method for superscript Text in 2023

Comments

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

10 Answers 10

1 Comment

1 Comment

2 Comments

5 Comments

1 Comment

Simple method for superscript Text in 2023

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related