CODEWITHSUNDEEP
react-native
csb00
csb00

Reputation: 1155

Navigation is not defined

I was wondering if anyone can help me out. I created an image gallery in a different folder and I am trying to call it up on a profile page. Unfortunately, I get the "Navigation is not defined" error message. It's occurring on my onPress function, which you can see below. I imported { withNavigation } and I have my Image Gallery component exporting as the following: export default withNavigation(ImageGallery);.

Does anyone know why this may be occurring?

import React from "react";

import {
  View,
  Text,
  StyleSheet,
  Image,
  Button,
  ImageBackground
} from "react-native";

import ImageGallery from "./ImageGallery";

import { withNavigation } from "react-navigation";

class CharacterProfiles extends React.Component {
  static navigationOptions = {
    title: "The Simpsons",
    headerStyle: {
      backgroundColor: "#53b4e6"
    },
    headerTintColor: "#f6c945",
    headerTitleStyle: {
      fontWeight: "bold"
    },
    headerRight: (
      <Button
        onPress={() => navigation.navigate("ImageGallery")}
        title="Gallery"
        color="#f6c945"
      />
    )
  };

Upvotes: 0

Views: 590

Answers (1)

azundo
azundo

Reputation: 6052

You'll need to use the dynamic configuration for your navigation options as described in the docs [1] in order to have access to the navigation object:

class CharacterProfiles extends React.Component {
  // note that `navigationOptions` is now a function that receives `navigation`
  static navigationOptions = ({navigation}) => ({
    title: "The Simpsons",
    headerStyle: {
      backgroundColor: "#53b4e6"
    },
    headerTintColor: "#f6c945",
    headerTitleStyle: {
      fontWeight: "bold"
    },
    headerRight: (
      <Button
        onPress={() => navigation.navigate("ImageGallery")}
        title="Gallery"
        color="#f6c945"
      />
    )
  });

[1] https://reactnavigation.org/docs/en/navigation-options.html

Upvotes: 2

Related Questions