How to fix error "undefined is not an object (evaluating '_this.props.navigation.navigate')" with react-navigation-stack

How to / Third Party Tooling
1

Hi, I updated visual studio code because it got damaged, because of a windows recovery that I did because I had lost my project, which WAS WORKING, now appears this error when I click Login button. And the solutions from internet haven’t been satisfactory. I have other views apart from Login.

App.js

import * as React from ‘react’;
import Registro from ‘./components/Registro’;
import Home from ‘./components/Home’;
import Login from ‘./components/Login’;
import {createStackNavigator} from ‘react-navigation-stack’;
import { createAppContainer } from ‘react-navigation’;

const RootStack = createStackNavigator({
  Home: {
    screen: () => <Home />,
    navigationOptions: {
      title: '',
      headerShown: false,
    }
  },
  Login: {
    screen: () => <Login />,
    navigationOptions: {
      title: '',
      headerTransparent: true
    }
  }
})

const App = createAppContainer(RootStack);

export default App;

Home.js


import * as React from 'react';
import { Text, View, Image, StyleSheet, TouchableOpacity} from 'react-native';
import { LinearGradient } from 'expo-linear-gradient';

export default class Home extends React.Component {

  static navigationOptions = {
      header: () => null
  }

  render(){
  return(
    <View style={{flex:1, flexDirection:'column'}}>

                  <View style={{flex:0.2}}></View>
                  <View style={{flex:1}}>
                    <LinearGradient
                      colors={['red', '#c21500', '#860e00']}
                      style={styles.button}>
                        <TouchableOpacity
                          onPress={
                            () => this.props.navigation.navigate('Login' )
                          }
                        >
                          <Text style={{fontSize: 15, color:'#f6c70c', alignSelf: 'center'}}>INGRESA</Text>
                        </TouchableOpacity>
                    </LinearGradient>
                  </View>
                  <View style={{flex:0.2}}></View>
              </View>
            </View>
          </View>
          </View>
      </View>
    </View>
  );
    }
}

const styles = StyleSheet.create({
  button: {
    padding: 15,
    alignItems: 'center',
    borderRadius: 4,
    width: 122,
    alignSelf: 'center',
  },
});

Login.js


import * as React from 'react';
import {
  Text,
  View,
  TextInput,
  ScrollView,
  StyleSheet,
  Pressable
} from 'react-native';
import Icon from 'react-native-vector-icons/FontAwesome';
import { LinearGradient } from 'expo-linear-gradient';

export default class Login extends React.Component {

  render(){
    return(
      <ScrollView style={styles.container}>    
          <View style={{flex:1, flexDirection:'column'}}>
              <View style={{flex: 1, flexDirection: 'row', justifyContent: 'center', alignItems: 'center'}}>
                <Text style={{fontSize: 18, color: 'white', textAlignVertical: "center", textAlign: "center", shadowColor: 'royalblue'}}>Ingresa tus datos<Text>{"\n"}</Text></Text>    
              </View>

              <View style={{flex: 1, flexDirection: 'column'}}>
                <View style={styles.inputGroup}>
                <Icon style={styles.searchIcon} name="user" size={20} color="#000"/>
                  <TextInput placeholder=" Correo o celular" />
                </View>

                <View style={styles.inputGroup}>
                  <Icon style={styles.searchIcon} name="lock" size={20} color="#000"/>
                  <TextInput placeholder=" Contraseña" autoCompleteType="password" />
                </View>

                <View>
                  <LinearGradient
                    // Button Linear Gradient
                    colors={['#4c669f', '#347BB4', '#192f6a']}
                    style={styles.button}>
                    <Text style={{color: 'white'}}>Iniciar sesión</Text>
                  </LinearGradient>
              </View>
              <View><Text>{"\n"}</Text></View>
            </View>
          </View>
      </ScrollView>
    );
  }
}

Please help me. Thanks