TypeError: Udefined is not a object (evaluating 'this.props.navigation.navigate') problem in react-native

I had a problem executing my code in react-native (I updated the latest version and I thought the problem was not the update) The problem comes from when I import the react-navigation libraries and I want to redirect with an App.js button (main file) to login.js (the file I want to redirect or open) the error comes when the next line of code is placed

const {navigate} = this.props.navigation;

This line is added so that the word navigate of the following code makes sense

onPress = {navigate ('login')}

But when I type const {navigate} = this.props.navigation; I get the following error

  

TypeError: Udefined is not a object (evaluating   'this.props.navigation.navigate')

My question would be how to solve this error. Anyway so that I can see my problem better I leave my code. Thank you very much for any response.

My code:

//App.js
import React, { Component } from "react";
import { View, StyleSheet, Image, Text, Button } from "react-native";
import { StackNavigator }from 'react-navigation';
import login from './login';


//const onButtonPress = () => {
//   Alert.alert('myapp');
//}

const App = StackNavigator({
    login: login,
});

export default class indextempo extends React.Component {
    static navigationOptions = {
        title: 'myapp',
    };
  render() {
      const {navigate} = this.props.navigation;
      return (
      <View style={styles.root}>
        <Image
          source={require("./files/images/fond.jpg")}
          style={styles.image1}
        />
        <Text style={styles.text1}>myapp</Text>
        <Text style={styles.text2}>myapp</Text>
        <Image
          source={require("./files/images/linkedin.png")}
          style={styles.image4}
        />
        <Image
          style={styles.image5}
          source={require("./files/images/facebook.png")}
        />
        <Image
          style={styles.image6}
          source={require("./files/images/google.png")}
        />
        <View style={styles.rect1}>
         <Button
             onPress={navigate('login')} 
             title="Entrar en la demo" 
             color="rgba(82,113,255,1)"
         />
        </View>
      </View>
    );
  }
}
const styles = StyleSheet.create({
  root: { backgroundColor: "white", flex: 1 },
  image1: {
    position: "absolute",
    width: 515.4,
    height: 868.18,
    top: -14.55,
    left: -18.5
  },
  text1: {
    backgroundColor: "transparent",
    top: 57.95,
    left: 124.52,
    position: "absolute",
    height: 44.71,
    width: 110.94,
    fontSize: 38,
    color: "rgba(82,113,255,1)",
    textAlign: "center"
  },
  text2: {
    backgroundColor: "transparent",
    top: 101.97,
    left: 73.02,
    position: "absolute",
    height: 19.54,
    width: 213.94,
    fontSize: 15,
    color: "rgba(0,0,0,1)",
    textAlign: "center"
  },
  image3: {
    position: "absolute",
    width: 81.94,
    height: 73.21,
    top: 307.68,
    left: 139.03,
    margin: "auto"
  },
  rect1: {
    backgroundColor: "transparent",
    height: 40.79,
    width: 165.34,
    top: 550.81,
    left: 104.83,
    position: "absolute",
    borderWidth: 0,
    borderColor: "#000000",
    borderRadius: 100,
    opacity: 1,
    margin: "auto",
    },
  image4: {
    position: "absolute",
    width: 22.36,
    height: 22.53,
    top: 696.97,
    left: 336.72,
    margin: "auto"
  },
  image5: {
    top: 696.68,
    left: 313.01,
    width: 22.36,
    height: 22.53,
    position: "absolute",
    margin: "auto"
  },
  image6: {
    top: 696.4,
    left: 289.01,
    width: 22.36,
    height: 22.53,
    position: "absolute",
    margin: "auto"
  }
});

//login.js
import React, { Component } from "react";
import {
  Container,
  Header,
  Title,
  Content,
  Button,
  Item,
  Label,
  Input,
  Body,
  Left,
  Right,
  Icon,
  Form,
  Text
} from "native-base";
import { StackNavigator } from 'react-navigation';

class login extends Component {
  render() {
      return (
      <Container style={styles.container}>
        <Header>
          <Body>
            <Title>Myapp</Title>
          </Body>
          <Right />
        </Header>

        <Content>
          <Form>
            <Item stackedLabel>
              <Label>Nombre de usuario</Label>
              <Input />
            </Item>
            <Item stackedLabel last>
              <Label>Contraseña</Label>
              <Input secureTextEntry />
            </Item>
          </Form>
          <Button block style={{ margin: 15, marginTop: 50 }}>
            <Text>Iniciar sesion</Text>
          </Button>
        </Content>
      </Container>
    );
  }
}
export default login;

Thanks