react navigation

import React from 'react';
import {
  AppRegistry,
  Text,
  View,
  Button,
  Dimensions
} from 'react-native';
import { StackNavigator } from 'react-navigation';

class HomeScreen extends React.Component {
  static navigationOptions = {
    title: 'First Screen',
  };
  render() {
    const { width, height } = Dimensions.get('window')
    const { navigate } = this.props.navigation;
    return (
      <View style = {{backgroundColor: 'red', width: width, height: height}}>
        <Text>First Screen!</Text>
        <Button
          onPress={() => navigate('Chat', { user: 'Lucy' })}
          title="Second Screen"
        />
      </View>
    );
  }
}

class ChatScreen extends React.Component {
  static navigationOptions = {
    // Nav options can be defined as a function of the navigation prop:
    title: ({ state }) => `Second Screen`,
  };
  render() {
    const { width, height } = Dimensions.get('window')
    // The screen's current route is passed in to `props.navigation.state`:
    const { params } = this.props.navigation.state;
    const { navigate } = this.props.navigation;    
    return (
      <View style = {{backgroundColor: 'blue', width: width, height: height}}>
        <Text>Second Screen</Text>
        <Button
          onPress={() => navigate('Last', { user: 'Lucy' })}
          title="Last Screen"
        />
      </View>
    );
  }
}

class LastScreen extends React.Component {
  static navigationOptions = {
    title: 'Welcome',
  };
  render() {
    const { width, height } = Dimensions.get('window')
    const { navigate } = this.props.navigation;
    return (
      <View style = {{backgroundColor: 'green', width: width, height: height}}>
        <Text>LastScreen</Text>

      </View>
    );
  }
}
const SimpleApp = StackNavigator({
  Home: { screen: HomeScreen },
  Chat: { screen: ChatScreen },
  Last: { screen: LastScreen }
});

AppRegistry.registerComponent('SimpleApp', () => SimpleApp);