Re Render Tab Navigator onPress React Navigation - react-native

Question

when i'm using stack navigator only. the screen get re render every time when i navigate to another screen. so how to do the same thing with tab navigator? every time i press the tab menu(favorite)?
Screenshot:
Code:
const RootStack = StackNavigator(
{
Home: {
screen: Home,
navigationOptions: {
header: null
}
},
Menu: {
screen: Menu,
navigationOptions: {
header: null
}
},
}
);
export default TabNavigator(
{
Home: { screen: RootStack },
Favorite: { screen: Favorite },
},
{
navigationOptions: ({ navigation }) => ({
tabBarIcon: ({ focused, tintColor }) => {
const { routeName } = navigation.state;
let iconName;
if (routeName === 'Home') {
iconName = `home`;
} else if (routeName === 'Favorite') {
iconName = `heart`;
}
return <Icon name={iconName} size={25} color={tintColor} />;
},
}),
tabBarComponent: TabBarBottom,
tabBarPosition: 'bottom',
tabBarOptions: {
activeTintColor: '#00a6ed',
inactiveTintColor: '#9e9e9e',
style: {
backgroundColor: '#FFFFFF',
},
},
animationEnabled: false,
swipeEnabled: false,
}
);
Thanks in advance!

Answer 1

There are 2 different ways I found below,
// call when the screen is focused
componentDidMount () {
this._navListener = this.props.navigation.addListener('didFocus', (payload) => {
// update based on your requirements
});
}
OR
import { NavigationEvents } from "react-navigation";
...
class HomeScreen extends React.Component {
render() {
return (
<View>
<NavigationEvents
onWillFocus={() => {
// update based on your requirements!
}}
/>
<Text>Home</Text>
</View>
);
}
}

Answer 2

I recommend using Hooks to re-render for the screen when it changes focus, The library exports a useIsFocused hook to make this easier
isFocused is method lets us check whether the screen is currently focused. Returns true if the screen is focused and false otherwise.
import { useIsFocused } from '#react-navigation/native';
import { Text } from '#react-native';
function Home() {
const isFocused = useIsFocused();
return <Text>{isFocused ? 'focused' : 'unfocused'}</Text>;
}
If you are using class component you can wrap your class component in a function component
import { useIsFocused } from '#react-navigation/native';
class Home extends React.Component {
render() {
// Get it from props
const { isFocused } = this.props;
}
}
// Wrap and export
export default function(props) {
const isFocused = useIsFocused();
return <Home {...props} isFocused={isFocused} />;
}

Answer 3

react-navigation supports listeners which you can use to detect focus or blur state of screen.
addListener - Subscribe to updates to navigation lifecycle
React Navigation emits events to screen components that subscribe to
them:
willBlur - the screen will be unfocused
willFocus - the screen will focus
didFocus - the screen focused (if there was a transition, the transition completed)
didBlur - the screen unfocused (if there was a transition, the transition completed)
Example from the docs
const didBlurSubscription = this.props.navigation.addListener(
'didBlur',
payload => {
console.debug('didBlur', payload);
}
);
// Remove the listener when you are done
didBlurSubscription.remove();
// Payload
{
action: { type: 'Navigation/COMPLETE_TRANSITION', key: 'StackRouterRoot' },
context: 'id-1518521010538-2:Navigation/COMPLETE_TRANSITION_Root',
lastState: undefined,
state: undefined,
type: 'didBlur',
};