React Navigation - Cannot read property 'navigation' of undefined

Question

I am trying to get my button in the header to navigate to a gallery of images. When I press the button, I get "Cannot read property 'navigation' of undefined. Both of these files are in the same folder, which is "Profiles". Anybody know what this errors means and how to possibly fix it?

This is how I have the button set up in my headerRight.

//HomerSimpson.js    
import React from "react";
    import {
      Button,
      View,
      Text,
      StyleSheet,
      Image,
      List,
      ListItem,
      ImageBackground
    } from "react-native";

    import { withNavigation } from 'react-navigation';
    import HomerGallery from "./Profiles/HomerGallery";


    class HomerSimpson extends React.Component {
      static navigationOptions = {
        title: "Homer Simpson Profile",
        headerStyle: {
          backgroundColor: "#53b4e6"
        },
        headerTintColor: "#f6c945",
        headerTitleStyle: {
          fontWeight: "bold"
        },
        headerRight: (
          <Button
            onPress={() => this.props.navigation.navigate("HomerGallery")}
            title="Gallery"
            color="#f6c945"
          />
        )
      };

I made a separate component for the gallery itself and it's in the same folder as HomerSimpson.js.

//HomerGallery.js
import React from "react";
    import {
      Button,
      View,
      Text,
      StyleSheet,
      Image,
      List,
      ListItem,
      ImageBackground
    } from "react-native";

    import ImageSlider from 'react-native-image-slider';


    class HomerGallery extends React.Component {
      static navigationOptions = {
        title: "Homer's Gallery",
        headerStyle: {
          backgroundColor: "#53b4e6"
        },
        headerTintColor: "#f6c945",
        headerTitleStyle: {
          fontWeight: "bold"
        },
        headerRight: <Button onPress={() => alert("Bart loves to skateboard")} title="Facts" color="#f6c945" />
      };
      render() {
        return (<ImageSlider images={[
          'https://i.pinimg.com/474x/f1/36/ca/f136ca04817e60fa12f4a5680101ff8b.jpg',
          'https://i.pinimg.com/474x/b1/da/e2/b1dae2fe6ca1620e5d1949a2dcd33a0c.jpg',
          'https://i.pinimg.com/564x/7b/53/32/7b5332ef6a981b3c54e855495ea1c828.jpg',
          'https://i.pinimg.com/564x/f4/71/79/f471798aeeae427474f544691d572970.jpg',
          'https://i.pinimg.com/564x/32/3d/53/323d534f07de7d9ebeb58ede1f87d63e.jpg'
        ]}/>)
      };
    }

    export default HomerGallery;

The route for the gallery is "HomerGallery". Here is how it's set up in my navigation file. It's imported, but I'll leave those il

    import HomerGallery from "../../Profiles/HomerGallery";
    import { createStackNavigator, createAppContainer } from "react-navigation";

    const AppNavigator = createStackNavigator(
      {
        Login: Login,
        Home: HomeScreen,
        Details: DetailsScreen,
        Bio: BioScreen,
        EmployeeDirectory: EmployeeDirectory,
        HomerSimpson: HomerSimpson,
        BartSimpson: BartSimpson,
        MargeSimpson: MargeSimpson,
        LisaSimpson: LisaSimpson,
        MaggieSimpson: MaggieSimpson,
        SantasHelper: SantasHelper,
        BarneyGumble: BarneyGumble,
        MrBurns: MrBurns,
        KentBrockman: KentBrockman,
        RalphWiggum: RalphWiggum,
        OttoMan: OttoMan,
        Scratchy: Scratchy,
        HomerGallery: HomerGallery,
        BallBounce: BallBounce,
        OverlayPage: OverlayPage, 
        Rankings: Rankings
      },
      {
        initialRouteName: "HomerSimpson",
        defaultNavigationOptions: {
            headerStyle: '#f4511e',
        },
        headerTintColor: '#fff',
        headerTitleStyle: {
          fontWeight: 'bold',
        },
      },
    );

    export default createAppContainer(AppNavigator);

Answer 1

HomerSimpson.js

export default withNavigation(HomerSimpson)

This should pass all the necessary navigation props.

Answer 2

I think this is the offending line onPress={() => this.props.navigation.navigate("HomerGallery")}. The static object navigationOptions won't have access to this.props of the component.

You don't mention React Navigation, but I'm guessing that's what you're using. Here's an example from their docs that shows how you can access props by using a function instead of an object. Good luck!

static navigationOptions = ({ navigation }) => {
    return {
      title: navigation.getParam('otherParam', 'A Nested Details Screen'),
    };
  }

Update

Example applied to your code:

navigationOptions = ({ navigation }) => ({
  title: "Homer Simpson Profile",
  headerStyle: {
    backgroundColor: "#53b4e6"
  },
  headerTintColor: "#f6c945",
  headerTitleStyle: {
    fontWeight: "bold"
  },
  headerRight: (
    <Button
      onPress={() => navigation.navigate("HomerGallery")}
      title="Gallery"
      color="#f6c945"
    />
  )
});