You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Strict DOM components will internally map to either a React Native View or Text based on the tag, for example html.span > Text and html.div > View.
One difference from web, though, is that the styling/layouting differences can be completely removed by using some specific CSS reset based on the case. On React Native, instead, Text and View will behave differently, especially when it comes to flex layout and style inheritance.
I'm wondering if this introduces some unavoidable limitations on what can be done with specific html.* elements or if there are other solutions.
A simple example is links, html.a will output a Text element, making an assumption on it being a textual link. On web, though, is expected to wrap any interactive element linking somewhere else in an a tag, and those elements can indeed be just text, but can also be images or any complex composition of arbitrary elements. When trying to replicate this on RSD, we often encounter layouting issues with an html.a behaving very differently from an html.div.
I'm wondering how this should be addressed? Is there a specific set of styles we can apply to an html.a or other Text elements that will normalize their behavior to be in sync with View (except the text style inheritance I assume)?
I also imagine that having some prop to pick between Text and View in those elements is not desirable as it can mess with style inheritance and how the stylex styles are transformed for every different tag, and it also introduce some level of platform specific noise in the code?
Of course I could create some abstractions like a NonTextualLink component that can translate to an html.a on web, and an html.div with role="link" on app, or something like that, but not sure if this is the most idiomatic approach.
reacted with thumbs up emoji reacted with thumbs down emoji reacted with laugh emoji reacted with hooray emoji reacted with confused emoji reacted with heart emoji reacted with rocket emoji reacted with eyes emoji
Uh oh!
There was an error while loading. Please reload this page.
-
Strict DOM components will internally map to either a React Native
View
orText
based on the tag, for examplehtml.span > Text
andhtml.div > View
.One difference from web, though, is that the styling/layouting differences can be completely removed by using some specific CSS reset based on the case. On React Native, instead,
Text
andView
will behave differently, especially when it comes to flex layout and style inheritance.I'm wondering if this introduces some unavoidable limitations on what can be done with specific
html.*
elements or if there are other solutions.A simple example is links,
html.a
will output aText
element, making an assumption on it being a textual link. On web, though, is expected to wrap any interactive element linking somewhere else in ana
tag, and those elements can indeed be just text, but can also be images or any complex composition of arbitrary elements. When trying to replicate this on RSD, we often encounter layouting issues with anhtml.a
behaving very differently from anhtml.div
.I'm wondering how this should be addressed? Is there a specific set of styles we can apply to an
html.a
or other Text elements that will normalize their behavior to be in sync withView
(except the text style inheritance I assume)?I also imagine that having some prop to pick between
Text
andView
in those elements is not desirable as it can mess with style inheritance and how the stylex styles are transformed for every different tag, and it also introduce some level of platform specific noise in the code?Of course I could create some abstractions like a
NonTextualLink
component that can translate to an html.a on web, and an html.div with role="link" on app, or something like that, but not sure if this is the most idiomatic approach.Maybe I'm also missing something trivial?
Thanks.
Beta Was this translation helpful? Give feedback.
All reactions