react-native-paper-tabs icon indicating copy to clipboard operation
react-native-paper-tabs copied to clipboard

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

Open Rudolph1999 opened this issue 2 years ago • 4 comments

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 avatar Aug 17 '23 08:08 Rudolph1999

Hello @Rudolph1999, is there anyway to patch it?

RiedelNicolas avatar Aug 24 '23 11:08 RiedelNicolas

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?

mike-stewart-dev avatar Feb 06 '24 09:02 mike-stewart-dev