(feature) Better style support for text on native

[nandorojo]

Description

Compared to View, <Text /> has extremely limited styling capabilities. These all have issues / don't work at all:

• 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 by forwarding more styles.

I have spent a lot of time trying to port web code/libraries to native, and this is a massive headache, mainly because all HTML elements let you render text without any limitations.

For example, every <span> I turn into <Text> results in totally incorrect styles.

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

Related from react-strict-dom: facebook/react-strict-dom#278

Thanks!

Steps to reproduce

N/A

React Native Version

0.78.0

Affected Platforms

Runtime - iOS, Runtime - Android

Output of npx @react-native-community/cli info

N/A

Stacktrace or Logs

N/A

Reproducer

https://let-me-know-if-we-need-one.com

Screenshots and Videos

Happy to provide if needed, but the styles are no-ops so I'm not sure what I'd share.

[react-native-bot]

Warning

Could not parse version: We could not find or parse the version number of React Native in your issue report. Please use the template, and report your version including major, minor, and patch numbers - e.g. 0.76.2.

[react-native-bot]

Warning

Could not parse version: We could not find or parse the version number of React Native in your issue report. Please use the template, and report your version including major, minor, and patch numbers - e.g. 0.76.2.

[react-native-bot]

Warning

Missing reproducer: We could not detect a reproducible example in your issue report. Please provide either:

• If your bug is UI related: a Snack
• If your bug is build/upgrade related: a project using our Reproducer Template
• Otherwise send us a Pull Request with the RNTesterPlayground.js edited to reproduce your bug.