Thought leadership from the most innovative tech companies, all in one place.

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…


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


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

const Home = () => {
  return (
      <SearchButton />

export default Home;


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

function SearchButton() {
  const navigation = useNavigation();
  return (
      onPress={() => navigation.navigate("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