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

when using rtl language tab underline in wrong position #7348

Closed
elirangoshen opened this issue Apr 16, 2019 · 3 comments
Closed

when using rtl language tab underline in wrong position #7348

elirangoshen opened this issue Apr 16, 2019 · 3 comments
Assignees

Comments

@elirangoshen
Copy link

Current behaviour

In rtl layout the tabs underline located in wrong position.
I'm using createMaterialTopBarNavigator

Expected behaviour

When using rtl language, the tab underline should be under the tab header/name

Code sample

export const TabStack = createMaterialTopTabNavigator({
  moneyTransfer: { screen: MoneyTransferScreen },
  withdrawal: { screen: WithdrawalScreen },
  pendingRequests: { screen: PendingRequestsScreen },

},
  {
    defaultNavigationOptions: {
      drawerLabel: translate("operations.label"),
    },
    lazy: true,
    tabBarOptions: {
      activeBackgroundColor: color.palette.lightGrey,
      inactiveBackgroundColor: color.palette.lightGrey,
      scrollEnabled: true,
      style: {
        backgroundColor: "#212121",
      },
      indicatorStyle: {
        backgroundColor: color.palette.green,
      },
      labelStyle: {
        width: 200,
      },

    },
    animationEnabled: true,
  })

Screenshots (if applicable)

Screen Shot 2019-04-16 at 5 07 01 PM

What have you tried

didn't tried anything yet as id like to know if there is solution without me need to supply workaround from code

Your Environment

software version
ios 12.2
react-native 0.59.2
react-navigation-tabs 2.1.0
node 11.14.0
yarn 1.15.2
@elirangoshen elirangoshen changed the title when using rtl language tab underline ave wrong position when using rtl language tab underline in wrong position Apr 16, 2019
@elirangoshen
Copy link
Author

elirangoshen commented Apr 19, 2019

@satya164 , this can be workaround by disabling swipe gestures and animations.
But its still not solution so id prefer to leave it open.

Update: issue 746 that I assumed it was related has been resolved by upgrading react-native-tab-view, but this issue is till exists after the upgrade.

@satya164
Copy link
Member

There's a PR open for it, but it doesn't seem to work for me. Help is appreciated satya164/react-native-tab-view#742

@satya164
Copy link
Member

This should fix it satya164/react-native-tab-view#808

satya164 referenced this issue in react-navigation/tabs Jul 25, 2019
@satya164 satya164 transferred this issue from react-navigation/tabs Feb 24, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

2 participants