Device context doesn't work with Expo Router

[JamesHemery]

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 https://github.com/expo/router/discussions/721

[atanaskanchev]

+1 still doesn't work with the latest expo-router

[jaredh159]

@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.

[atanaskanchev]

I can confirm that this issue is resolved in v4, thanks @JamesHemery

[Kraktoos]

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?