title: Why react-router-native does not render my component?
body: <p>Trying to implement a <code>protectedRoute</code> utils for react-native project, which basicly looks for JWT. First it shows loading indicator, and if there is no JWT present it would redirect to <code>/login</code>.</p>
  
  <pre><code>const LoadingComponent = () =&gt; (
    &lt;View&gt;
      &lt;ActivityIndicator/&gt;
    &lt;/View&gt;
  )
  
  class PrivateRoute extends React.Component {
    state = {
      loading: true,
      jwt: null,
    }
    componentDidMount() {
      storage.retrieve('JWT').then(jwt =&gt; this.setState({ loading: false, jwt }))
    }
    render() {
      const { children } = this.props;
      const { jwt, loading } = this.state;
      if (loading) {
        return &lt;Route {...children} component={LoadingComponent}/&gt;
      }
      if (!jwt) {
        return &lt;Redirect to="/signup" /&gt;;
      }
      return &lt;Route {...children} /&gt;
    }
  }
  
  export default PrivateRoute;
  </code></pre>
  
  <p><code>this.props.children</code> has all the required information to make a Route in the application. The original idea is that in case of loading we would just overwrite <code>this.props.children.component</code> with custom loading screen.</p>
  
  <p>BUT the solution which does not give me error is (only warning):</p>
  
  <pre><code>    if (loading) {
        return LoadingComponent
      }
  </code></pre>
  
  <p>I have tried also to manually inline component as</p>
  
  <p><code>component={() =&gt; &lt;View&gt;{...}&lt;/View&gt;</code></p>
  
  <p><code>render={() =&gt; ...}</code></p>
  
  <p>However it also ends up as the same error. Invariant Violation: Element type is invalid: expected a string ..... but got: undefined</p>