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 ( <Home /> ) } }

class OrderTab extends Component { render() { return ( <Order /> ) } }

class AccountTab extends Component { render() { return ( <Account /> ) } }

class MainTab extends Component {

state= { selectedTab: 'home' };

render() { return ( <TabNavigator style={styles.container}> <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</Text></View>} onPress={() => this.setState({selectedTab: 'home'})}> <HomeTab/> </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'})}> <OrderTab/> </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'})}> <AccountTab/> </TabNavigator.Item> </TabNavigator> ); } }

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?