mobx - RootNavigator rendering twice in react native 0.63.3

Question

This is the RootNavigator for our react native app. For some reason it renders twice, can anyone explain why. It sits inside top level App component wrapped in a mobx store provider.

Heres the offending function

function RootNavigator() {
  const { authStore } = useStores();
  console.log('STACK NAV')
  return (
    <NavigationContainer>
      <Stack.Navigator
        headerMode="none"
        screenOptions={{ cardStyle: { backgroundColor: 'white' } }}>
        {!authStore.authUser && (
          <Stack.Screen name="SignIn" component={SignInScreen} />
        )}
        {authStore.authUser && (
          <Stack.Screen name="Authenticated" component={AuthenticatedDrawer} />
        )}
      </Stack.Navigator>
    </NavigationContainer>
  );
}

This log gets logged twice when the app loads.

This is the parent store provider:

function StoreProvider({ children }: StoreProviderProps) {
  const [stores, setStores] = useState(createStores());
  const resetStores = useCallback(() => {
    setStores(createStores());
  }, []);
  return (
    <StoreContext.Provider value={{ ...stores, resetStores }}>
      {children}
    </StoreContext.Provider>
  );
}

This is the App component where the RootNavigator is wrapped in the store provider. When i put logs in above RootNavigator then only happen once.

const App = () => {
  useEffect(() => {
    SplashScreen.hide();
  }, []);
  return (
    <StoreProvider>
      <RootNavigator />
    </StoreProvider>
  );
};

I appreciate these are small chunks of code but they should describe the way the root navigator is wrapped in enough detail i hope.

Thanks for your help!

Answer 1

等待大神解答