React Native props.navigation.navigate 不是 object

Question

I'm doing the navigation between components on my React Native App, and so far everything was working relatively ok until I got stuck with this error.

This is the last component I want to navigate but I don't know why I can't do it, every other I followed the same structure for every component and they work, but this is the only one that doesn't.

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

import Icon from 'react-native-vector-icons/MaterialIcons';

const Icono = (props) => {
    return(
    <TouchableHighlight
      underlayColor={'transparent'}
      style={styles.icono}
      onPress={() => props.navigation.navigate('Login')}>
      <View>
        <Icon name="video-call" color="#7796ff" size={35} />
      </View>
    </TouchableHighlight>
        );
}

const styles = StyleSheet.create({
    icono: {
        paddingRight: 10,
        paddingLeft: 10,
        paddingTop: 17,
        textAlign: 'center',
      },
});

export default Icono;

This is the code I'm using to achieve the navigation.

import React, {useState} from 'react';
import {View, StyleSheet} from 'react-native';
import {Text} from 'react-native-paper';
import {TextInput} from 'react-native-paper';
import AsyncStorage from '@react-native-community/async-storage';
import {Button} from 'react-native-paper';
import {createStackNavigator} from '@react-navigation/stack';

const Stack = createStackNavigator();

const LoginScreen = (props) => {
  const [userId, setUserId] = useState('');
  const [loading, setLoading] = useState(false);

  const onLogin = async () => {
    setLoading(true);
    try {
      await AsyncStorage.setItem('userId', userId);
      setLoading(false);
      props.navigation.navigate('Call');
    } catch (err) {
      console.log('Error', err);
      setLoading(false);
    }
  };

  return (
    <View style={styles.root}>
      <View style={styles.content}>
        <Text style={styles.heading}>Ingresa tu ID</Text>
        <TextInput
          label="id"
          onChangeText={text => setUserId(text)}
          mode="outlined"
          style={styles.input}
        />
        <Button
          mode="contained"
          onPress={onLogin()}
          loading={loading}
          style={styles.btn}
          contentStyle={styles.btnContent}
          disabled={userId.length === 0}>
          Conectar al servicio de video
        </Button>
        <Button
          mode="contained"
          onPress={props.navigation.navigate('Contacto')}
          loading={loading}
          style={styles.btn}
          contentStyle={styles.btnContent}
          disabled={userId.length === 0}>
          Salir
        </Button>
      </View>
    </View>
  );
}


const styles = StyleSheet.create({
  root: {
    backgroundColor: '#fff',
    flex: 1,
    justifyContent: 'center',
  },
  content: {
    paddingHorizontal: 20,
    justifyContent: 'center',
  },
  heading: {
    fontSize: 18,
    marginBottom: 10,
    fontWeight: '600',
  },
  input: {
    height: 60,
    marginBottom: 10,
  },
  btn: {
    height: 60,
    alignItems: 'stretch',
    justifyContent: 'center',
    fontSize: 18,
  },
  btnContent: {
    alignItems: 'center',
    justifyContent: 'center',
    height: 60,
  },
});

export default LoginScreen;

This is the code I want to navigate to. It's worth to mention that I'm using react-navigation , and all my components are wrapped in the <NavigationContainer> component, but I don't understand why all the other component the navigation works and this one doesn't allow me to do it.

Answer 1

From your code the is a separate component which is not part of the navigation stack

You can solve this in two ways.

1. Pass the navigation as a prop from parent which is part of the stack

   <Icono navigation={this.props.navigation} />

2. Use the useNavigation hook inside icono and call it from there.