StackNavigator

import React, { Component } from 'react';
import { StyleSheet, Text, View, Button } from 'react-native';

// 1. Import the createStackNavigator and createAppContainer
import { createAppContainer } from 'react-navigation';
import { createStackNavigator } from 'react-navigation-stack';

// 4. Remove export default
class App extends Component {
  
  render() { 
    return ( <View style={styles.container}>
      <Text>We are in App component</Text>
      {/* 5. Moving between screens
      Moving to test component 
      See that its navigation.navigate */}
      <Button title="Go to Test" onPress={() => this.props.navigation.navigate("test")} />
    </View> );
  }
}
 
class Test extends Component {
  render() { 
    return ( <View style={styles.container}>
      <Text>We are in test componenet</Text>
      {/* 6. Moving to home component */}
      <Button title="Go to Test" onPress={() => this.props.navigation.navigate("home")} />
    </View> );
  }
}
 
const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

// 2. Create an const AppNavigator
const AppNavigator = createStackNavigator({
  // Route configuration shorthand
  home: App,
  test: Test,
})

// 3.  Export default the AppNavigator const
export default createAppContainer(AppNavigator);