[react-native-tab-view] can not border radius tabbar indicator when turn on auto width

Current behavior

I'm encountering an issue when trying to round all 4 corners of the tab bar indicator.
My design requires 8px border radius on each corner of the indicator bar.

I've identified where the issue is. It's in this file: https://github.com/react-navigation/react-navigation/blob/main/packages/react-native-tab-view/src/TabBarIndicator.tsx
This code snippet:

styleList.push( { width: width === 'auto' ? 1 : width }, // The error occurs here { start: '${(100 / routes.length) * navigationState.index}%' }, { transform } );

on line 160.

The reason is that scaling 1px up to match the tab bar width prevents me from applying border radius. The reason is quite simple: since it's only 1px, any border radius applied to that 1px cannot be visually distinguished by the naked eye whether the 4 corners have been rounded or not, so when scaled up, the rounded corners still cannot be seen. This is not a normal view with width 100 or 200, it's just a view with width of 1 that gets scaled up

I know the reason why they don't use animated width but use scaleX instead is because the library is using React Native's API, so animated width is impossible. You can see here: https://stackoverflow.com/questions/63976219/style-property-width-is-not-supported-by-native-animated-module-need-advice-f

If react-native-tab-view used React Native Reanimated, it could potentially animate width and solve the current corner rounding issue. However, as of June 15, 2025, I haven't seen any pull requests upgrading to use the Reanimated library.

react-native-tab-view: 4.0.10 and the latest: 4.1.2 still get that bug

Even on Android, scaling 1px is currently buggy:

Expected behavior

I want the tab bar indicator to be able to round all 4 corners when autoWidth={true} is enabled.
I want it to look like the video below:

https://github.com/user-attachments/assets/45412dc7-55ee-42c6-8de2-d8c381176408

Reproduction

https://github.com/hoangtrunnam/issue-indicator-react-native-tab-view

Platform

• Android
• iOS
• Web
• Windows
• MacOS

Packages

• @react-navigation/bottom-tabs
• @react-navigation/drawer
• @react-navigation/material-top-tabs
• @react-navigation/stack
• @react-navigation/native-stack
• react-native-drawer-layout
• react-native-tab-view

Environment

• I've removed the packages that I don't use

Start in packages/react-native-tab-view/src/TabBarIndicator.tsx, especially the auto-width style list and its scale transform, then reproduce the issue with the linked issue-indicator-react-native-tab-view project on Android and iOS. Compare the current 1px-scaled indicator with the expected video and verify that autoWidth={true} allows all four corners to appear rounded without breaking indicator positioning.