React Native Show SuperScript SubScript Text in Android iOS Example

There are two most famous tags available in HTML known as <sup> superscript and <sub> subscript. Superscript tag sets the half of character above on the text writing line like (A²+B²) and same as but in different manner the Subscript tag is opposite of superscript, In subscript tag the next character would be half down to the previous one like (H₂SO₄). So sometimes the developer needs to show mathematical equations and chemistry equations in our react native application, In react native using the lineHeight attribute of style we can actually achieve this type of functionality. So in this tutorial we would going to show SuperScript SubScript Text in Android iOS React Native Application Example Tutorial.

Contents in this project Show SuperScript SubScript Text in Android iOS React Native App Example Tutorial:

1. Import StyleSheet, Platform, View and Text component in your react native project.

2. Create a Root View in render’s return block, This View is our main container view.

3. Create a secondary child view in root view. Inside this child view we would we would create text component like Superscript text using the lineHeight attribute.

As you can see in below code we would separate each text with separate Text component, This is necessary.

4. Creating another child view and inside this we would simply change the lineHeight attribute value and using it we would make the text look like Subscript text.

5. Creating Style.

6. Complete source code for App.js File :

Screenshot in Android device:

Screenshot in iOS device: