React Navigation, How to reset screen or entire stack from totally different stack

Question

const ListStack = createStackNavigator();

function ListPage() {
  return (
    <ListStack.Navigator screenOptions={{headerShown: false}}>
      <ListStack.Screen name="List" component={ListStackComponent} />
      <ListStack.Screen name="ItemDetail" component={ItemDetailComponent} />
    </ListStack.Navigator>
  );
}

const ItemPaymentStack = createStackNavigator();

function PaymentPage() {
  return (
    <ItemPaymentStack.Navigator screenOptions={{headerShown: false}}>
      <ItemPaymentStack.Screen name="Payments" component={Payments} />
    </ItemPaymentStack.Navigator>
  );
}

const AppDrawer = createDrawerNavigator();

<AppDrawer.Navigator
  screenOptions={{headerShown: false}}
>
    <AppDrawer.Screen name="ListPage_stack" component={ListPage}/>
    <AppDrawer.Screen name="Payment_stack" component={PaymentPage}/>
</AppDrawer.Navigator>

I have 2 stack navigators as mentioned above,

1. On the list page of items. By using this code, the App navigates to the item detail Page.
   navigation.navigate('ItemDetail', {key: item_id, item_id: item_id});

2. By pressing the Payment Option on the item detail page, the App uses the following code to navigate to the payment page.

   navigation.navigate('Payment_stack', { screen: 'Payments'});

Now, My problem is How to reset/clear data or unmount the Payment Screen when the user navigates back to the list page because after selecting another item from the list, the Payment screen shows previous item data until I clear the page using useFocusEffect. Is there any way to clear the Payment screen from the List page or entirely remove the Payment Stack on the List Page?

Answer 1

Yes you can use many way to solve this. I suggest you using Redux:

When selected the Item, dispatch the selected item to store. In Payment class, just listen to the item, you will always get newest item everytimes go to the Payment page

Answer 2

using reset or replace.

Select and use the actions you need to move the page

https://reactnavigation.org/docs/navigation-actions