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

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.