1

I am trying to get superscript (and subscript) to work in my React Native app on both Android and iOS. I am aware of using workarounds for superscript with using a View component as propsed on this SO question. But this doesn't work for me because you can not nest a View component in a Text component in Android.
In short, my code looks like this:

<Text>
  <Text>e^x</Text>
  ...
<Text>

I want it to output ex.

I haven't found a solution for this problem anywhere, but I am sure it is possible as it is a pretty basic feature.

Any thoughts?

Bram Vanbilsen
  • 5,763
  • 12
  • 51
  • 84

3 Answers3

1

You can try it by adjusting the fontSize and lineHeight between the parent and child text component.

 <Text style={{fontSize: 20, lineHeight: 30}}>
    e
    <Text style={{fontSize: 11,lineHeight: 24}}>
      x
    </Text>
 </Text>
Pritish Vaidya
  • 21,561
  • 3
  • 58
  • 76
  • 1
    This doesn't seem to work for me. Changing the `lineHeight` in my inner `Text` component also changes it for the parent as well. – Bram Vanbilsen Sep 13 '18 at 10:48
1

I was looking for the same and I found this website . It can convert any text to superscript which you can paste and it will be rendered as Superscript e.g. 1st to 1ˢᵗ.

RN Kushwaha
  • 2,081
  • 3
  • 29
  • 40
0

Maybe you could try using Unicode for sub/superscript as a workaround.

For example:

<Text style={styles.superScript}>{"e" + "\u02e3"}</Text>

This will output what you want. I don't know what your use case is exactly, but you could process the string before feeding it to the Text component and replace the superscript chars with Unicode as in the example above.

needsleep
  • 2,685
  • 10
  • 16