{React Native} Firebase – updating user values before navigation only work after soft refresh

I have this simple code

 state = { email: '', password: '', userName: '', errorMessage: null }

handleSignUp = () => {     
  firebase.auth().createUserWithEmailAndPassword(this.state.email, this.state.password).then((userInfo) =>{ 
      userInfo.user.updateProfile({displayName: this.state.userName}).then((s) => {this.props.navigation.navigate('Navigator')})
  })
    .catch(error => this.setState({ errorMessage: error.message }))
}

Everything works as expected until the app navigates to the Navigator screen.
Here when I log my firebase.auth() I get this object:

  Object {
        "displayName": null,
        "email": "[email protected]",
        "phoneNumber": null,
        "photoURL": null,
        "providerId": "password",
        "uid": "[email protected]",
      },

Note how the displayName is null.

Here is the issue… Only after a soft refresh I get:

  Object {
    "displayName": "Bro",
    "email": "[email protected]",
    "phoneNumber": null,
    "photoURL": null,
    "providerId": "password",
    "uid": "[email protected]",
  },

Note how the displayName has now a value.

What am I missing? am I using the .then() in the wrong order? is the promise order not correct?

I appreciate any suggestions!

Source: ReactJs