Unable to remove existing params in react navigation

Question

I'm using react-navigation v4 for my expo App. For my App I'm using createDrawerNavigator and createSwitchNavigator with createAppContainer and createBrowserApp for web.

My issue is when I'm navigating to a route where I don't want params, there also it's passing me parameters. like,

http://localhost:19006/App/SkyView (first I visited route without params)

http://localhost:19006/App/CasesList (I visited another route, from there I'm passing params to SkyView route)
it redirect me to http://localhost:19006/App/SkyView?caseId=HYDE200627-00064&tripIndex=0

after that If I want to visit http://localhost:19006/App/SkyView it navigating to http://localhost:19006/App/SkyView?caseId=HYDE200627-00064&tripIndex=0

My DrawerNavigator code

const DrawerNavigation = createDrawerNavigator({
   
    CasesList: {
      screen: MainAuth(CasesList),
      navigationOptions: {
          drawerIcon: ({ tintColor }) => (<FontAwesome5 name='map-marked-alt' size={18} style={{color:tintColor}}/>)
      }
    },
    SkyView: {
      screen: MainAuth(SkyView),
      navigationOptions: {
          drawerIcon: ({ tintColor }) => (<FontAwesome5 name='map-marked-alt' size={18} style={{color:tintColor}}/>)
      }
    },
  },{contentComponent: props => <CustomDrawerContentComponent {...props}/>,contentOptions: {
        activeTintColor: baseColor,
        itemsContainerStyle: {
        marginVertical: 0,
        },
        iconContainerStyle: {
        opacity: 1
        }
    }})


const CustomDrawerContentComponent = props => {
  const signOutAsync = async () => {
    try {
      store.dispatch(logoutHandler())
      props.navigation.navigate('Auth');
    }
    catch(exception) {
      console.log(exception)
    }
  };
  return (
    <ScrollView contentContainerStyle={styles.container}>
    <SafeAreaView
      forceInset={{ top: 'always', horizontal: 'never' }}
    >
        <View style={styles.header}>
            <View style={styles.avatar}>
                <FontAwesome5 name="user-alt" size={24} style={{color:white}}/>
            </View>
            <View style={styles.userInfo}>
                <Text style={{}}>Abdulla Zulqarnain</Text>
            </View>
         </View>
      <DrawerItems {...props}  />
    </SafeAreaView>
    <TouchableOpacity onPress={()=>signOutAsync()}>
      <View style={styles.item}>
        <View style={styles.iconContainer}>
            <FontAwesome5 name='sign-out-alt' size={18} style={{color:red_dark}}/>
        </View>
        <Text style={styles.label}>Logout</Text>
      </View>
    </TouchableOpacity>
  </ScrollView>
  );
}

other Routing code

const routes = createSwitchNavigator(
    {
      AuthLoading: {
        screen: AuthLoadingScreen,
        navigationOptions: {
          header: null,
        }
      },
      App: {
        screen: DrawerNavigation,//MainAuth(CasesList),
        navigationOptions: {
          header: null,
        }
      },
      Auth:{
        screen: Login,
        navigationOptions: {
          tabBarVisible: false,
          header: null,
        },
      },
      HospitalList: {
        screen: HospitalList,
        navigationOptions: {
          header: null,
        }
      },
    },
    {
      initialRouteName: 'AuthLoading',
      defaultNavigationOptions: {
      }
    }
  );
  
  const container =  isWeb ? createBrowserApp(routes): createAppContainer(routes);

I'm stuck since 2 days can anyone help me to sortout this issue.

Unable to remove existing params in react navigation

0 Answers0