search

satya164 / react-native-tab-view

A cross-platform Tab View component for React Native
MIT License
5.13k stars 1.07k forks source link

Feature Request: Indicator Adjust to size of text #1072

Open KoboBunny opened 4 years ago

KoboBunny commented 4 years ago

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] commented 4 years ago

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

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

matapo commented 4 years ago

+1

felire commented 4 years ago

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

stachu2k commented 4 years ago

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 commented 4 years ago

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 commented 3 years ago

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

Dev-ASamir commented 3 years ago

you can specify width: 'auto' in tabStyle

bohemima commented 2 years ago

@stachu2k Any hint on how you accomplished this? I'm trying to make the indicator match the text width without removing the padding/margin from the TabItem - I've been playing around with breaking out the indicator in to a custom one and changing values but to no avail.. Any hints appreciated!

wqcstrong commented 2 years ago

Save my life, too. Thanks😽