didFocus doesn't work while navigating from another screen - react-native

Question

I am using "react-navigation 3.11.0" with my react native expo application and I have below structure of navigation.
const orderStackNavigator = createStackNavigator(
{
orders: {
screen: Orders
},
orderdetail: {
screen: OrderDetail
},
ordermoredetails: {
screen: OrderMoreDetails
},
ordernotes: {
screen: OrderNotes
},
orderbillingdetails: {
screen: OrderBillingDetails
},
orderdeliverydetails: {
screen: OrderDeliveryDetails
}
},
{
//headerMode: 'none'
defaultNavigationOptions: {
headerStyle: [styles.headerStyle]
}
}
);
const inventoryManagerStackNavigator = createStackNavigator(
{
categories: {
screen: Categories
},
products: {
screen: Products
},
editProduct: {
screen: EditProduct
}
},
{
//headerMode: 'none'
defaultNavigationOptions: {
headerStyle: [styles.headerStyle]
}
}
);
const tabNavigator = createBottomTabNavigator(
{
orders: {
screen: orderStackNavigator,
},
inventory: {
screen: inventoryManagerStackNavigator,
},
},
{
order: ["orders","inventory"],
animationEnabled: true,
tabBarOptions: {
activeTintColor: "#026AC2",
inactiveTintColor: "#86AAC2",
labelStyle: { fontFamily: "ClearSans-Regular" }
//iconStyle: { fontFamily: 'ClearSans-Bold' }
}
}
);
const mainStackNavigator = createStackNavigator(
{
login: {
screen: Login
},
oAuth: {
screen: OAuth
},
tabs: {
screen: tabNavigator
}
},
{
initialRouteName: "login",
headerMode: "none"
}
);
const AppContainer = createAppContainer(mainStackNavigator);
export default AppContainer;
I am facing issue like if I navigate from ordermoredetails to editProduct it will not add didFocus listener to navigation. If I once navigate to inventory and then editProduct it will work as expected even from ordermoredetails but if user go to ordermoredetails and navigate to editProduct it do not work. Below is my code for editProduct for adding Listener.
componentDidMount() {
const { navigation } = this.props;
this.focusListener = navigation.addListener("didFocus", () => {
if (this.props.needToReload == true) {
//do the stuff
}
});
}
componentWillUnmount() {
// Remove the event listener
if (this.focusListener != null && this.focusListener.remove)
this.focusListener.remove();
}
Can any one please let me know how can i fix this and make didFocus call every time component loads?

Answer 1

changing "didFocus" to "focus" inside navigation.addListener worked for me.

Answer 2

"didFocus" is not working with me. Please try "focus". Below is the sample code which is working with me. I have version: "#react-navigation/native": "^5.7.6",
componentDidMount() {
this.focusListener = this.props.navigation.addListener('focus', () => {
// your logic will go here
});
}
componentWillUnmount() {
// Remove the event listener
this.focusListener.remove();
}