Example of Subscript Superscript Text in React Native

Hello friends, In today’s tutorial we would learn about 2 different text formats Subscript text and Superscript text. Now after reading it, If you are familiar with these terms then you know what they are? But some of use does not know about Subscript Superscript text. So to be short the Subscript text is a slightly below and small from normal line and used to write chemistry formulas. The Super script text is just opposite, In super script text the text is written slightly upper side of normal line. It is used to write Power in math equation. You have seen both of them in MS Word and Excel. So in this tutorial we would learn about Example of Subscript Superscript Text in React Native.

Important Note :- We are using 3 different line heights in our tutorial. Read below before going further.

  1. lineHeight: 30 to show normal Text.
  2. lineHeight: 18 to show Super Script Text.
  3. lineHeight: 37 to show Sub Script Text

Contents in this project Example of Subscript Superscript Text in React Native :-

1. Open your project’s main App.js file and import View, StyleSheet, Text and SafeAreaView component.

2. Creating our main App component.

3. Creating a View component and Here we would wrap our Text components one by one with single character to create Super Script Text.

Screenshot :-

4. Creating another View component and put multiple Text children in it to make Sub Script text.

Screenshot :-

5. Creating one more View component and put Text children inside it to make another Sub Script text.

Screenshot :-

6. Creating Style.

7. Complete Source Code for App.js File :-

Screenshot :-

Example of Subscript Superscript Text in React Native

Leave a Reply

Your email address will not be published. Required fields are marked *