How to Show SuperScript and SubScript in React Native Text

Last Updated on December 13, 2020.

Sometimes you may need to show superscript and subscript through react native text component. Superscript characters are small and are slightly above the normal baseline whereas subscript characters appear slightly below.

You can use lineHeight prop of react native text component to show superscript and subscript. With lineHeight you can place the text above or below to the nearby text content. Following is the react native example to show subscript and superscript.

import React from 'react';
import {View, Text, StyleSheet} from 'react-native';

const Home = () => {
  return (
    <View style={styles.container}>
      <View style={{flexDirection: 'row', marginBottom: 20}}>
        <Text style={{fontSize: 20, lineHeight: 30}}>superscript</Text>
        {/*superscript*/}
        <Text style={{fontSize: 15, lineHeight: 18}}>x</Text>
      </View>
      <View style={{flexDirection: 'row'}}>
        <Text style={{fontSize: 20, lineHeight: 30}}>subscript</Text>
        {/*subscript*/}
        <Text style={{fontSize: 15, lineHeight: 37}}>x</Text>
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: 'white',
  },
});

export default Home;

The output will be as given below:

Have any doubts? Please use the comment section and let me now.

1 thought on “How to Show SuperScript and SubScript in React Native Text”

Leave a Reply

%d bloggers like this: