rerender component when tab is choosed react-native - reactjs

Question

I'm using TabNavigator from react-navigation to navigate through 3 component. My TabNavigator component look like this:
import routeOnMap from '../screens/routsOnMap.js';
import meditatinWalk from '../screens/meditationWalk.js';
import newWordToWalkOn from '../screens/newWordToWalkOn.js';
import * as firebase from 'firebase';
import React, { Component } from 'react';
import {
Platform,
StyleSheet,
Text,
View,
Button
} from 'react-native';
import {
StackNavigator,
NavigationActions,
TabNavigator,
TabBarBottom,
} from 'react-navigation';
import Ionicons from 'react-native-vector-icons/Ionicons';
export default TabNavigator(
{
MeditatinWalk: { screen: meditatinWalk },
NewWordToWalkOn: { screen: newWordToWalkOn },
RouteOnMap: { screen: routeOnMap },
},
{
navigationOptions: ({ navigation }) => ({
tabBarIcon: ({ focused, tintColor }) => {
const { routeName } = navigation.state;
let iconName;
if (routeName === 'MeditatinWalk') {
iconName = `ios-walk${focused ? '' : '-outline'}`;
} else if (routeName === 'NewWordToWalkOn') {
iconName = `ios-add-circle${focused ? '' : '-outline'}`;
} else if (routeName === 'RouteOnMap') {
iconName = `ios-map${focused ? '' : '-outline'}`;
}
// You can return any component that you like here! We usually use an
// icon component from react-native-vector-icons
return <Ionicons name={iconName} size={25} color={tintColor} />;
},
}),
tabBarOptions: {
activeTintColor: '#626A41',
inactiveTintColor: 'gray',
},
tabBarComponent: TabBarBottom,
tabBarPosition: 'bottom',
animationEnabled: false,
swipeEnabled: false,
}
);
I want to rerender whats inside my NewWordToWalkOn component when it's when it is pressed/tabbed. The code I would like to rerender is whats inside the componentDidMount() methode in the NewWordToWalkOn component.
//imports
export default class NewWordToWalkOn extends Component {
constructor() {
super()
this.state = {
words: [],
};
}
static navigationOptions = ({ navigation }) => ({
title:
<Text style={{ fontWeight: 'bold', color: '#626A41'}}> Vælg nye ord at vandre på </Text>,
headerLeft: null,
headerRight:
<TouchableOpacity
style={{ flex: 1, alignItems: 'center', justifyContent: 'center', marginRight: 10 }}
onPress={ () => MeditatinWalk._logout() }>
<Text
style={{ fontWeight: 'bold', color: '#626A41'}}>
Log ud
</Text>
</TouchableOpacity>
});
componentDidMount() {
//code that needs rerendered
}
render() {
)
return (
<ScrollView style={styles.wrapper}>
//all the elements
</ScrollView>
);
}
}
Any suggestions how to rerender?

Answer 1

If you want to update your view when the tab is pressed, try subscribe navigation lifecycle event with this.props.navigation.addListener.
Example:
class NewWordToWalkOn extends Component {
constructor (props) {
super(props)
this.navigationWillFocusListener = props.navigation.addListener('willFocus', () => {
// do something like this.setState() to update your view
})
}
componentWillUnmount () {
this.navigationWillFocusListener.remove()
}
}