Component Lifecycle (ComponentDidMout) not working when moving tab? #192
Description
- 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