Device context doesn't work with Expo Router
JamesHemery opened this issue · comments
When using Expo Router and add useDeviceContext
to root layout (app/_layout.tsx
) the screen will not be re-render when dimensions or scheme change. The layout is well re-rendered but the screen isn't.
Temp workaround:
// app/_layout.tsx
function useRouterKey(): string {
const dimensions = useWindowDimensions();
const colorScheme = useColorScheme();
return useMemo(() => {
return JSON.stringify({ ...dimensions, colorScheme });
}, [dimensions, colorScheme]);
}
export function RootLayout() {
useDeviceContext(tw);
const routerKey = useRouterKey();
return (
<ReactNavigationTheme>
<Stack key={routerKey}>
<Stack.Screen name="(auth)" options={{ headerShown: false }} />
<Stack.Screen name="(main)" options={{ headerShown: false }} />
</Stack>
</ReactNavigationTheme>
);
}
See expo/router#721
+1 still doesn't work with the latest expo-router
@JamesHemery am I correct in saying that this is another example of a memoization problem?
v4.0.0
(beta available now with npm install twrnc@next
) exposes a memoization buster (tw.memoBuster
) that can be passed as a key to break memoization, formalizing what I proposed in #112.
assuming I'm understanding correctly that this is at it's core, another manifestation of memoization, i'd like to close this and consolidate further discussions about memoization in #112.
I can confirm that this issue is resolved in v4, thanks @JamesHemery
I've tried putting id={tw.memoBuster}
and key={tw.memoBuster}
in all my navigators (Stacks, Tabs etc) but it still hasn't fixed it for me. Would you be able to share what you did specifically to fix it?