search

PedroBern / react-native-collapsible-tab-view

A cross-platform Collapsible Tab View component for React Native
MIT License
874 stars 171 forks source link

How to adjust indicator width dynamically? #224

Closed doolb14 closed 2 years ago

doolb14 commented 2 years ago

Hi! I am transitioning from React Navigation/Material Top Tabs to this library for obvious reasons. I stylized a dynamic indicator, which adjusts the width according to the tab item.

https://user-images.githubusercontent.com/29996189/147616557-06acd58d-bba0-4328-9ee0-aacb9200a2d4.mp4

I've been trying to achieve the same using this library but the tab indicator does not change its width according to tab item & if hardcoded it does not stays under the tab item for tab indexes > 0. Here's my styling for MaterialTabBar: {showLabel: true, activeColor: '#42C2AB', inactiveColor: 'slategray', style: { elevation: 0, borderBottomWidth: 1, borderColor: '#42C2AB', backgroundColor: 'transparent', width: 'auto', }, labelStyle: { textTransform: 'capitalize', fontSize: 14, }, indicatorStyle: { backgroundColor: '#42C2AB', height: 2, alignSelf: 'flex-start', width: '20%', }, tabStyle: { alignSelf: 'flex-start', justifyContent: 'flex-start', flexDirection: 'row', width: 'auto', padding: 0, // backgroundColor: 'green', marginRight: 18, }, contentContainerStyle: { justifyContent: 'flex-start', flexDirection: 'row', width: 'auto', }, }

PedroBern commented 2 years ago

See https://github.com/PedroBern/react-native-collapsible-tab-view/issues/217#issuecomment-977364333

doolb14 commented 2 years ago

Adding "scrollEnabled" to MaterialTabBar fixes the issue. Thanks! It's a great library :)