-
Notifications
You must be signed in to change notification settings - Fork 111
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Expo Router v2 mounting a route twice #838
Comments
Same here |
Also experiencing the same issue. Thought I was doing routing incorrectly. |
yeah same problem here |
This is due to a bug in React Navigation where passing the seemingly correct navigation state will cause the stack to invalidate the second screen and re-mount it. You can work around this by using React Navigation to "push" the destination screen, the caveat being that import { View, Text } from "react-native";
import React from "react";
import { Link, useNavigation } from "expo-router";
type Props = {};
const MyAccountPage = (props: Props) => {
const navigation = useNavigation();
return (
<View>
<Text>MyAccountPage</Text>
{/* Correct navigation + URL, but re-renders */}
<Link href="/address">Address</Link>
{/* Correct navigation, single render, but incorrect URL and transition. */}
<Text
onPress={() => {
navigation.push("address");
}}
>
Address with React Nav
</Text>
</View>
);
};
export default MyAccountPage; Also worth mentioning that nesting |
# Why Prevent double renders by cloning state to avoid leaking state between functions. - fix expo/router#838 - fix expo/router#733 - fix expo/router#320 - The issue expo/router#320 has multiple different things linked, but the original case appears to be fixed. - possibly also addresses expo/router#847 <!-- Please describe the motivation for this PR, and link to relevant GitHub issues, forums posts, or feature requests. --> # How - Prevent mutating the input state to avoid invalidating the nested state. # Test Plan - The testing library doesn't seem to support this case. @marklawlor has been tasked with ensuring the original branch can detect the error https://github.com/expo/expo/compare/%40evanbacon/router/fix-838 Just in case the testing library isn't fixed, I ran locally with: - `app/_layout.js`, `app/(a)/_layout.js`, `app/b/_layout.js` ```js import { Slot } from "expo-router"; export default function RootLayout() { return <Slot /> } ``` - `app/(a)/index.js` ```js import { router, useNavigation } from "expo-router"; import { View } from "react-native"; export default function App() { // const navigation = useNavigation(); setTimeout(() => { router.push("/b"); // navigation.push("b"); }); return ( <View /> ); } ``` - `app/b/index.js` ```js import { usePathname } from 'expo-router'; import { Text, View } from 'react-native'; let i = 0; export default function Page() { const path = usePathname(); i++; return ( <View style={{ flex: 1, backgroundColor: i > 1 ? "red" : "white" }}> <Text>Path: {path}</Text> </View> ); } ``` <!-- Please describe how you tested this change and how a reviewer could reproduce your test, especially if this PR does not include automated tests! If possible, please also provide terminal output and/or screenshots demonstrating your test/reproduction. --> # Checklist <!-- Please check the appropriate items below if they apply to your diff. This is required for changes to Expo modules. --> - [ ] Documentation is up to date to reflect these changes (eg: https://docs.expo.dev and README.md). - [ ] Conforms with the [Documentation Writing Style Guide](https://github.com/expo/expo/blob/main/guides/Expo%20Documentation%20Writing%20Style%20Guide.md) - [ ] This diff will work correctly for `npx expo prebuild` & EAS Build (eg: updated a module plugin). --------- Co-authored-by: Expo Bot <34669131+expo-bot@users.noreply.github.com>
A fix has been published in |
thank you! |
@EvanBacon In 2.0.9,
|
@oliviercperrier Please create a new issue with a reproducible demo. We cannot assist you if you don't provide any information |
Which package manager are you using? (Yarn is recommended)
npm
Summary
Expo router V2 in mounting routes twice when navigating to an outside route from a tabs screen when the tabs screen and the outside screen is in a group, this issue is not present in v1.
In the example when navigating from
/my-account
to/address
theaddress/index.tsx
component is mounted twice as indicated byuseEffect(() => { console.log('Address Mount'); }, []);
In the
address/index.tsx
file, this is a big issue as it also plays the routing animation twice on Android.Removing the
(first-level)
group will fix the issue but in my use case I need it.Example app folder structure:
Minimal reproducible example
This example has a commit called "expo 49" which has the issue, and another commit called "No Issue on Expo 48" which has the project downgraded to expo router v1 with no code change
https://github.com/shessafridi/expo-router-bug
The text was updated successfully, but these errors were encountered: