0

My react-native app is being fed data from a REST API that I can only read. Some of the content coming from this API includes text that requires me to superscript. So I wrote a function like this:

getText(strContent) {
   return strContent.replace(/\^\^(.+)\^\^/g,'$1'.sup());
}

And then I would call it through out my application like this

<View style={Style.headerStyle}><Text>{this.getText("SuperRule^^®^^")}</Text></View>
<View style={Style.productDescriptionSyle}><Text>{this.getText("This is my SuperRule^^®^^")}</Text></View>

..
// and I make reference to this.getText("some content that has elements that requires superscript foramtting") in hundreds of other places in my application

But the problem is that doing something like getText("This is my SuperRule^^®^^") gives me

enter image description here

The problem with this output is the presence of the <sup></sup> tags and the ® isn't even super-scripted.

I looked at this question here Superscript Text in React Native

But the problem is that the answers have the font styles for the base and exponent hardcoded because it doesn't know what the fontSyle of the parentContainer is. I want the innerContainer to know what that fontstyles of the parentContainer is, and then automatically calculate the fontSyle for the inner container such that the content will appear as base and exponent. I want to avoid going through the 15 screens and 50 components, and have to manually state:

HomeScreen.js : Header(strContent,baseStyle1,exponentStyle1)
HomeScreen.js : Navigation(strContent,baseStyle2,exponentStyle2) 
HomeScreen.js : PopularDishes(strContent,baseStyle3,exponentStyle3) 
Restaurant.js : ContactUs(strContent,baseStyle4,exponentStyle4)  

..
SomeOtherScreen : SomeOtherComponent1(strContentN,baseStyleN,exponentStyleN)

Where baseStyle1 , baseStyle2, .. baseStyleN and exponentStyle1, exponentStyle2, ... exponentStyle3 are extremely likely to have different values.

I also do not want to go through all my screens and components and replace all instances of <Text> with a <Webview> to print this string as html content.

In my application, how do I go about making some content super-script in a maintainable and sane way?

John
  • 32,403
  • 80
  • 251
  • 422
  • Possible duplicate of [Superscript Text in React Native](https://stackoverflow.com/questions/39002583/superscript-text-in-react-native) – bennygenel Mar 27 '18 at 09:35
  • @bennygenel thanks, I've updated my question further. Basically i need the string to automatically derive it's own fontStyle for the superscript based on the fontStyle of the parentContainer. Is this possible? – John Mar 27 '18 at 11:19

0 Answers0