Balise is displaying like in react-native-render-html custom renderer

Question

I'm using react-native-render-html to render html and the HTML Tag is like a defines subscript text.

Au IV<sup>e</sup>

In my app :

I'm trying to have style to avoid that but I think there is better way to solve the issue.

What to you thing

Answer 1

The default style for <sup> element looks like this:

{
  textAlignVertical: 'top',
  fontSize: 'smaller'
}

Unfortunately, there is a bug on React Native whereby textAlignVertical: 'top' doesn't work for nested Text elements on Android.

I've also submitted a feature request for 'sub' and 'sup' support in their Canny.

I suggest you:

• Upvote the Canny feature request;
• Upvote the bug report;

That would help giving more visibility to those issues. And if you or your team has any Android SDK experience, you could also submit a fix upstream. Check the bug report thread as a contributor seems engaged in resolving the issue.