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

fix: tab indicator did not work correctly in RTL mode #193

Merged
merged 6 commits into from
Oct 3, 2021

Conversation

mustafaskyer
Copy link
Contributor

what => fix invisible indicator in RTL mode
why => Tab bar indicator not works as expected in RTL mode
how => just added v.x * -1 in RTL mode, otherwise will be v.x

this add should import and help invisible indicator in RTL mode
fixed invisible indicator in RTL
@andreialecu andreialecu closed this Oct 3, 2021
@andreialecu andreialecu reopened this Oct 3, 2021
@andreialecu andreialecu changed the title fixed invisible indicator in RTL fix: tab indicator did not work correctly in RTL mode Oct 3, 2021
@andreialecu andreialecu merged commit 243848d into PedroBern:main Oct 3, 2021
@andreialecu
Copy link
Collaborator

Released in 4.3.0 🚀

@Audeos
Copy link

Audeos commented Sep 13, 2024

@andreialecu thank you for your work. But there's a problem. With this, the tab orders on the header are reversed. Also the indicator is moving with respect to rtl. However actual rendered tab orders did not change. Ex:

initial page is page 1

normal LTR:
Header: page1 | page2 | page3
Render: page1 | page2 | page3

RTL:
Header: page3 | page2 | page1 (<-- indicator moves this way)
Render: page1 | page2 | page3 (but this stays the same)

Rendered page orders should be reversed too. In order to fix it, I have to give my tabs in reversed order,

if (!isRTL) return tabRoutes; else return tabRoutes.reverse();

and then use it.

image

As well as giving MaterialTabBar a conditional style, which gives flexDirection row or row-reverse accordingly. For my app to align rendered pages as in order of 3 | 2 | 1 too.

image

So please, include this behavior in RTL too. More important, when I do these changes, the indicator gets reversed once more because of my additions above yours outside the package, and gets outside of screen with it's intended animation leftwards.

@andreialecu
Copy link
Collaborator

Would you like to open a PR with the fix?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants