title: React Native: Maximum Call Stack Size Exceeded Error After Adding Conditional
body: <p>I am receiving there error "Maximum Call Stack Size Exceeded". After adding a conditional to the navigation file in my code. The stack I am using is React-Native with Expo, Redux, GraphQL and my navigation library is react-navigation. I am working on iOS simulator. This is the code that breaks the
  app:</p>
  
  <pre><code>//navigations.js     
  if (!this.props.user.isAuthenticated) {
            return &lt;AuthenticationScreen /&gt;;
          }
  </code></pre>
  
  <p>and this is the entirety of the navigations.js</p>
  
  <pre><code>import React, { Component } from "react";
  import {
    addNavigationHelpers,
    StackNavigator,
    TabNavigator
  } from "react-navigation";
  import { connect } from "react-redux";
  import { FontAwesome } from "@expo/vector-icons";
  
  import HomeScreen from "./screens/HomeScreen";
  import ExploreScreen from "./screens/ExploreScreen";
  import FavoritesScreen from "./screens/FavoritesScreen";
  import ProfileScreen from "./screens/ProfileScreen";
  import AuthenticationScreen from "./screens/AuthenticationScreen";
  
  import { colors } from "./utils/constants";
  
  const TAB_ICON_SIZE = 20;
  
  const Tabs = TabNavigator(
    {
      Home: {
        screen: HomeScreen,
        navigationOptions: () =&gt; ({
          headerTitle: "Saga",
          tabBarIcon: ({ tintColor }) =&gt; (
            &lt;FontAwesome size={TAB_ICON_SIZE} color={tintColor} name="home" /&gt;
          )
        })
      },
      Explore: {
        screen: ExploreScreen,
        navigationOptions: () =&gt; ({
          headerTitle: "Explore",
          tabBarIcon: ({ tintColor }) =&gt; (
            &lt;FontAwesome size={TAB_ICON_SIZE} color={tintColor} name="search" /&gt;
          )
        })
      },
      Favorites: {
        screen: FavoritesScreen,
        navigationOptions: () =&gt; ({
          headerTitle: "Favorites",
          tabBarIcon: ({ tintColor }) =&gt; (
            &lt;FontAwesome
              size={TAB_ICON_SIZE}
              color={tintColor}
              name="file-video-o"
            /&gt;
          )
        })
      },
      Profile: {
        screen: ProfileScreen,
        navigationOptions: () =&gt; ({
          headerTitle: "Profile",
          tabBarIcon: ({ tintColor }) =&gt; (
            &lt;FontAwesome size={TAB_ICON_SIZE} color={tintColor} name="user" /&gt;
          )
        })
      }
    },
    {
      lazy: true,
      tabBarPosition: "bottom",
      swipeEnabled: false,
      tabBarOptions: {
        showIcon: true,
        showLabel: false,
        activeTintColor: colors.PRIMARY,
        inactiveTintColor: colors.LIGHT_GRAY,
        style: {
          backgroundColor: colors.BASE_GRAY,
          height: 50,
          paddingVertical: 5
        }
      }
    }
  );
  
  const AppMainNav = StackNavigator(
    {
      Home: {
        screen: Tabs
      }
    },
    {
      cardStyle: {
        backgroundColor: "#F1F6FA"
      },
      navigationOptions: () =&gt; ({
        headerStyle: {
          backgroundColor: colors.BASE_GRAY
        },
        headerTitleStyle: {
          fontWeight: "bold",
          fontSize: 24,
          color: colors.BLUE
        }
      })
    }
  );
  
  class AppNavigator extends Component {
    render() {
      const nav = addNavigationHelpers({
        dispatch: this.props.dispatch,
        state: this.props.nav
      });
      if (!this.props.user.isAuthenticated) {
        return &lt;AuthenticationScreen /&gt;;
      }
      return &lt;AppMainNav navigation={nav} /&gt;;
    }
  }
  
  export default connect(state =&gt; ({
    nav: state.nav,
    user: state.user
  }))(AppNavigator);
  
  export const router = AppMainNav.router;
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/k8cg8.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/k8cg8.png" alt="iOS Simulator"></a></p>
  
  <p>For good measure this is the user.js reducer:</p>
  
  <pre><code>const initialState = {
    token: null,
    isAuthenticated: false,
    info: null
  };
  
  export default (state = initialState, action) =&gt; {
    switch (action.type) {
      default:
        return state;
    }
  };
  </code></pre>
  
  <p>I can't see what would be causing an infinite loop.</p>
  
  <p>Update #1</p>
  
  <p>AuthenticationScreen.js (Minus Imports)</p>
  
  <pre><code>const Root = styled.View``;
  
  const T = styled.Text``;
  
  class AuthenticationScreen extends Component {
    state = {};
    render() {
      return (
        &lt;Root&gt;
          &lt;T&gt;AuthenticationScreen&lt;/T&gt;
        &lt;/Root&gt;
      );
    }
  }
  
  export default AuthenticationScreen;
  </code></pre>