React Navigation Error: Undefined is not an Object (Evaluating '_this.props.navigation')

Question

I’m facing the following mistake:

Router.js

import {createAppContainer, createStackNavigator} from 'react-navigation'


import Main from './telas/Main'
import Voluntario from './telas/Voluntario'
import AppBase from './telas/AppBase'
import Login from './telas/TelaDeLogin'
import Perfil from './telas/Perfil'
import Servico from './telas/Servico'
import Cadastro from './telas/Cadastro'

const AppNavigator = createStackNavigator({
	'Login':{
		screen: Login
	},
	'Cadastro':{
		screen: Cadastro
	},
	'Appbase':{
		screen: AppBase
	},
	'Perfil':{
		screen: Perfil
	},
	'Main':{
		screen: Main
	},
	'Voluntario':{
		screen: Voluntario
	},
	'Servico':{
		screen: Servico
	}
}, {initialRouteName:'Login',
    defaultNavigationOptions: {
        title: 'Series',
        headerTintColor: 'white',
        headerStyle: {
            backgroundColor: '#00b6e8',
            borderBottomWidth: 1,
            borderBottomColor: '#C5C5C5',
        },
        headerTitleStyle: {
            color: 'white',
            fontSize: 30
        }
    }
})

const AppContainer = createAppContainer(AppNavigator)

export default AppContainer

Teladelogin.js

import React from 'react'
import { Dimensions, Image, Text, View, TextInput, TouchableOpacity, StyleSheet } from "react-native"

const logo = require('../imagens/logo-paranavai.png')

const resolucao = Dimensions.get("window")

export default Login = () => {
    return (
        <View style={{ backgroundColor: '#00b6e8', flex: 1 }}>
            <View style={{ flex: 3, alignContent: 'center', alignItems: 'center' }}>
                <Image style={{ resizeMode: 'contain', height: '35%', top: 10 }}
                    source={logo} />
            </View>

            <View style={{ flex: 2, paddingHorizontal: 20, justifyContent: 'space-evenly' }}>
                <TextInput style={styles.textInput} placeholder={'E-mail ou CPF'} />
                <TextInput style={styles.textInput} placeholder={'Senha'} />
                <TouchableOpacity>
                    <Text style={{ textDecorationLine: 'underline' }}>Esqueceu sua senha?</Text>
                </TouchableOpacity>
            </View>

            <View style={{ flex: 2, paddingHorizontal: 60, paddingTop: 20 }}>
                <TouchableOpacity style={styles.button} 
                onPress={() => this.props.navigation.navigate('Cadastro')}>
                    <Text style={styles.buttonText}>Entrar</Text>
                </TouchableOpacity>

            </View>
            <View style={{ flex: 3 , justifyContent: 'space-evenly'}}>
                <View style={{ paddingTop: 50, paddingHorizontal: 60, flex: 0.5 }}>
                    <TouchableOpacity style={styles.button} onPress={() => null}>
                        <Text style={[styles.buttonText, { fontSize: 30 }]}>Cadastrar-se</Text>
                    </TouchableOpacity>
                </View>

                <View style={{flex: 2}}>
                    <Text/>
                </View>

                <View style={{ flexDirection: 'row', justifyContent: 'space-evenly', bottom: 10, flex: 0.5}}>
                    <TouchableOpacity onPress={() => null}>
                        <Text style={{ textDecorationLine: 'underline' }}>Login com o Google</Text>
                    </TouchableOpacity>

                    <TouchableOpacity onPress={() => null}>
                        <Text style={{ textDecorationLine: 'underline' }}>Login anônimo</Text>
                    </TouchableOpacity>
                </View>
            </View>
        </View>
    );
}

const styles = StyleSheet.create({
    textInput: {
        fontSize: 20,
        height: (resolucao.height / 16),
        backgroundColor: "#fff",
        elevation: 1,
        borderRadius: 10,
    }, button: {
        backgroundColor: '#dedede',
        height: (resolucao.height / 13),
        borderRadius: 10,
        elevation: 1
    }, buttonText: {
        fontSize: 40,
        textAlign: 'center',
        textAlignVertical: 'center'
    }
})

Cadastro.js

import React from 'react'
import { Dimensions, Image, Text, View, TextInput, TouchableHighlight } from "react-native";

const Logo = require('../imagens/logo-paranavai.png')

const resolucao = Dimensions.get("window")

const Cadastro = () => {
    return (
        <View style={{ backgroundColor: 'rgb(64, 172, 212)', flex: 1, alignItems: "center", justifyContent: 'flex-start' }}>

            <Image source={Logo} style={{ width: resolucao.width, marginBottom: resolucao.height * 0.10, resizeMode: 'contain' }} />

            <View>

                <TextInput placeholder='Nome Completo' style={{
                    height: resolucao.height * 0.08,
                    width: resolucao.width * 0.90,
                    backgroundColor: 'rgb(54, 201, 240)',
                    borderRadius: 10, fontSize: 27,
                    marginBottom: 15
                }} />

                <TextInput placeholder='Email ou CPF' style={{
                    height: resolucao.height * 0.08,
                    width: resolucao.width * 0.90,
                    backgroundColor: 'rgb(54, 201, 240)',
                    borderRadius: 10,
                    fontSize: 27,
                    marginBottom: 15
                }} />

                <TextInput placeholder='Senha' style={
                    {
                        height: resolucao.height * 0.08,
                        width: resolucao.width * 0.90,
                        backgroundColor: 'rgb(54, 201, 240)',
                        borderRadius: 10,
                        fontSize: 27,
                        marginBottom: 15
                    }} />

                <TextInput placeholder='Confirmar Senha' style={{
                    height: resolucao.height * 0.08,
                    width: resolucao.width * 0.90,
                    backgroundColor: 'rgb(54, 201, 240)',
                    borderRadius: 10,
                    fontSize: 27,
                    marginBottom: 15
                }} />

                <TouchableHighlight style={{ backgroundColor: '#D3D3D3', height: 50, width: 150, borderRadius: 10, alignSelf: 'center' }}
                    onPress={() => null} underlayColor='#87CEEB'>
                    <Text style={{ fontSize: 35, textAlign: 'center', textAlignVertical: 'center', color: '#708090' }}>Finalizar</Text>
                </TouchableHighlight>

            </View>

        </View>
    )
}


export default Cadastro;

Answer 1

What happens is that "navigation" is sent as "prop" to the components cited in the route file. Your "login" is not a component, it is a function.

If you change your code from:

export default Login = () => {
 //Sua programação
}

for

export default class Login extends React.Component {
  render() {
    return (
     //Sua programação
    );
  }
}

The problem must stop occurring.

Here is more information:

https://reactnavigation.org/docs/en/navigation-prop.html

https://reactnavigation.org/docs/en/navigating-without-navigation-prop.html