Navigation Stack Issue with Incorrect Event Display

[quentin-76]

Which package manager are you using? (Yarn is recommended)

yarn

Summary

I'm encountering a stacking issue; here's my structure:

app/_layout app/(tabs)/_layout app/(tabs)/list/index.tsx app/user/[id]/index.tsx app/event/[id]/index.tsx

Here's my main layout:

return (
 <Stack screenOptions={{ headerShown: false }}>
    <Stack.Screen
      name="(tabs)"
      options={{
        headerShown: false,
      }}
    />
    <Stack.Screen
      getId={({ params }) => {
        return params?.id;
      }}
      name="event/[id]/index"
    />
  </Stack>
);

Working stacking scenario: From the list (index: 0), Push to event (index: 1), From event, push to user (index: 2) (router.back() functions correctly and displays the event properly).

Non-working stacking scenario: From the list (index: 0), Push to event (index: 1), From event, push to user (index: 2), Then from user, I push to another event (index: 3).

PROBLEM: Now, when I perform router.back() to the first event (navigation index: 1), it displays the event from index 3.

Minimal reproducible example

return ( <Stack screenOptions={{ headerShown: false }}> <Stack.Screen name="(tabs)" options={{ headerShown: false, }} /> <Stack.Screen getId={({ params }) => { return params?.id; }} name="event/[id]/index" /> );

[quentin-76]

I added a console.log(id) of the id passed as a parameter in the Event page and when I return to index 1, I have several rerenders with the id of the event which was that of the index 3 and that of the event of index 1:

const { id } = useLocalSearchParams<{ id: string }>();

ID 7a77f55a-d16d-4220-bb26-4d92bb9610ed ID 267c2d4d-f69d-4643-80de-24bd84674bfe

therefore, I am unable to retrieve the correct information based on the id