Search code examples
javascriptiosreact-nativeexponentsuperscript

Superscript React-Native text

In my React-Native app I would like to add superscript(exponent) in text.

For example,

I have this text: Here's a new product called test^123. This product can do ...

So in this example ^123 is the superscript(exponent)

I have try a lot of thing but I can not fix the problem because every time the text start on another line.

Do anyone have any idea how to solve this?

Thanks!

Solution

  • You can insert the unicode value of the superscript characters you require. See the table here for which unicode values to use. To insert these values into the text you wish to display, use the format \uXXXX in the string you wish to display. In your given example the string would be 'test\u00B9\u00B2\u00B3'.

    If you need to build these superscript strings dynamically you will need a simple mapping function that receives the standard digits and returns the unicode values.

    If you prefer to be more literal in your code, you can also insert the unicode characters right there in the string - provided your file is encoded as UTF-8. For this, you can copy the characters from another source or see this post, for example. A similar mapping function could be made for this approach too.