React-native-tab-view: [RFC] Dynamic tab width

[sospedra]

I'm planning to make a PR adding the desired and very intrinsic material design feature of having dynamic width sizes for each tab. By extension, other problems like multilines or ellipsis will be addresses to.

I made some proof of concepts and I find a proper way to make it dynamic. Tho, it relies onto onLayout. Before invest a hard time making the PR I'm wondering if you can see any downside with this approach or shall I continue with the proposal.

cc @satya164

[sospedra]

😞

[satya164]

Hey. Sorry I was busy. Feel free to open a WIP PR. I'll take a look.

[Tim152]

@sospedra hey! I'am waiting for your PR too :)

[lucaslz2020]

@sospedra hey! I'am waiting for your PR too :)

[anoopmm]

is there any updates?

[sospedra]

I was working on this the past week. Is much more complicated than I thought.
My idea was to wait until the tabs are rendered and the get the width from the layout.
Problem is with the total width of the tabbar which works terribly bad with this dynamic idea.
I still think is possible but a bigger refactor is needed beforehand.

If anyone is interested in this feature and is willing to work on that I'm open to chat about my research so far.

[satya164]

I'm not against refactoring the TabBar if we can support dynamic tab width while keeping the current set of features.

[Louies89]

@sospedra
I am not sure, but, I guess, by using ViewPropTypes of RN, this can be solved. I saw it from here

[pribeh]

I can help test as we're looking for this as well.

[gabrielvcbessa]

I can help as well

[never00miss]

https://github.com/react-native-community/react-native-tab-view/pull/526 Maybe this PR will help you, i was doin counting View - width and total them all, so label and indicator now can have dynamic width depends on your width. still need improvement on this code

this is my last change
https://github.com/react-native-community/react-native-tab-view/pull/526/commits/720b02f05382e2706fef8988808534c5cc454252

[jaitd]

I just created PR #544 which is our take on implementing dynamic width TabBar

[satya164]

Hey, I just released a new alpha 2.0.0-alpha.0 of the library. It's rewritten using react-native-gesture-handler and react-native-reanimated addresses a many platform specific bugs and performance problems. The documentation is updated as well.

Please try the new version and see if it addresses your issue. If not, please open a new issue following the issue template.