title: React Native render and switch with navigator onPress
body: <p>I've just started to develop with React Native a week ago.
  Can anyone help me with simple render and switch onPress to another view?</p>
  
  <p>I've read tones of examples, but most of them are cutted or not well documents as if on FaceBook Doc pages. There was no totally completed example with Nav.</p>
  
  <p>Here is what was done yet - View that should be rendered 1st:</p>
  
  <pre><code>import React, { Component } from 'react';
  import {
    AppRegistry,
    StyleSheet,
    Text,
    View,
    Image,
    TextInput,
    TouchableHighlight,
    TouchableNativeFeedback,
    Platform,
    Navigator
  } from 'react-native';
  
  export default class SignUp extends Component {
    buttonClicked() {
      console.log('Hi');
      this.props.navigator.push({title: 'SignUp', component:SignUp});
    }
  
    render() {
      var TouchableElement = TouchableHighlight;
      if (Platform.OS === ANDROID_PLATFORM) {
        TouchableElement = TouchableNativeFeedback;
      }
      return (
          &lt;View style={styles.container}&gt;
            &lt;Text style={styles.welcome}&gt;
              Welcome to Cross-Profi!
            &lt;/Text&gt;
            &lt;Text style={styles.field_row}&gt;
              &lt;TextInput style={styles.stdfield} placeholder="Profession" /&gt;
            &lt;/Text&gt;
            &lt;Text style={styles.field_row}&gt;
              &lt;TextInput style={styles.stdfield} placeholder="E-mail" /&gt;
            &lt;/Text&gt;
            &lt;Text style={styles.field_row}&gt;
              &lt;TextInput style={styles.stdfield} secureTextEntry={true} placeholder="Password" /&gt;
            &lt;/Text&gt;
            &lt;TouchableElement style={styles.button} onPress={this.buttonClicked.bind(this)}&gt;
              &lt;View&gt;
                &lt;Text style={styles.buttonText}&gt;Register&lt;/Text&gt;
              &lt;/View&gt;
            &lt;/TouchableElement&gt;
            {/* &lt;Image source={require("./img/super_car.png")} style={{width:120,height:100}} /&gt;*/}
            &lt;Text style={styles.instructions}&gt;
              Press Cmd+R to reload,{'\n'}
              Cmd+D or shake for dev menu
            &lt;/Text&gt;
          &lt;/View&gt;
      );
    }
  }
  
  const styles = StyleSheet.create({
    container: {
      flex: 1,
      justifyContent: 'center',
      alignItems: 'center',
      backgroundColor: 'lightblue',
    },
    welcome: {
      fontSize: 20,
      textAlign: 'center',
      margin: 10,
      color: 'darkred',
    },
    instructions: {
      textAlign: 'center',
      color: '#333333',
      marginBottom: 5,
    },
    field_row: {
      textAlign: 'center',
      color: '#999999',
      margin: 3,
    },
    stdfield: {
      backgroundColor: 'darkgray',
      height: 50,
      width: 220,
      textAlign: 'center'
    },
    button: {
      borderColor:'blue',
      borderWidth: 2,
      margin: 5
    },
    buttonText: {
      fontSize: 18,
      fontWeight: 'bold'
    }
  });
  
  const ANDROID_PLATFORM = 'android';
  </code></pre>
  
  <p>Navigator class that should render different views:</p>
  
  <pre><code>import React, { Component } from 'react';
  import {
    AppRegistry,
    StyleSheet,
    Text,
    View,
    Platform,
    Navigator
  } from 'react-native';
  
  var MainActivity = require('./app/MainActivity.js');
  var SignUp = require('./app/SignUp.js');
  
  class AwesomeProject extends Component {
    /*constructor(props) {
      super(props);
      this.state = {text: ''};
    }*/
  
    render() {
      // this.props.navigator.push({title:'SignUp'});
      return (
        &lt;Navigator initialRoute={{title:'SignUp', component:SignUp}}
        configureScene={() =&gt; {
                      return Navigator.SceneConfigs.FloatFromRight;
                  }}
        renderScene={(route, navigator) =&gt;
          {
            console.log(route, navigator);
            if (route.component) {
              return React.createElement(route.component, {navigator});
            }
          }
        } /&gt;
      );
    }
  }
  
  const ANDROID_PLATFORM = 'android';
  
  const routes = [
    {title: 'MainActivity', component: MainActivity},
    {title: 'SignUp', component: SignUp},
  ];
  
  AppRegistry.registerComponent('AwesomeProject', () =&gt; AwesomeProject);
  </code></pre>
  
  <p>It doesn't seem to be clear whether there must be <code>require</code> of a class and declaration of class as <code>export default</code>.</p>
  
  <p>There is an error: Element type is invalid: expected a string, ... but got object etc</p>
  
  <p>Help with examples would be great. Thx</p>