title: react native navigation - componentDidMount() fired twice
body: <p>I am new to React Native. I am trying to build an app which has a <code>Splash</code> screen that would later navigate to <code>Login</code> screen if a user has not been authenticated or the <code>Main</code> screen if the user is authenticated. This is done using <code>this.props.navigation.navigate()</code>
  The problem is that the <code>Splash</code> component would be mounted twice. I checked this by printing inside <code>componentDidMount()</code> of <code>Splash</code>. Because of this, the Login/Main screen enters twice, which looks very unpleasant. Is there any way to fix this? 
  Also, I want to add some delay when the screen changes from <code>Splash</code> to <code>Login</code> or <code>Main</code> using <code>setTimeout()</code>. Anyway to go about doing this?
  Here's my code:</p>
  
  <p>index.js</p>
  
  <pre class="lang-js prettyprint-override"><code>import React from 'react';
  import { createStore, applyMiddleware, compose } from 'redux';
  import { Provider } from 'react-redux';
  import { persistStore } from 'redux-persist';
  import reduxThunk from 'redux-thunk';
  import reducers from './src/reducers';
  
  import { StyleSheet } from 'react-native';
  import LoginScreen from './src/components/Login/LoginScreen';
  import Splash from './src/components/Login/Splash';
  import Navigation from './src/components/Navigation/Navigation';
  import { Font } from 'expo';
  import {
    createStackNavigator
  } from 'react-navigation';
  
  const createStoreWithMiddleware = applyMiddleware(reduxThunk)(createStore);
  const store = createStoreWithMiddleware(reducers);
  const persistor = persistStore(store);
  
  export default class App extends React.Component {
    constructor(props){
      super(props);
      this.state = {
        fontLoaded: false,
        currentScreen: 'Splash',
      };
      setTimeout(() =&gt; this.setState({currentScreen: 'Login'}), 2000);
    }
  
    async componentDidMount() {
      await Font.loadAsync({
        'Quicksand': require('./assets/fonts/Quicksand-Regular.ttf'),
        'Quicksand-Medium': require('./assets/fonts/Quicksand-Medium.ttf'),
        'Quicksand-Bold': require('./assets/fonts/Quicksand-Bold.ttf'),
      });
      this.setState({ fontLoaded: true });
    }
  
    render() {
      const MainNavigator = createStackNavigator({
        Splash: { screen: Splash },
        Main: { screen: Navigation },
        Login: { screen: LoginScreen },
      })
      if (this.state.fontLoaded)
        return (
          &lt;Provider store={store}&gt;
            &lt;MainNavigator&gt;&lt;/MainNavigator&gt;
          &lt;/Provider&gt;
        )
      else return null;
    }
  }
  
  const styles = StyleSheet.create({
    container: {
      flex: 1,
      backgroundColor: '#fff',
      alignItems: 'center',
      justifyContent: 'center',
    },
  });
  </code></pre>
  
  <p>Splash.js</p>
  
  <pre class="lang-js prettyprint-override"><code>import React from 'react';
  import { StyleSheet, Text, View, ImageBackground, Image, Button } from 'react-native';
  import bgImage from '../../../assets/images/login-background2.png';
  import logo from '../../../assets/images/app-logo.png';
  
  import { connect } from 'react-redux';
  import { checkAuth } from '../../actions/auth.actions';
  
  class Splash extends React.Component {
    static navigationOptions ={
      header: null
    }
    constructor(props){
      super(props);
      this.state = {
        stillLoading: true,
      }
    }
  
    componentDidMount() {
      this.props.checkAuth();
    }
  
    render() {
      if (this.props.authState.isLoginPending)
        return (
          &lt;ImageBackground source={bgImage} style={styles.backgroundContainer}&gt;
                &lt;View style={styles.logoContainer}&gt;
                    &lt;Image source={logo} style={styles.logo}&gt;&lt;/Image&gt;
                    &lt;Text style={styles.logoText}&gt; Welcome to HealthScout&lt;/Text&gt;
                &lt;/View&gt;
          &lt;/ImageBackground&gt;
        );
      else if (this.props.authState.isLoginSuccess){
        setTimeout(() =&gt; this.props.navigation.navigate('Main'));
        return null;
      }
      else{
        setTimeout(() =&gt; this.props.navigation.navigate('Login'));
        return null;
      }
    }
  }
  
  const mapStateToProps = state =&gt; {
    return {
      authState: state.authState
    }
  }
  
  const mapDispatchToProps = dispatch =&gt; {
    return {
      checkAuth: () =&gt; dispatch(checkAuth()),
    }
  }
  
  export default connect(mapStateToProps, mapDispatchToProps)(Splash);
  
  const styles = StyleSheet.create({
    backgroundContainer: {
      flex: 1,
      alignItems: 'center',
      width: null,
      height: null,
      justifyContent: 'center',
    },
    logoContainer: {
      alignItems: 'center',
    },
    logo: {
      width: 110,
      height: 149,
    },
    logoText: {
      color: '#fff',
      fontSize: 40,
      fontFamily: 'Quicksand',
      opacity: 0.7,
      marginTop: 20,
      marginBottom: 10,
      textAlign: 'center',
    },
  });
  </code></pre>