React-native-tab-view: Feature Request: Indicator Adjust to size of text

[KoboBunny]

I love using your library and I think this feature would be a great addition!

I'm currently using the library with tabs that adjust to the size of the text within it. I also want the indicator line to the same size as the text, which I've been able to achieve by adding a borderLeftWidth, borderRightWidth and setting the border colour to equal the background colour, however I think it would be a great addition to the library to officially support it and I would be happy to create a PR for it!

Are you interested in having this functionality?

[github-actions[bot]]

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

• react-native-tab-view
• react-native-gesture-handler
• react-native-reanimated
• ``

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

[matapo]

+1

[felire]

Man, you saved my life with the idea of adding border to the indicator

[stachu2k]

I copy-pasted the source code of TabBarIndicator.jsx into my project and played a little bit with outputRange in getTranslateX and getWidth methods to add some padding values that I have set in my labels. Then I used the new Indicator component in renderIndicator prop, so it looks like this renderIndicator={(props) => <TabBarIndicator {...props} />}.

[zgmf2000]

This feature would definitely be helpful.
By the way, thanks for giving the idea about the borders @KoboBunny!
I've been stuck for 2 days thinking about it!

[kiwina]

Ha i would have never thought about the hidden border tho get the indicator smaller, tried all kind of things but not that!! saved me hours! Be nice to be able out of the box to have a little more flexibility in the styling part

[a7madsamir]

you can specify width: 'auto' in tabStyle