apollo-client: makeVar / useReactiveVar can be updated from another screen?

I use react-native with apollo-client3.

In my App.js file that starts my project, I configure if I log in go to LoggedInNav else LoggedOutNav.

<ApolloProvider client={client}>
  <NavigationContainer>
    <View onLayout={onLayoutRootView}></View>
    {isLoggedIn ? <LoggedInNav /> : <LoggedoutNav />}
  </NavigationContainer>
</ApolloProvider>

And the state whether I log in or not is tracked from useReactiveVar.

  const isLoggedIn = useReactiveVar(isLoggedInVar);

In my LogIn.js file, I do log in and if it succeeds, I update my isLoggedInVar state made from makeVar of apollo/client from false to true.

export const isLoggedInVar = makeVar(false);
export const tokenVar = makeVar("");

export const logUserIn = async (token) => {
  try {
    await AsyncStorage.setItem("token", JSON.stringify(token));
    isLoggedInVar(true);
    tokenVar(token);
  } catch (e) {
    console.error(e);
  }
};

So I update my state of makeVar in another screen, but can App.js listen to this update and navigate from <LoggedInNav/> to <LoggedOutNav/>?

I think App.js file is the bottom of all screens of my app, it should work.

But in my app project, I feel sometimes it might works but sometimes it throws Network error.

And in this case How can I make switch between two Navs according to Login state? Please help me.