Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Docs on start/end related properties are incorrect w/respect to RTL behavior #1883

Closed
kmelmon opened this issue Apr 27, 2020 · 2 comments
Closed
Labels
Stale Issues/PR that are not getting much activity and are closer to be closed

Comments

@kmelmon
Copy link

kmelmon commented Apr 27, 2020

I noticed that the docs on all the start/end related props are incorrect. For example:
https://reactnative.dev/docs/layout-props#marginstart
The doc says:
“When direction is ltr, marginStart is equivalent to marginLeft. When direction is rtl, marginStart is equivalent to marginRight”
This is making it sound like marginStart flips depending on direction, but marginLeft does not. However this is not how it actually works. marginStart and marginLeft both behave the same way (ie if direction == ‘rtl’ marginStart/marginLeft are both applied to the right side).

I asked on Discord why it works this way, as it’s clearly not what the docs say. I got this response from Eli White:
“I believe this is the known behavior. RN has always flipped left and right in RTL mode. To enable people to have proper RTL support the start and end properties were introduced, but we've never found a good way to migrate the ecosystem to get the left/right properties to not flip anymore. There is a command I18nManager.swapLeftAndRightInRTL(false) that can disable that flipping. Eventually that should be the default, but it is such a big breaking change we have punted on it for 3 years (timing based on some internal documents I've found)”

The same problem exists for a bunch of other places in the docs. I believe this is the complete list:
https://reactnative.dev/docs/layout-props#marginstart
https://reactnative.dev/docs/layout-props#marginend
https://reactnative.dev/docs/layout-props#borderendwidth
https://reactnative.dev/docs/layout-props#borderstartwidth
https://reactnative.dev/docs/layout-props#paddingstart
https://reactnative.dev/docs/layout-props#paddingend
https://reactnative.dev/docs/layout-props#start
https://reactnative.dev/docs/layout-props#end

Ideally we would document the whole story, which is, essentially two things:

All of the start/end properties I linked to above flip with direction
For each of those start/end properties, their equivalent left/right properties flip with direction, unless you call I18nManager.swapLeftAndRightInRTL(false), in which case left/right properties will not flip with direction anymore.
I feel strongly we should fix #1 as it’s confusing and just plain wrong. We could debate how to document #2 as it’s a complicated story to tell for each property.

@stale
Copy link

stale bot commented Aug 16, 2020

👋 Hey there, it looks like there has been no activity on this issue recently. Has the issue been fixed, or does it still require the community's attention? This issue may be closed if no further activity occurs. Thank you for your contributions.

@stale stale bot added the Stale Issues/PR that are not getting much activity and are closer to be closed label Aug 16, 2020
@stale
Copy link

stale bot commented Aug 23, 2020

Closing this issue after a prolonged period of inactivity. If this issue is still present in the latest release, please feel free to create a new issue with up-to-date information.

@stale stale bot closed this as completed Aug 23, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Stale Issues/PR that are not getting much activity and are closer to be closed
Projects
None yet
Development

No branches or pull requests

1 participant