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

Question

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')

itishermann · Accepted Answer · 2021-11-09 18:01:38Z

1

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>
  )
}

answered Nov 9, 2021 at 18:01

itishermann

372 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related