react-native-tab-view

react-native-tab-view copied to clipboard

Current behavior

I can't navigate to any tab when pressing on them in RTL

Expected behavior

I can navigate to any tab when pressing on them in RTL

Reproduction

https://github.com/anastely/TabViewTest

Platform

• [X] Android
• [X] iOS
• [ ] Web
• [ ] Windows
• [ ] MacOS

Environment

package	version
react-native-tab-view	3.1.1
react-native-pager-view	5.4.4
react-native	0.65.1
node	v16.9.1
npm or yarn	yarn

I'm Facing this issue on IOS, works fine on android

I am also facing this issue on iOS @Hady207. Did you. manage to find a work around at all?

any updates ??

I checked the onTabPress function, the button is actually pressed but it's not changing the screen.

i ended up using this package https://github.com/kirankalyan5/react-native-segmented-control-tab instead until this get fixed, note it doesn't provide swiping functionality.

for time being I have down graded the version to 2.15.2 and it worked for me. "react-native-tab-view": "2.15.2", and make sure to remove the "^".

Did anyone manage to solve this issue? I tried downgrading to @2.15.2 but didn’t work for me.

i check the code and i found that the error not in react-native-tab-view but in react-native-pager-view in ios you can try to edit ReactNativePageView.m

if (isForward && diff > 0) { for (NSInteger i=_currentIndex; i<=index; i++) { if (i == _currentIndex) { continue; } [self goToViewController:i direction:direction animated:animated shouldCallOnPageSelected: i == index]; } } if (!isForward && diff > 0) { for (NSInteger i=_currentIndex; i>=index; i--) { // Prevent removal of one or many pages at a time if (index == _currentIndex || i >= numberOfPages) { continue; } [self goToViewController:i direction:direction animated:animated shouldCallOnPageSelected: i == index]; } }

to

if (index > _currentIndex) { for (NSInteger i=_currentIndex; i<=index; i++) { if (i == _currentIndex) { continue; } [self goToViewController:i direction:direction animated:animated shouldCallOnPageSelected: i == index]; } } if (index < _currentIndex) { for (NSInteger i=_currentIndex; i>=index; i--) { // Prevent removal of one or many pages at a time if (index == _currentIndex || i >= numberOfPages) { continue; } [self goToViewController:i direction:direction animated:animated shouldCallOnPageSelected: i == index]; } }

i check the code and i found that the error not in react-native-tab-view but in react-native-pager-view in ios you can try to edit ReactNativePageView.m

if (isForward && diff > 0) { for (NSInteger i=_currentIndex; i<=index; i++) { if (i == _currentIndex) { continue; } [self goToViewController:i direction:direction animated:animated shouldCallOnPageSelected: i == index]; } } if (!isForward && diff > 0) { for (NSInteger i=_currentIndex; i>=index; i--) { // Prevent removal of one or many pages at a time if (index == _currentIndex || i >= numberOfPages) { continue; } [self goToViewController:i direction:direction animated:animated shouldCallOnPageSelected: i == index]; } }

to

if (index > _currentIndex) { for (NSInteger i=_currentIndex; i<=index; i++) { if (i == _currentIndex) { continue; } [self goToViewController:i direction:direction animated:animated shouldCallOnPageSelected: i == index]; } } if (index < _currentIndex) { for (NSInteger i=_currentIndex; i>=index; i--) { // Prevent removal of one or many pages at a time if (index == _currentIndex || i >= numberOfPages) { continue; } [self goToViewController:i direction:direction animated:animated shouldCallOnPageSelected: i == index]; } }

It worked for me.

i check the code and i found that the error not in react-native-tab-view but in react-native-pager-view in ios you can try to edit ReactNativePageView.m

if (isForward && diff > 0) { for (NSInteger i=_currentIndex; i<=index; i++) { if (i == _currentIndex) { continue; } [self goToViewController:i direction:direction animated:animated shouldCallOnPageSelected: i == index]; } } if (!isForward && diff > 0) { for (NSInteger i=_currentIndex; i>=index; i--) { // Prevent removal of one or many pages at a time if (index == _currentIndex || i >= numberOfPages) { continue; } [self goToViewController:i direction:direction animated:animated shouldCallOnPageSelected: i == index]; } }

to

if (index > _currentIndex) { for (NSInteger i=_currentIndex; i<=index; i++) { if (i == _currentIndex) { continue; } [self goToViewController:i direction:direction animated:animated shouldCallOnPageSelected: i == index]; } } if (index < _currentIndex) { for (NSInteger i=_currentIndex; i>=index; i--) { // Prevent removal of one or many pages at a time if (index == _currentIndex || i >= numberOfPages) { continue; } [self goToViewController:i direction:direction animated:animated shouldCallOnPageSelected: i == index]; } }

No effect.

i check the code and i found that the error not in react-native-tab-view but in react-native-pager-view in ios you can try to edit ReactNativePageView.m

if (isForward && diff > 0) { for (NSInteger i=_currentIndex; i<=index; i++) { if (i == _currentIndex) { continue; } [self goToViewController:i direction:direction animated:animated shouldCallOnPageSelected: i == index]; } } if (!isForward && diff > 0) { for (NSInteger i=_currentIndex; i>=index; i--) { // Prevent removal of one or many pages at a time if (index == _currentIndex || i >= numberOfPages) { continue; } [self goToViewController:i direction:direction animated:animated shouldCallOnPageSelected: i == index]; } }

to

if (index > _currentIndex) { for (NSInteger i=_currentIndex; i<=index; i++) { if (i == _currentIndex) { continue; } [self goToViewController:i direction:direction animated:animated shouldCallOnPageSelected: i == index]; } } if (index < _currentIndex) { for (NSInteger i=_currentIndex; i>=index; i--) { // Prevent removal of one or many pages at a time if (index == _currentIndex || i >= numberOfPages) { continue; } [self goToViewController:i direction:direction animated:animated shouldCallOnPageSelected: i == index]; } }

Worked with me tested on ios simulator

thanks @ghoudi01 :)

indeed change isForward && diff > 0 to index > _currentIndex and !isForward && diff > 0 to index < _currentIndex fixed it for me (using react navigation tabs)

any idea for Android @ghoudi01 @YogiHa

tab press event not firing on ios in RTL layout

@creativitycomkw can you give more info

@callmemonky

For fixing android I had to add android:supportsRtl="true" at AndroidManifest at the application tag as well as adjust mainActivity to had import com.facebook.react.modules.i18nmanager.I18nUtil; at the top of the file and I18nUtil sharedI18nUtilInstance = I18nUtil.getInstance(); sharedI18nUtilInstance.allowRTL(getApplicationContext(), true); at onCreate method

Still tab press event not firing on iOS in RTL layout!

Any update on this? It's a critical feature for us for the tabs to work in RTL mode. @satya164

@satya164 It's a critical issue, can anyone give a temporary fix?

up

@satya164, any update on this please? I fail to understand how the widely supported / main recommended tab component for RN doesn't work in RTL and support is just getting ignored on this?

I know it's related to this issue https://github.com/callstack/react-native-pager-view/pull/485 and you responded to me there, but ignore us here.

Does anyone have any other recommended tab libraries that work in RTL that I could try? None of the other components I've found seem to be complete either.

did you find anything @m-deacon ?

Hey @syedamirali14 @m-deacon , issue is coming from rn pager view and fixed it raising this pr https://github.com/callstack/react-native-pager-view/pull/613

@sebasg0 Thanks for your PR! It has been merged and will be released in the next version of [email protected] 🚀