useCurrentBreakpoint not updating at root of application

[gciluffo]

Im wondering if it is possible to show/hide certain components based on the current break point from the root of the application. Example:

App.tsx

function App() {
  const currentBreakpoint = useCurrentBreakpoint();
  console.log('Current breakpoint in app.tsx', currentBreakpoint);

  return (
          <StacksProvider
            breakpoints={[
              ['mobile', 0],
              ['desktop', 992],
            ]}
            spacing={4}>
            <NavigationContainer
              linking={linking}
              fallback={<Text>Loading...</Text>}>
                <Stack.Navigator>
                  {currentBreakpoint === 'desktop' ? <Stack.Screen name="DesktopTabView" component={DesktopTabView} /> :  <Stack.Screen name="MobileView" component={MobileView} />}
                </Stack.Navigator>
            </NavigationContainer>
          </StacksProvider>
  );
}

export default App;

When the app first bootstraps it shows a console log. But when re-adjusting the screen size the currentBreakpoint value does not update in App.tsx. It works fine in lower components. But I think this makes sense because we are using useCurrentBreakpoint before we declare the StacksProvider.

Any idea on how to get around this? One solution is to make a Navigation child component where we can handle that logic in there instead of at the root of the application, but it would be nice to have this logic where we define the navigation stack as well. Thoughts?

[gciluffo]

We can use useCurrentBreakpoint in a child component in app.tsx where we can also define our navigation stack.