title: React Native - How to update screen on an already mounted component
body: <p>I have 2 screens: </p>
  
  <ul>
  <li>Home Screen</li>
  <li>Login Screen</li>
  </ul>
  
  <p>My entry point is my Home screen, if I am logged in (fetching datas), log out and then log in to another account. Since my Home component is already mounted, my data will not be updated and this.getDatas() will not be called again. I can't find solutions, I think I need to use "ComponentWillUpdate" in my Home.js to call this.getDatas() or something like that but you can't find the solution.</p>
  
  <p>Here's my code:</p>
  
  <p>Home.js</p>
  
  <pre><code>  componentDidMount = async () =&gt; {
      const { navigation } = this.props;
      if (!await AsyncStorage.getItem('auth')) {
        navigation.navigate('Login');
      } else {
        this.getDatas();
      }
    }
  
    getDatas() {
      axios.get(`${apiUrl}/me`).then((res) =&gt; {
        this.setState({
          datas: res.data.datas,
        });
      }).catch((err) =&gt; {
        console.warn(err);
      });
    }
  </code></pre>
  
  <p>Login.js</p>
  
  <pre><code>export default class Login extends Component {
    constructor(props) {
      super(props);
      this.state = {
        email: null,
        password: null,
      };
    }
  
    logIn() {
      const { email, password } = this.state;
      axios.post(`${apiUrl}/auth`, {
        email,
        password
      }).then((res) =&gt; {
        navigation.navigate('Home');
      }).catch((err) =&gt; {
        console.warn('Error:', err);
      });
    }
  }
  </code></pre>
  
  <p>App.js</p>
  
  <pre><code>const MainNavigator = createStackNavigator({
    Home,
    CreateGame,
    GamePreview,
    CardSelection,
    BonusCard,
    Game,
    GameResult
  }, { initialRouteName: 'Home', headerMode: 'none', });
  
  const LoginNavigator = createStackNavigator({
    Login,
    Subscribe,
    SubscribeNext,
    ForgottenPassword,
  }, { initialRouteName: 'Login', headerMode: 'none', });
  
  const RootNavigator = createSwitchNavigator({
    AuthLoading: AuthLoadingScreen,
    LoginNavigator,
    MainNavigator
  }, { initialRouteName: 'AuthLoading' });
  
  export default class App extends Component {
    render() {
      return &lt;RootNavigator /&gt;;
    }
  }
  </code></pre>
  
  <p>Any idea ?</p>