Component Lifecycle (ComponentDidMout) not working when moving tab?

[zidniryi]

• I have searched existing issues
• I am using the latest react native tab navigator version

When I move the page using the libarary of these navigators to move the componentdidmount page it can only be done once and after that the Lifecycle react does not work, ask for the solution: following my code.

Steps to Reproduce

This my code
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View,
Image
} from 'react-native';
import TabNavigator from 'react-native-tab-navigator';
import {Dimensions} from 'react-native'
import { withNavigation } from 'react-navigation'
import Account from './account/Account';
import Order from '../orderScreen/order/Order';
import Home from './home/Home';

const deviceW = Dimensions.get('window').width
const basePx = 375

function px2dp(px) {
return px * deviceW / basePx
}

class HomeTab extends Component {
render() {
return (

)
}
}

class OrderTab extends Component {
render() {
return (

)
}
}

class AccountTab extends Component {
render() {
return (

)
}
}

class MainTab extends Component {

state= {
selectedTab: 'home'
};

render() {
return (

<TabNavigator.Item
selected={this.state.selectedTab === 'home'}
title="Home"
selectedTitleStyle={{color: "#FF7158",}}
tabStyle={{borderTopWidth: this.state.selectedTab === 'home' ? 3 : 0, borderTopColor: '#FF7158', backgroundColor: this.state.selectedTab === 'home' ? '#fff8f6' : '#FFFFFF'}}
renderIcon={() => <Image source={require('allComponents/images/ic_beranda.png')} style={{width: 18, height:18}} />}
renderSelectedIcon={() => <Image source={require('allComponents/images/ic_beranda-actives.png')} style={{width: 18, height:18}}/>}
// renderBadge={() => <View style={{width: 20, height:20, backgroundColor:'#FF7158', borderRadius:50}}><Text style={{fontSize:12, textAlign:'center', color:'white', fontWeight:'600'}}>2}
onPress={() => this.setState({selectedTab: 'home'})}>

</TabNavigator.Item>
<TabNavigator.Item
selected={this.state.selectedTab === 'profile'}
title="Pemesanan"
selectedTitleStyle={{color: "#FF7158",}}
tabStyle={{borderTopWidth: this.state.selectedTab === 'profile' ? 3 : 0, borderTopColor: '#FF7158', backgroundColor: this.state.selectedTab === 'profile' ? '#fff8f6' : '#FFFFFF'}}
renderIcon={() => <Image source={require('allComponents/images/ic_pemesanan-inactive.png')} resizeMode='stretch' style={{width: 18, height:18}} />}
renderSelectedIcon={() => <Image source={require('allComponents/images/ic_pemesanan-active.png')} resizeMode='stretch' style={{width: 18, height:18}}/>}
onPress={() => this.setState({selectedTab: 'profile'})}>

</TabNavigator.Item>
<TabNavigator.Item
selected={this.state.selectedTab === 'riwayat'}
title="Akun"
selectedTitleStyle={{color: "#FF7158",}}
tabStyle={{borderTopWidth: this.state.selectedTab === 'riwayat' ? 3 : 0, borderTopColor: '#FF7158', backgroundColor: this.state.selectedTab === 'riwayat' ? '#fff8f6' : '#FFFFFF'}}
renderIcon={() => <Image source={require('allComponents/images/ic_akun-inactive.png')} resizeMode='stretch' style={{width: 18, height:18}} />}
renderSelectedIcon={() => <Image source={require('allComponents/images/ic_akun-active.png')} resizeMode='stretch' style={{width: 18, height:18}}/>}
onPress={() => this.setState({selectedTab: 'riwayat'})}>

</TabNavigator.Item>

);
}
}

const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
},
instructions: {
textAlign: 'center',
color: '#333333',
marginBottom: 5,
},
});

export default withNavigation(MainTab);

Thanks

[creative-dev-lab]

Facing the same issue here.
Seems like it doesn't be supported anymore?