undefined is not an object (evaluating 'navigation.navigate') in React Native-CodePudding

I have one button which is redirect to anothe page called SELECT_COMPANY_SCREEN.only i need to redirect to this page.

import { SELECT_COMPANY_SCREEN } from "../../constants/screen-names";
const SettingsCompanyCard = ({ navigation }) => {
<Button
        onPress={() => navigation.navigate("SELECT_COMPANY_SCREEN")}
        title="go to Company"
      />
}
export default SettingsCompanyCard;

but i am facing issues like below. How can i resolve this issue?

CodePudding user response：

use props.

const SettingsCompanyCard = (props) => {
 <Button
    onPress={() => props.navigation.navigate("SELECT_COMPANY_SCREEN")}
    title="go to Company"
  />
}

CodePudding user response：

I think I had the same issue a while ago.

If your SteeingsComapnyCard component isn't the component you set as component in your Screen-component, you can pass the prop navigation from its parent:

When defining, just do <SettingsCompanyCard navigation={navigation} />