React Navigation params doesn't reset

Question

I'm having trouble with resetting the navigation params to null in React Native.

MainTab
-- Home (stack)
-- Misc (stack)
-- Tips (stack)

On the Home tab, I have a button to go to Misc, but I want to route to the Tips tab on route to Misc.
Routing should look like - (Home -> Tips -> Misc)
That button returns the following with params -

this.props.navigation.navigate('Tips', {backRoute: 'Home', routeImGoingNext: 'Misc'});

When these params are passed, I render a back button and a skip button on the Tips screen's navigation based on the backRoute and routeImGoingNext params that were passed from the button on the Home tab.

if(navigation.state.params && navigation.state.params.backRoute){
  return {
    headerLeft: (<HeaderBackButton onPress={()=>navigation.navigate(navigation.state.params.backRoute)}/> ),
    headerRight: (
      <TouchableOpacity onPress={()=>navigation.navigate(navigation.state.params.routeImGoingnext)}>
        <Text style={{paddingRight: 10}}> Skip </Text>
      </TouchableOpacity>
    )
  }
}

My problem occurs when I click the Tips tab after I've already clicked the the button on the Home tab. The params are still set and therefore rendering a back button and skip button, but there shouldn't be those buttons if I click the Tips tab.

Any ideas on how to reset the params when you manually click on the tabs?

Answer 1

Use this for clear params in react navigation

this.props.navigation.setParams({YOUR_PARAMS: null});

Answer 2

I was able to clear the params by manually creating a function and setting the params that are passed to null. The clearParams function is called when the header button is pressed.

static navigationOptions = ({navigation}) => {

  clearParams = () => {
    navigation.setParams({backRoute: null, routeImGoingNext: null})
  }

  if(navigation.state.params && navigation.state.params.backRoute){  

    const { backRoute, routeImGoingNext } = navigation.state.params;

    return {
      headerLeft: (<HeaderBackButton onPress={()=>{navigation.navigate(backRoute), clearParams()}}/> ),
      headerRight: (
        <TouchableOpacity onPress={()=>{navigation.navigate(routeImGoingNext), clearParams() }}>
          <Text style={{paddingRight: 10}}> Skip </Text>
        </TouchableOpacity>
      )
    }
  }
 return;
}