react-native: display superscript text in Text component

Question

I have the following text:

<div>Answer the following <span class='title'>Question:</span><br> (a+b)<sup>2</sup>=?</div>

I want to do the following with this text:

parse it tag by tag, so that I can render each of the tag in a custom way. I could, very well, achieve that using this library: https://github.com/Thomas101/react-native-fence-html.
while parsing the superscript/subscript tags, render the content in proper fashion. This is where I'm stuck right now.

What I'm doing right now, is that I put the entire text (from start to end) in a Text component; and each span and br tags are also rendered as Text components nested within the parent Text component (the one for the div tag).
How do I render the superscript/subscript text?

Note: I did find a solution here: Superscript Text in React Native
But, creating a View inside a Text component needs the View to have fixed dimensions, and that is something not achievable.

If you found a solution would be nice to share it. Nested view is not supported in Android, isn't it? — Max
– Max, Commented Jun 15, 2017 at 7:36
@Max What I did end up doing was render a webview with the html text wherever required. In my application, there's not many instances where I need to do this, and hence, this works all right. However, for future use-cases like these, I guess, an in-built feature of RN to render html text in a Text/View component is required. — Anuraag Basu
– Anuraag Basu, Commented Jun 16, 2017 at 10:17

Athaphian · Accepted Answer · 2017-09-22 05:20:55Z

-1

One option would be to convert the HTML to Markdown first and then render the markdown. I believe for both of those actions there are libraries available.

answered Sep 22, 2017 at 5:20

Athaphian

1397 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

react-native: display superscript text in Text component

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related