moerabaya commented 7 years ago

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.

untitled

satya164 commented 7 years ago

Can you send a PR to fix this?

yaronlevi commented 7 years ago

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

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

yaronlevi commented 7 years ago

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 commented 7 years ago

@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 commented 7 years ago

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

dastoori commented 7 years ago

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

satya164 commented 7 years ago

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

dastoori commented 7 years ago

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

"1. Scrollbar top bar"

scrollabletopbar

"3. Bottom bar with indicator"

bottombarwithindicator

Other examples are works fine:

scrollviews

satya164 commented 7 years ago

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 commented 6 years ago

Any updates on this one?

satya164 commented 6 years ago

If you need this, pull requests are welcome.

noambonnie commented 6 years ago

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

Thank you.

noambonnie commented 6 years ago

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 commented 6 years ago

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 commented 6 years ago

@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 commented 6 years ago

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

602

noambonnie commented 6 years ago

@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 commented 6 years ago

@noambonnie Done!

ghost commented 6 years ago

@satya164 can you check #602 and merge it?

noambonnie commented 6 years ago

I hope it gets merged soon...

0xori commented 6 years ago

is it going to be merged soon?

satya164 commented 6 years ago

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

horodnicdragos commented 6 years ago

@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 commented 5 years ago

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

FadiAboMsalam commented 5 years ago

any updates on this ?

satya164 commented 5 years ago

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

Abdo-zayed commented 5 years ago

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
        });
    }
};