css-to-react-native icon indicating copy to clipboard operation
css-to-react-native copied to clipboard

feat: add native RtL css support

Open XavierDefontaine opened this issue 1 year ago • 1 comments

Why

It was decided the I18nManager.forceRtL(true) does nothing on Web, hence rendering RtL handling between native/non-native very difficult using properties like margin-left/margin-right (mobile flips whereas web doesn't).

With this change, we can write RtL sensitive properties that will work across native (i.e. Mobile) and non-native (i.e. Web) platforms and allow for the components be re-used with the same strategy (more on that below) since RN does not understand marginInlineStart for example.

<HeadingContainer style={{ marginInlineStart: 10, start: 5}}>

Proposition

This PR would essentially allows us to write non-native css properties like so:

const HeadingContainer = styled.View`
  margin-inline-start: 20;
  inset-inline-start: 5 ;
`;

which would in turn be converted to accepted native css and applied like so:

<HeadingContainer style={{ marginStart: 10, start: 5}}>

It is worth nothing that this works without any code change but is less than ideal suggestion to mix native with non-native css:

const HeadingContainer = styled.View`
  margin-start: 20;
  start: 5 ;
`;

Strategy

  • For Web, it is then possible to set RtL on RtL sensitive css by applying dir="rtl" on a highest top level RN parent in the tree which will force all children to take on rtl.
  • On mobile, continue using I18nManager.forceRtL(true)

Notes

Minimal code change/tests since the root issue is still be discussed

XavierDefontaine avatar Jun 12 '24 15:06 XavierDefontaine

The spec for this isn't yet a candidate recommendation - https://www.w3.org/TR/css-logical-1/

I'm fine to merge this if we add a note to the readme saying it's not considered stable, and behaviour may change without a major version bump

jacobp100 avatar Jun 12 '24 16:06 jacobp100

The spec for this isn't yet a candidate recommendation - https://www.w3.org/TR/css-logical-1/

I'm fine to merge this if we add a note to the readme saying it's not considered stable, and behaviour may change without a major version bump

Closing this one for now as never got around to properly test it across devices our end. We can always revisit this later should it find more interest

XavierDefontaine avatar Dec 03 '24 15:12 XavierDefontaine