Custom options disrupt animation when navigating between same routes

[ozio]

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

yarn

Summary

I'm encountering an issue with expo-router@2 when using custom screen options. The problem arises when navigating between identical routes, e.g. from /[id] to /[id].

Without custom screen options

With custom screen options

/index.js

export default function Page() {
  const router = useRouter();

  return (
    <View>
      <TouchableOpacity
        onPress={() => router.push({
          pathname: "/[id]",
          params: { id: Math.round(Math.random() * 1000) },
        })}
      >
        <Text>Go inside</Text>
      </TouchableOpacity>
    </View>
  );
}

/[id].js

export default function Page() {
  const router = useRouter();
  const { id } = useLocalSearchParams();

  return (
    <View>
      <TouchableOpacity
        onPress={() => router.push({
          pathname: "/[id]",
          params: { id: Math.round(Math.random() * 1000) },
        })}
      >
        <Text>Go deeper</Text>
      </TouchableOpacity>
      <View>
        <Text>{id}</Text>
      </View>
    </View>
  );
}

/_layout.js:

export default function Layout() {
  return (
    <Stack>
      {/* if you uncomment following tag it will break the default behavior: */}
      {/* <Stack.Screen
        name="[id]"
        options={{
          title: "title",
        }}
      /> */}
    </Stack>
  );
}

Minimal reproducible example

I can't create Expo Snack, because it only allows to create a Snack for SDK<=48, but expo-router@2 is only available in SDK 49, so I put a minimal reproducible example in this repository.