Cannot read property 'navigate' of undefined - React Native Navigation

I am currently working on a app which works with react native and I tried to make a flow using react-navigation working on this tutorial but I am having trouble at the point of running my project, I've done a lot of research and i just cant get to the solution, first for all I am using react-native-cli: 2.0.1 and react-native: 0.48.3, this is my code:

App.js:

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

class App extends Component {
    static navigationOptions = {
        title: 'Welcome',
    };

    render() {
        console.log(this.props.navigation);
        const { navigate } = this.props.navigation;
        return (
            <View>
                <Text>Go to maps!</Text>
                <Button
                    onPress={() => navigate('Map')}
                    title="MAP"
                />
            </View>
        );
    }
}

export default App;

my Router.js

import {
    StackNavigator,
  } from 'react-navigation';

  import MapMarker from './MapMarker';
  import App from './App';

  export const UserStack = StackNavigator({
    ScreenMap: 
    {
        screen: MapMarker,
        navigationOptions:
        {
            title: "Map",
            header:null
        },
    },
    ScreenHome: 
    {
        screen: App,
        navigationOptions:
        {
            title: "Home",
            headerLeft:null
        },
    },
});

As you can see this is a pretty basic App which i just cant make work, this is a screenshot of my error on the simulator:

I would really really appreciate if you guys could help me with this. Thanks.