Reset params when navigating from main tabs

Issue

This Content is from Stack Overflow. Question asked by Joseph

I have a problem since I’m navigating from either the main tabs or when navigating from a specific page. Specifically the Campaigns. Two ways I can navigate to Campaigns, either from the main tabs or from a specific page.
My problem is I’m only attaching businessEmailId on the params when navigating from a specific page. My problem now is that when clicking campaigns from the main tabs after clicking view campaigns from a specific page, it didn’t remove the businessEmailId anymore from the params

Main Tabs

<Tab.Navigator
  tabBarOptions={{
    inactiveTintColor: Colors.textprimaryLight,
    activeTintColor: Colors.textPrimary,
  }}
>
  <Tab.Screen
    name="Product"
    component={ProductsContainer}
    options={{
      tabBarLabel: 'Product',
      tabBarIcon: ({ focused }) => (
        <Image
          style={styles.icon}
          source={focused ? Images.product_active : Images.product_inactive}
          resizeMode={'contain'}
        />
      ),
    }}
    listeners={{
      tabPress: e => {
        if (loaderState) {
          e.preventDefault()
        }
      },
    }}
  />
  <Tab.Screen
    name="Campaigns"
    component={CampaignsContainer}
    options={{
      tabBarLabel: 'Campaigns',
      tabBarIcon: ({ focused }) => (
        <Image
          style={styles.icon}
          source={focused ? Images.campaign_active : Images.campaign_inactive}
          resizeMode={'contain'}
        />
      ),
    }}
    listeners={{
      tabPress: e => {
        if (loaderState) {
          e.preventDefault()
        }
      },
    }}
  />
  <Tab.Screen
    name="Payouts"
    component={PayoutsContainer}
    options={{
      tabBarLabel: 'Payouts',
      tabBarIcon: ({ focused }) => (
        <Image
          style={styles.icon}
          source={focused ? Images.payouts_active : Images.payouts_inactive}
          resizeMode={'contain'}
        />
      ),
    }}
    listeners={{
      tabPress: e => {
        if (loaderState) {
          e.preventDefault()
        }
      },
    }}
  />

</Tab.Navigator>

Specific page

const SpecificPage = () => {
  return (
    <MenuOption
      onSelect={() => {
        navigate("Campaigns", {
          businessEmailId: data,
        });
      }}
      customStyles={optionStyle}
    >
      <View style={styles.itemMenu}>
        <Text>View Campaigns</Text>
        <Image style={styles.rightIcon} source={Images.arrow_context_right} />
      </View>
    </MenuOption>
  );
};
export default SpecificPage;

Campaigns Page

const CampaignsContainer = ({ route }) => {
  console.log(route?.params?.businessEmailId)
  return (
   ...
  );
};
export default CampaignsContainer;



Solution

This question is not yet answered, be the first one who answer using the comment. Later the confirmed answer will be published as the solution.

This Question and Answer are collected from stackoverflow and tested by JTuto community, is licensed under the terms of CC BY-SA 2.5. - CC BY-SA 3.0. - CC BY-SA 4.0.

people found this article helpful. What about you?