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

line indicating the selected tab is misaligned with the tab itself. #59

Open
Rudolph1999 opened this issue Aug 17, 2023 · 2 comments
Open
Labels
bug Something isn't working

Comments

@Rudolph1999
Copy link

Current behaviour

The line that indicates the selected tab is misaligned with the tab itself depending on the zoom level and the size of the screen.

Expected behaviour

The line that indicates the selected tab should be aligned at all times with the tab and should not go out of alignment depending on the screen size or zoom level

How to reproduce?

You can use the example app on this repo to test it out. All you need to do is view it on a smaller screen such as a laptop screen or you can also reproduce it by changing the zoom level in your browser.

Preview

image
image

Your Environment

software version
ios x
android x
react-native 0.71.8
react-native-paper ^5.9.1
node v18.16.0
npm or yarn 9.5.1
expo sdk 48.0.20
@Rudolph1999 Rudolph1999 added the bug Something isn't working label Aug 17, 2023
@RiedelNicolas
Copy link

Hello @Rudolph1999, is there anyway to patch it?

@gitn00b1337
Copy link

It's due to this in TabsHeader.tsx being off I think:

<Animated.View
    ref={indicatorRef}
    pointerEvents="none"
    style={[
      styles.indicator,
      {
        backgroundColor: theme.colors.primary,
      },
      indicatorStyle as any,
    ]}
/>

Is it possible to have a "showIndicator" props added to hide this?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
Projects
None yet
Development

No branches or pull requests

3 participants