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

Rudolph1999 commented 10 months ago

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 commented 10 months ago

Hello @Rudolph1999, is there anyway to patch it?

gitn00b1337 commented 5 months ago

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?

web-ridge / react-native-paper-tabs