didFocus doesn't work while navigating from another screen

Viewed 2680

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?

2 Answers

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

"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();
      }
Related