(feature) Better style support for text on native

[nandorojo]

Since <span /> maps to <Text />, it has extremely limited styling capabilities. This issue might belong in core rather than react-strict-dom, but I noticed that, among many others, these styles don't work properly on <span /> (and thus <Text />):

• borderRadius
• padding
• height: 100%
• width: 100%
• flexGrow
• flexBasis
• justifyContent
• alignItems

The list goes on. I wonder if this is a fundamental limitation of NativeTextComponent or if it could be fixed upstream. Given the goal to bring web → native styling, I thought it was appropriate to post here.

I'd be happy to create an umbrella issue and/or assist with PRs if there is some guidance on the best approach to take.

Thanks!

[necolas]

Yes this one of many known limitations of text rendering in React Native. You'll need to help advocate for this improvement with the React Native team. Progress has been slow to date and I'm not sure we have much internal investment on improving text styling on native

[nandorojo]

Happy to advocate for this. I'm trying to port existing web libraries to native using react-strict-dom and this is by far my biggest hang up.

[necolas]

Ok. Some of that is wrong. RSD doesn't render text instead of view, it adds a text within the view to avoid native crashing. Has nothing to do with styling. Posting on Twitter isn't going to help. You'll need to post an issue on the RN repo, and/or pester people in the discord, and/or try to get callstack/3P help. We've brought it up a lot internally for our use cases, so there's not much more we (web team) can do from our end

[nandorojo]

Created issue in the React Native core repo here: facebook/react-native#49736

[nandorojo]

Cross-posted discussion here: react-native-community/discussions-and-proposals#886

[nandorojo]

I can open a separate issue for this, but in case it's related, should I expect span to inherit the text styles applied on a non-text parent, such as button?

For example:

<html.button style={{ fontSize: '24px' }}>
  <html.span>Should this be 24px?</html.span>
</html.button>

Should html.span inherit the parent's text styles, assuming the parent is not a Text component?

Thanks!

[necolas]

Should html.span inherit the parent's text styles, assuming the parent is not a Text component?

It should already be doing that. Look through the unit tests and example app