React Native : Undefined is not object (evaluating 'navigation.navigate')-CodePudding

I Use Custom Drawer on React Native. and I Have 3 Bottom Tab Navigator. Chat, Home and Profile Tab. And then on Home I create some of box, if box clicked, it would be navigate to another view.

this is MenuHome Component that i called when the Home Navigation Pressed.

const MenuHome = ({ navigation }) => {
  return (
    <View style={styles.container}>
      <TouchableOpacity
          style={styles.box}
          onPress={() => navigation.navigate('CashBank')}
       >
       <View style={styles.inner}>
         <Text style={styles.titleText}>CASH BANK</Text>
       </View>
      </TouchableOpacity>
    </View>
  )
}

and I import MenuHome on Home Component.

const Home = ({ navigation }) => {
  return (
    <View>
      <MenuHome />
    </View>
  )
}

and i've been create CashBank Component, but i get error Undefined is not object (evaluating 'navigation.navigate')

CodePudding user response：

Your MenuHome component takes the navigation as prop so you have to pass the navigation object to it

const Home = ({ navigation }) => {
      return (
        <View>
          <MenuHome navigation={navigation} />
        </View>
      )
    }

Another solution would be to use the hook provided by the library in your MenuHome component

import {useNavigation} from '@react-navigation/native';
const MenuHome = () => {
  const navigation = useNavigation();
  return (
    <View style={styles.container}>
      <TouchableOpacity
          style={styles.box}
          onPress={() => navigation.navigate('CashBank')}
       >
       <View style={styles.inner}>
         <Text style={styles.titleText}>CASH BANK</Text>
       </View>
      </TouchableOpacity>
    </View>
  )
}