React Native render() not being called after navigation - react-native

Question

I have a Footer component which is shared to all my screens. It has a method that updates the current property and returns to Home Page
...
class FooterComp extends Component {
changeProperty = async (data) => {
await AsyncStorage.setItem('CurrentPropertyID', data.toString());
await this.setState({ CurrentPropertyID: data.toString() });
NavigationService.navigate('Home');
}
}
...
My navigation service:
import { NavigationActions } from 'react-navigation';
let _navigator;
function setTopLevelNavigator(navigatorRef) {
_navigator = navigatorRef;
}
function navigate(routeName, params) {
_navigator.dispatch(
NavigationActions.navigate({
routeName,
params,
})
);
}
// add other navigation functions that you need and export them
export default {
navigate,
setTopLevelNavigator,
};
My App.js
class App extends Component {
render() {
const store = createStore(reducers, {}, applyMiddleware(ReduxThunk));
return (
<Provider store={store}>
<AppContainer
ref={navigatorRef => {
NavigationService.setTopLevelNavigator(navigatorRef);
}}
/>
</Provider>
);
}
}
export default App;
const MainStackNavigator = createStackNavigator({
Home: {
screen: HomeScreen,
navigationOptions: {
headerTitle: 'iRent'
}
},
Company: {
screen: CompanyDetails,
navigationOptions: {
headerTitle: 'Company Details'
}
},
Tenants: {
screen: Tenants,
navigationOptions: {
headerTitle: 'Tenants'
}
},
WorkOrders: {
screen: WorkOrders,
navigationOptions: {
headerTitle: 'Work Orders'
}
},
Applicants: {
screen: Applicants,
navigationOptions: {
headerTitle: 'Applicants'
}
},
Bills: {
screen: Bills,
navigationOptions: {
headerTitle: 'Bills'
}
}
}, {
defaultNavigationOptions: ({ navigation }) => {
return {
headerLeft: (
<Ionicons
style={{ paddingLeft: 10 }}
onPress={() => navigation.openDrawer()}
name="md-menu"
size={30}
/>
)
};
}
});
const AppDrawerNavigator = createDrawerNavigator({
iRent: {
screen: MainStackNavigator
},
Home: {
screen: HomeScreen,
navigationOptions: {
drawerIcon: <FontAwesome name="home" size={20} />
}
},
Company: {
screen: CompanyDetails,
navigationOptions: {
drawerIcon: <FontAwesome name="building-o" size={20} />
}
},
Tenants: {
screen: TenantDetails,
navigationOptions: {
drawerIcon: <Ionicons name="ios-person" size={20} />
}
},
Applicants: {
screen: Applicants,
navigationOptions: {
drawerIcon: <MaterialCommunityIcons name="account-search" size={20} />
}
},
WorkOrders: {
screen: WorkOrders,
navigationOptions: {
title: 'Work Orders',
drawerIcon: <Octicons name="checklist" size={20} />
}
},
Bills: {
screen: Bills,
navigationOptions: {
title: 'Bills',
drawerIcon: <Entypo name="text-document" size={20} />
}
},
LogOut: {
screen: Login,
navigationOptions: {
title: 'Log Out',
drawerIcon: <Entypo name="log-out" size={20} />
}
}
});
const AppSwitchNavigator = createSwitchNavigator({
Login: { screen: Login },
ForgotPassword: { screen: ForgotPassword },
Main: { screen: AppDrawerNavigator },
TenantDetails: { screen: TenantDetails },
EditData: { screen: EditData },
EditReview: { screen: EditReview },
ApplicantDetails: { screen: ApplicantDetails },
RunScreening: { screen: RunScreening },
OpenBGReport: { screen: OpenBGReport },
WorkOrderDetails: { screen: WorkOrderDetails },
ConvertToTenant: { screen: ConvertToTenant },
EditBill: { screen: EditBill },
NoAccess: { screen: NoAccess },
});
const AppContainer = createAppContainer(AppSwitchNavigator);
My HomeScreen
class HomeScreen extends Component {
constructor(props) {
super(props);
this.state = {
data: [
{ id: 1, title: 'Tenants', nav: 'Tenants', image: 'http://myirent.com/rent/appImg/tenants.jpg' },
{ id: 2, title: 'Applicants', nav: 'Applicants', image: 'http://myirent.com/rent/appImg/applicants.png' },
{ id: 3, title: 'Work Orders', nav: 'WorkOrders', image: 'http://myirent.com/rent/appImg/workOrders.png' },
{ id: 4, title: 'Bills', nav: 'Bills', image: 'http://myirent.com/rent/appImg/bills.png' }
],
currentPropertyID: null
};
}
componentDidMount = async () => {
await AsyncStorage.getItem('CurrentPropertyID')
.then((value) => {
const propID = JSON.parse(value);
this.setState({
currentPropertyID: propID.toString()
});
});
}
render() {
console.log('Render Main. PID: ' + this.state.currentPropertyID);
return (
<View style={styles.container}>
<FlatList
style={styles.list}
data={this.state.data}
keyExtractor={(item) => {
return item.id.toString();
}}
ItemSeparatorComponent={() => {
return (
<View style={styles.separator} />
);
}}
renderItem={(post) => {
const item = post.item;
return (
<TouchableOpacity
onPress={() => { this.props.navigation.navigate(item.nav); }}
>
<View style={styles.card}>
<Image style={styles.cardImage} source={{ uri: item.image }} />
<View style={styles.cardContent}>
<View>
<Text style={styles.title}>{item.title}</Text>
</View>
</View>
</View>
</TouchableOpacity>
);
}}
/>
<FooterComp />
</View>
);
}
}
The odd things is that after The FooterComp navigate to 'Home', the console.log() inside the render() method of HomeScreen component is not called. Shouldn't it be rendered after navigate to the component? I need to call the render() method to update screen.

Answer 1

Is not being called because the component hasn't been updated. I mean, with react-navigation the screens doesn't get unmounted, they just get blurred.
There is a component in react-navigation that will help you to solve this, just wrap your view with:
<View>
<NavigationEvents
onDidFocus={payload => console.log('Render Main. PID: ' + this.state.currentPropertyID)}
/>
{/*
Your view code
*/}
</View>