circuit

ERROR TypeError: undefined is not an object (evaluating '_this.props.navigation.navigate')

The solution




Photo by DAVIDCOHEN on Unsplash

Ever encountered this error → ERROR TypeError: undefined is not an object (evaluating ‘_this.props.navigation.navigate’) whilst working hard on your project? Fret not, you might want to try this out…

Solution

In this short & simplified example as a guideline, there will be 2 screens (‘SearchBar’ &_ ‘Home’_) and 1 button (‘SearchButton’ / SearchButton.js) on the Home.js screen which will lead you back to the SearchBar.js screen.

Take note of ‘import {useNavigation} from ‘@react-navigation/native’ and ‘const navigation = useNavigation();’

Home.js

import React from ‘react’;
import {View} from ‘react-native’;
import SearchButton from ‘../components/SearchButton’;

const Home = () => {
   return (
      <View>
      <SearchButton />
      </View>
  );
};

export default Home;

SearchButton.js

import React from ‘react’;
import {Button} from ‘react-native’;
import {useNavigation} from ‘@react-navigation/native’;

function SearchButton() {
     const navigation = useNavigation();
     return (
             <Button onPress = {() => navigation.navigate(‘SearchBar’)} title=”SearchBar”/>

     );
}

export default SearchButton;

Other use of ‘useNavigation()’ →

Create a searchbar and make the dropdown flatlist clickable through ‘TouchableOpacity’. Use ‘useNavigation()’ to navigate the flatlist _to another screen _of your preference after clicking on the flatlist.




Continue Learning