Nativebase: onChangeTab for Tabs causing app to freeze

[rubinjohny]

node, npm, react-native, react and native-base version, expo version if used

"expo": "^30.0.1"
"native-base": "^2.8.1"
"react": "16.3.1",
"react-native": "https://github.com/expo/react-native/archive/sdk-30.0.0.tar.gz"

Expected behaviour

the state should have currentTabIndex as the selected index.

Actual behaviour

app freezes

Steps to reproduce

<Tabs tabBarPosition="bottom" initialPage={1} locked onChangeTab={({ i }) => this.setState({ currentTab: i })}>
    <Tab heading={<TabHeading>
                <Icon name="bell" type='SimpleLineIcons' style={{fontSize:22}} />
                <Text style={{color:(this.state.header == 'Snapshot'?Colors.themeBlue:'black')}}>Snapshot</Text>
        </TabHeading>} 
    >
        <Text> tab 1</Text>
    </Tab>
    <Tab heading={<TabHeading>
                <Icon name="compass" type="SimpleLineIcons" style={{fontSize:22}} />
                <Text style={{color:(this.state.header == 'Discover'?Colors.themeBlue:'black')}}>Discover</Text>
            </TabHeading>} style={{backgroundColor:'#e8e8e8'}}
    >
        <Text> tab 2</Text>
    </Tab>
</Tabs>

Is the bug present in both iOS and Android or in any one of them?

both

[n-sviridenko]

I assume it may be caused by updating state, which triggers re-rendering. Have the same issue.

[rubinjohny]

@n-sviridenko yea i understand setState is causing the issue. but its not supposed to right? and also did you find any work around for this? why is this issue closed?

[chatdanai]

same here, call setState in onChangeTab cause app freeze.
My work around, create button in TabHeading to change "page" props of Tabs.

[suvenduchhatoi]

@rubinjohny @n-sviridenko @chatdanai
Use bind in setState
onChangeTab={({ i }) => this.setState.bind({ currentTab: i })}

[felix-lambert]

So did somebody find a solution? I cannot fire a change into a function. Can somebody help?

[NXAN2901]

I've tried many ways to work around for this issue, and I found a way to improve it:

Instead use state for current tab, you should:
- Use variable to store current tab
- Call forceUpdate() function to make renderUI again

Example:

onChangeTab = ({ i }) => {
    this.selectedTab = i;
    this.forceUpdate();
 }

And in renderTab function, replace this.state to your variable to select style for tabbar:
Example:

renderTabHeading = (index) {
const isTabSelected = this.selectedTab === index;
...
}