title: React Native: How to redirect
body: <p>I'm new to React Native and I just don't get how react-navigation works. I've already spend multiple work days and tried different variants, but I don't even get the examples from <a href="https://reactnavigation.org/docs/intro/" rel="nofollow noreferrer">https://reactnavigation.org/docs/intro/</a> to work.</p>
  
  <p>My project is created with <code>create-react-native-app AwesomeProject</code>, like it's described on the <a href="https://facebook.github.io/react-native/docs/getting-started.html" rel="nofollow noreferrer">React Native Docs</a>.</p>
  
  <p>So I went back to my last working point (without routing).</p>
  
  <p>This is my File Structure:</p>
  
  <pre><code>root
  - src
  - - screens
  - - - LoginScreen.js
  - - - HomeScreen.js
  - App.js
  </code></pre>
  
  <p>In my App.js I just perform an easy call:</p>
  
  <pre><code>import LoginScreen from './src/screens/LoginScreen';
  export default LoginScreen;
  </code></pre>
  
  <p>This is a simplified version of my LoginScreen.js:</p>
  
  <pre><code>import React from 'react';
  import {
      StyleSheet,
      Text,
      View,
      AppRegistry,
      Button,
      ReactNative,
  } from 'react-native';
  
  /**
   * Actual View
   */
  class LoginScreen extends React.Component {
      constructor(props) {
          super(props);
          this.state = {
              // some values
          }
      }
  
      render() {
          return (
                  &lt;View style={[styles.containerOne]}&gt;/&gt;
                  // Some Input fields
                  &lt;Button
                      onPress={this.loginButtonOnPress.bind(this)}
                      title="Login"
                      style={[styles.loginButton]}
                  /&gt;
              &lt;/View&gt;
          );
      }
  
      loginButtonOnPress() {
          // Validation with fetch
      }
  }
  
  export default LoginScreen;
  
  /**
   * Style
   */
  const styles = StyleSheet.create({
      containerOne: {
          marginTop: -160,
          justifyContent: 'center',
          flex: 1,
          alignItems: 'center',
      }
      loginButton: {
          color: 'blue',
          marginTop: 10,
      }
  });
  </code></pre>
  
  <p>The LoginScreen.js should be the first displayed page. I want to load my HomeScreen.js file when loginbuttonOnPress get called. How am I supposed to do that? I've already found something like</p>
  
  <pre><code>const SimpleApp = StackNavigator({
    Login: { screen: LoginScreen },
    Home: { screen: HomeScreen },
  });
  </code></pre>
  
  <p>But I don't get this to work, too.</p>
  
  <p>I'm thankfull for every help I can get.</p>