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

[Rudolph1999]

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

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

[RiedelNicolas]

Hello @Rudolph1999, is there anyway to patch it?

[mike-stewart-dev]

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?

[RichardLindhout]

It still the case with newest version?

[antoniokadid]

I can confirm that I see this behavior on the Web. I am using version 0.11.4 of react-native-paper-tabs with react-native-paper 5.14.0.