A change in tabs can produce display issues.

[ghuh]

When there is a change in tabs via props in ScrollableTabBar, recalculate width.

There can be display issues when the tabs are changed after the ScrollableTabBar is rendered. The issues can be either tabs piling on top of each other instead of scrolling, or the tabs scroll as if there are far more tabs than there currently are. Either way, recalculating the width solves the issue.

[skv-headless]

I hate to use componentWillReceiveProps. It usually leads to bugs. Can you please provide code snippet to reproduce that bug. I hope there is a better solution

[ghuh]

This will trigger it. Note that you'll need a narrow screen. Any non-'Plus' iPhone in portrait should do it.

getInitialState: function()
{
    return {
        tabs: [ 'short', 'list' ],
    };
},

<ScrollableTabView
    renderTabBar = { () => <ScrollableTabBar /> }
>
        {
            this.state.tabs.map(
                (tab,index) =>
                    (
                    <View
                        tabLabel = { tab }
                        key = {index}
                    >
                        <TouchableHighlight
                            onPress = { () => this.setState({ tabs: [ 'short', 'list' ]})}
                        >
                            <Text> { 'short' } </Text>
                        </TouchableHighlight>
                        <TouchableHighlight
                            onPress = { () => this.setState({ tabs: [ 'long', 'list', 'with', 'very', 'many long tabs forcing', 'it to', 'scroll', 'and even longer' ]})}
                        >
                            <Text> { 'long' } </Text>
                        </TouchableHighlight>

                    </View>
                    )
            )
        }
</ScrollableTabView>

[ghuh]

@skv-headless Any thoughts on another way to solve this problem?

[skv-headless]

Could you make showcase here https://github.com/skv-headless/react-native-scrollable-tab-view/blob/master/examples/FacebookTabsExample/DynamicExample.js so I will be able to check that it is working.
BTW thanks 👍 I wanted to fix this use case but forgot 😞

[ghuh]

I added a new example called ChangingScrollableTabsExample.js. If you remove my fix to ScrollableTabBar, you can see the bug in action. Just click back and forth between "long" and "short".

[ghuh]

@skv-headless Any thoughts now that you have a working test case?

[gkuhn1]

+1
I have the same issue loading dynamic tabs from an API.
Fix by @ghuh make it work smoothly!
Waiting for the merge and a new release.

[ghuh]

@skv-headless Can this be merged?

[skv-headless]

I tried this patch. I've updated DynamicExample to use ScrollableTabBar. If you remove example I'll merge it. Please squash and rebase commits

[skv-headless]

Don't you think that shallow comparison would be enough?

[ghuh]

That's why I used JSON.stringify. It's a poor man's deep equals. There are more precise ways to do it but they all take a lot more code and have slower performance.

Regardless, yes, I believe this should be sufficient to ensure that any change will trigger the state to update correctly.

[ghuh]

I reverted the example code and there are no conflicts with master so it should be good to merge.