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

[hoangtrunnam]

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

• [x] Android
• [x] 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
• [x] react-native-tab-view

Environment

• [x] I've removed the packages that I don't use

package	version
react-native-tab-view	4.0.10
react-native-pager-view	^6.3.4
react-native	0.73.11
node	v22.15.0
npm or yarn	yarn

[github-actions[bot]]

Couldn't find version numbers for the following packages in the issue:

• @react-navigation/native

Can you update the issue to include version numbers for those packages? The version numbers must match the format 1.2.3.

The versions mentioned in the issue for the following packages differ from the latest versions on npm:

• react-native-tab-view (found: 4.0.10, latest: 4.1.2)

Can you verify that the issue still exists after upgrading to the latest versions of these packages?

[hoangtrunnam]

https://github.com/react-navigation/react-navigation/issues/11992

[hoangtrunnam]

https://github.com/hoangtrunnam/react-navigation/tree/merge_dev