onChangeTab for Tabs causing app to freeze

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

[suvenduchhatoi]

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

[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;
...
}