React Navigation route params not resetting

80 Views Asked by At

I have multiple stacks inside my application and I am trying to navigate user from one stack to another stack's child screen.

Navigation Container
--Drawer.Navigator

---Drawer.Screen.DashboardStack
----Stack.Navigator
-----Stack.Navigator.Screen.Dashboard

---Drawer.Screen.TaskSubmissionStack
----Stack.Navigator
-----Stack.Navigator.Screen.TaskSubmissionScreen

---Drawer.Screen.FieldManagement
----Stack.Navigator
-----Stack.Navigator.Screen.FieldListing
-----Stack.Navigator.Screen.FieldDetail

I have my TaskSubmissionScreen stack defined like this in Drawer.Navigator

<Drawer.Screen
  name={AppRoutes.TaskSubmissionScreen}
  component={taskSubmissionStack}
  initialParams={{
    source: Assets.taskHistoryIcon,
    title: LocalizationConstants.LABEL_TASK_HISTORY(),
  }}
  options={{
    unmountOnBlur: true,
  }}
/>

I am navigating to TaskHistory from FieldDetail like this:

navigateToTaskHistory = (field) => {
    this.props.navigation.navigate(AppRoutes.TaskSubmissionScreen, {
      screen: AppRoutes.TaskSubmissionScreen,
      params: {
        filterObject: {
          fieldIds: [field.id],
        },
      },
    });
};

Inside the TaskSubmission screen under task submission stack I am reading params like this:

// component did mount
if (this.props?.route?.params?.filterObject) {
    
    const filterObject = {
      ...this.state.filterObject,
      ...this.props?.route?.params?.filterObject,
    };

    const searchTerm = '';
    this.setState({ filterObject, searchTerm }, () => this.getData());

    // Reset params
    this.props.navigation.setParams({ filterObject: null });
    
}

Now in the app, If I go to task history, from task detail, it works fine and params which I pass works correctly, but If I go to dashboard from task history then navigate back to task history using the drawer I get the same params back even though in the above code I am resetting the params after reading them.

My custom drawer navigate code:

this.props.navigation.navigate(routeName);

I am using react-navigation versions:

"@react-navigation/compat": "^5.1.14",
"@react-navigation/drawer": "^5.3.2",
"@react-navigation/native": "^5.0.7",
"@react-navigation/stack": "^5.0.9",
0

There are 0 best solutions below