React Navigation 6 attempting to pass different params to same screen

Question

I currently have the following setup an onboarding stack component:

export default function OnboardingStack(props) {
  const { auth, activeUser } = useContext(FirebaseContext);

  return (
    <Stack.Navigator mode="card" headerMode="none">
      <Stack.Screen
        name="Login"
        component={Login}
        option={{
          headerTransparent: true
        }}
      />
      <Stack.Screen name="App" component={AppStack} />
    </Stack.Navigator>
  );
}

Then I can call a component called MemberList which contains a touchable opacity:

<TouchableOpacity style={styles.touchableRow} onPress={ () => navigateMember(item) }>

the method navigateMember I navigate to "Add Member"

 const navigateMember = (item) => {
    navigation.navigate("Add Member", {
      screen: "Member",
      params: {
        uid: item,
      }
        }
    );
  }

Here item is different each time I click it but when I get into the "Member" screen it retains the first original passed uid. Member component contains:

  useEffect(() => {
    navigation.addListener('focus', () => {
      // console.log(navigation);
      console.log('this member route');
      console.log(route);
    })

    navigation.addListener('blur', () => {
      console.log('leaving blur');
    navigation.setParams({
      key: route.key,
      params: { uid: 'og' },
    })
    })
  }, [])

Each time the uid remains the same. I've tried to reset it when it blurs but it always retains the same params. Any idea what I'm doing wrong?

Answer 1

The solution was to use push as opposed to navigate.

onPress={() => navigation.push('Member')}

More details found in the documentation