Skip to content
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

Device context doesn't work with Expo Router #234

Closed
JamesHemery opened this issue Jul 3, 2023 · 4 comments
Closed

Device context doesn't work with Expo Router #234

JamesHemery opened this issue Jul 3, 2023 · 4 comments

Comments

@JamesHemery
Copy link
Contributor

JamesHemery commented Jul 3, 2023

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

@atanaskanchev
Copy link

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

@jaredh159
Copy link
Owner

@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
Copy link

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

@Kraktoos
Copy link

Kraktoos commented Apr 2, 2024

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?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

4 participants