React-native-tab-view: RTL is not supported!

[moerabaya]

What i'm suffering from is that the tabs still functioning the same as the LTR after switching to RTL, I know what seems to be the issue because I have a custom indicator, but i'm not able to use negative values to translate them to the opposite.

Thank you so much.

[satya164]

Can you send a PR to fix this?

[yaronlevi]

This bug also affects react-navigation. The TabNavigator is not working:

https://github.com/react-community/react-navigation/issues/860

[yaronlevi]

Inside TabViewPagerScroll.js putting flexDirection: 'row-reverse' on the <ScrollView /> fixes the problem partially. The tab's contents is shown but the order is reverse.

[dastoori]

@yaronlevi, look at my last comment here: https://github.com/facebook/react-native/issues/11960#issuecomment-292732636

@moerabaya, I sent a PR #194, until it merged, you can use one of these:

• npm i -S https://github.com/dastoori/react-native-tab-view.git#rtl-support
• npm i -S https://github.com/dastoori/react-navigation.git#rtl-support

[satya164]

Re-opening this since RTL is not yet supported in TabViewPagerScroll, hence unsupported on iOS.

[dastoori]

@satya164, iOS ScrollView has been fixed in ReactNative v0.43.2 (https://github.com/facebook/react-native/issues/11960#issuecomment-292732636)

[satya164]

Nice. I think we may still need to handle the scroll position etc.

[dastoori]

I tested this in v0.0.59, I used the examples from examples folder. These examples doesn't work properly:

• "1. Scrollbar top bar"

• "3. Bottom bar with indicator"

Other examples are works fine:

[satya164]

1. Bottom bar with indicator

This one uses a custom indicator, that's why. Should be easy to fix.

"1. Scrollbar top bar"

Yeah, this one will be more involved

[0xori]

Any updates on this one?

[satya164]

If you need this, pull requests are welcome.

[noambonnie]

@satya164 - I created a pull request to add support for RTL. I hope it can be accepted and merged.

Thank you.

[noambonnie]

Adding a link to the PR - not sure if 2 months is a reasonable time or not. I'm sure the team is busy...

https://github.com/react-native-community/react-native-tab-view/pull/556

[horodnicdragos]

Hey there @noambonnie. I've taken a look at your fix and I've tested it on both iOS and android. While this fixes the issue on android, it breaks iOS so I've just added a platform specific condition. Take a look at my fork:

https://github.com/horodnicdragos/react-native-tab-view

Not sure if this is the best approach on the long term but having this merged would be amazing. Do you want to update your PR or should I do one?

[noambonnie]

@horodnicdragos what's broken on iOS? Does your code (ignoring iOS for those calculation) work fine on iOS RTL?

If broken on iOS we'll need to fix it there too. If your fix works on both platforms in RTL (and LTR...) then fine

[horodnicdragos]

Yes, for some reason the calculations are not required on iOS. I'll make the PR and hope for the best.

602

[noambonnie]

@horodnicdragos please note that your PR failed the linter requirements. Follow the test procedures at the bottom of the project page (under "Contributing"). Otherwise it won't even be considered.

[horodnicdragos]

@noambonnie Done!

[ghost]

@satya164 can you check #602 and merge it?

[noambonnie]

I hope it gets merged soon...

[0xori]

is it going to be merged soon?

[satya164]

it is already merged and released. but the PR is Android only.

[horodnicdragos]

@0xori It is working just fine on iOS for me. Did you encounter any RTL issues? By the way, I've only fixed the issue on the scrollbar top bar which I was using. Didn't get the change to look at the bottom one.

[MahmoudAliIbrahim]

still having the same issue on android , for ios it is fixed using this #675

[FadiAboMsalam]

any updates on this ?

[satya164]

@FadiAboMsalam It's marked as "help wanted". PR welcome.

[Abdo-zayed]

in TabBar.js
modify this function
_this.resetScroll = function (value) {
const tabLength=this.props.navigationState.routes.length-1;

    const target=I18nManager.isRTL?tabLength-value:value;
    console.log(tabLength+' '+target)
    if (_this.props.scrollEnabled) {
        _this.scrollView && _this.scrollView.scrollTo({
            x: _this.getScrollAmount(_this.props, _this.state,target),
            animated: true
        });
    }
};

[hosseinmd]

this issue doesn't fix, please don't close

[satya164]

@hosseinmd please open a new issue with a runnable repro as mentioned in the issue template.

[hosseinmd]

I resolve this, that is my fault