title: React Native - Displaying a Loading Screen Component in a Javascript Promise
body: <p>In the code below (in <strong>auth_shared.js</strong>), I have a <code>Loading</code> component that I wish to display when the promises <code>signInWithEmailAndPassword()</code> or <code>createUserWithEmailAndPassword()</code> are called (whenever the user hits the "Log in" or "Sign up" buttons). </p>
  
  <p>To do this, I thought it was best to create a state called <code>isLoading</code> and set it to <code>false</code> initially. In <code>render()</code>, I then check the value of <code>isLoading</code> and determine if I should load the <code>Loading</code> component or the Log in or Sign up fields. If <code>signInWithEmailAndPassword()</code> is called I then set <code>isLoading = true</code> in an attempt to display the <code>Loading</code> component while the promise is validating the users <code>email</code> and <code>password</code>. However, this does not seem to work and I am not sure why! Can someone please provide some insight into this? Thank you. Here is my code:</p>
  
  <p><strong>loading.js</strong></p>
  
  <pre><code>import React, { Component } from 'react';
  import {
    ActivityIndicator,
    Text,
    View
  } from 'react-native';
  
  import styles from 'TextbookSwap/app_styles';
  
  export default class Loading extends Component {
    render() {
      return (
        &lt;View style={styles.loadingBG}&gt;
          &lt;ActivityIndicator
            animating={true}
            color="white"
            size="large"
            style={{margin: 15}}
          /&gt;
  
          &lt;Text style={styles.loadingText}&gt;
            {this.props.loadingText} 
          &lt;/Text&gt;
        &lt;/View&gt;
      );
    }
  }
  </code></pre>
  
  <p><strong>login.js</strong></p>
  
  <pre><code>import React, { Component } from 'react';
  
  // Components
  import AuthShared from '../auth_shared';
  
  export default class Login extends Component {
  
    render() {
      return (
        &lt;AuthShared login={true}/&gt;
      );
    }
  }
  </code></pre>
  
  <p><strong>signup.js</strong></p>
  
  <pre><code>import React, { Component } from 'react';
  
  // Components
  import AuthShared from '../auth_shared';
  
  export default class SignUp extends Component {
  
    render() {
      return (
        &lt;AuthShared login={false}/&gt;
      );
    }
  }
  </code></pre>
  
  <p><strong>auth_shared.js</strong></p>
  
  <pre><code>import React, { Component } from 'react';
  import {
    AlertIOS,
    Dimensions,
    Image,
    ScrollView,
    StyleSheet,
    Text,
    TextInput,
    TouchableOpacity,
    View
  } from 'react-native';
  
  import { KeyboardAwareScrollView } from 'react-native-keyboard-aware-scroll-view';
  import { Actions } from 'react-native-router-flux';
  
  import firebaseApp from 'TextbookSwap/firebase_setup';
  import styles from 'TextbookSwap/app_styles';
  
  // Components
  import HeaderImage from './header_image';
  import Loading from './loading.js';
  
  // For Firebase Auth
  const auth = firebaseApp.auth();
  
  export default class Login extends Component {
    constructor(props) {
      super(props);
  
      this.state = {
        isLoading: true,
        firstName: '',
        lastName: '',
        email: '',
        password: '',
        passwordConfirmation: ''
      }
    }
  
    componentDidMount() {
      let user = auth.currentUser;
      if (user) {
        console.log(msg)
        Actions.home
      } else {
        return;
      }
    }
  
    render() {
      if (this.state.isLoading) {
        return &lt;Loading loadingText="Loading..." /&gt;
      } else {
        return (
          &lt;View style={styles.mainContainer}&gt;
            &lt;KeyboardAwareScrollView 
              style={styles.scrollView}
              keyboardShouldPersistTaps={false}
              automaticallyAdjustContentInsets={true}
              alwaysBonceVertical={false}
            &gt;
              &lt;View style={styles.formInputContainer}&gt;
                &lt;HeaderImage /&gt;
                {this.props.login ? this.renderLogin() : this.renderSignup()}
              &lt;/View&gt;
  
              {this.props.login ? this.renderFooter() : null}
  
            &lt;/KeyboardAwareScrollView&gt;
          &lt;/View&gt;
        );
      }
    }
  
    renderLogin() {
      return (
        &lt;View&gt;
          {this.renderEmailAndPasswordForms()}
          &lt;View style={styles.authButtonContainer}&gt;
            &lt;TouchableOpacity
              style={styles.authButton}
              onPress={this._logInUser.bind(this)}
            &gt;
              &lt;Text style={styles.actionText}&gt;Log me in!&lt;/Text&gt;
            &lt;/TouchableOpacity&gt;
          &lt;/View&gt;
        &lt;/View&gt;
      );
    }
  
    renderSignup() {
      return (
        &lt;View&gt;
          &lt;View style={[styles.formInputWrapper, styles.formInputInlineWrapper]}&gt;
            &lt;View style={{borderColor: '#50514F', borderLeftWidth: 0, borderRightWidth: 0.5, borderTopWidth: 0, borderBottomWidth: 0}}&gt;
              &lt;TextInput
                style={[styles.formInput, styles.formInputInline]}
                autoFocus={true}
                autoCapitalize="none"
                autoCorrect={false}
                placeholder="First Name"
                onChangeText={(firstName) =&gt; this.setState({firstName})}
              /&gt;
            &lt;/View&gt;
  
            &lt;TextInput
              style={[styles.formInput, styles.formInputInline]}
              autoFocus={true}
              autoCapitalize="none"
              autoCorrect={false}
              placeholder="Last Name"
              onChangeText={(lastName) =&gt; this.setState({lastName})}
            /&gt;
          &lt;/View&gt;
          {this.renderEmailAndPasswordForms()}
  
          &lt;View style={styles.formInputWrapper}&gt;
            &lt;TextInput
              style={styles.formInput}
              secureTextEntry={true}
              autoCapitalize="none"
              autoCorrect={false}
              placeholder="Password Confirmation"
              onChangeText={(passwordConfirmation) =&gt; this.setState({passwordConfirmation})}
            /&gt;
          &lt;/View&gt;
  
          &lt;View style={styles.authButtonContainer}&gt;
            &lt;TouchableOpacity
              style={styles.authButton}
              onPress={this._signUpUser.bind(this)}
            &gt;
              &lt;Text style={styles.actionText}&gt;Sign me up!&lt;/Text&gt;
            &lt;/TouchableOpacity&gt;
          &lt;/View&gt;
        &lt;/View&gt;
      );
    }
  
    renderEmailAndPasswordForms() {
      return (
        &lt;View&gt;
          &lt;View style={styles.formInputWrapper}&gt;
            &lt;TextInput
              style={styles.formInput}
              autoFocus={true}
              autoCapitalize="none"
              autoCorrect={false}
              placeholder="Email"
              onChangeText={(email) =&gt; this.setState({email})}
            /&gt;
          &lt;/View&gt;
  
          &lt;View style={styles.formInputWrapper}&gt;
            &lt;TextInput
              style={styles.formInput}
              secureTextEntry={true}
              autoCapitalize="none"
              autoCorrect={false}
              placeholder="Password"
              onChangeText={(password) =&gt; this.setState({password})}
            /&gt;
          &lt;/View&gt;
  
        &lt;/View&gt;
      );
    }
  
    renderFooter() {
      return (
        &lt;View style={styles.footer}&gt;
          &lt;TouchableOpacity
            style={styles.footerButton}
            onPress={Actions.signup}
          &gt;
            &lt;Text style={styles.actionText}&gt;No account? Create one!&lt;/Text&gt; 
          &lt;/TouchableOpacity&gt;
        &lt;/View&gt;
      );
    }
  
    _logInUser() {
      let { isLoading, email, password } = this.state;
  
      auth.signInWithEmailAndPassword(email, password)
        .then(() =&gt; {
          isLoading = true;
          Actions.home;
          isLoading = false;
        })
        .catch((error) =&gt; {
          isLoading = false;
          switch(error.code) {
            case "auth/wrong-password":
              AlertIOS.alert('Uh oh!', 'Invalid password! Please try again.');
            break;
  
            case "auth/invalid-email":
              AlertIOS.alert('Uh oh!', 'Invalid email! Please try again.'); 
            break;
  
            case "auth/user-not-found":
              AlertIOS.alert('Uh oh!', 'Please check your credentials and try again');
            break;
          }
        });
    }
  
    _signUpUser() {
      let { firstName, lastName, email, password, passwordConfirmation } = this.state;
      // Check that email, password, and passwordConfirmation are present
      if (!firstName || !lastName || !email || !password || !passwordConfirmation) { 
        AlertIOS.alert('Uh oh!', 'Please fill out all fields'); 
  
      } else if (password == passwordConfirmation) {
  
        auth.createUserWithEmailAndPassword(email, password)
          .then((user) =&gt; {
            user.updateProfile({
              displayName: `${firstName} ${lastName}`
            })
            .then(Actions.home)
            .catch((error) =&gt; {
              AlertIOS.alert(`${error.code}`, `${error.message}`);
            });
          })
          .catch((error) =&gt; {
            AlertIOS.alert(`${error.code}`, `${error.message}`);
          });
  
      } else {
        AlertIOS.alert('Uh oh!', 'Passwords do not match');
      }
    }
  }
  </code></pre>