Super script sub script text example in react native

• Create Components folder under src folder
• Add SuperScriptSubScriptTextEXP.js file and add below Code

import React from "react";

import { StyleSheet, Platform, View, Text } from "react-native";

const SuperScriptSubScriptTextEXP = () => {

  return (

    <View style={styles.MainContainer}>

      <Text>SuperScript SubScript Text example</Text>

      <View style={{ flexDirection: "row" }}>

        <Text style={{ fontSize: 20, lineHeight: 30, color: "#000" }}>A</Text>

        <Text style={{ fontSize: 11, lineHeight: 18, color: "#000" }}>2</Text>

        <Text style={{ fontSize: 20, lineHeight: 30, color: "#000" }}>+</Text>

        <Text style={{ fontSize: 20, lineHeight: 30, color: "#000" }}>B</Text>

        <Text style={{ fontSize: 11, lineHeight: 18, color: "#000" }}>2</Text>

      </View>

      <View style={{ flexDirection: "row" }}>

        <Text style={{ fontSize: 20, lineHeight: 30, color: "#000" }}>H</Text>

        <Text style={{ fontSize: 11, lineHeight: 37, color: "#000" }}>2</Text>

        <Text style={{ fontSize: 20, lineHeight: 30, color: "#000" }}>S</Text>

        <Text style={{ fontSize: 20, lineHeight: 30, color: "#000" }}>O</Text>

        <Text style={{ fontSize: 11, lineHeight: 37, color: "#000" }}>4</Text>

      </View>

    </View>

  );

};

export default SuperScriptSubScriptTextEXP;

const styles = StyleSheet.create({

  MainContainer: {

    flex: 1,

    justifyContent: "center",

    alignItems: "center",

    paddingTop: Platform.OS === "ios" ? 20 : 0,

    margin: 10

  }

});

• Open App.js file and update code as below

import React from 'react';

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

import SuperScriptSubScriptTextEXP from './src/Component/SuperScriptSubScriptTextEXP'

 const  App=()=> {

  return (

    <View style={styles.container}>

      <SuperScriptSubScriptTextEXP/>

    </View>

  );

}

export default App;

const styles = StyleSheet.create({

  container: {

    flex: 1,

    backgroundColor: '#fff',

    alignItems: 'center',

    paddingTop:80

  },

});

Output: