react native - Pass navigation from child component to parent getting TypeError

Question

I'm facing an issue whenever i tried to navigate to another screens. I'm using the navigation in child component and it doesn't work even i passed the props to the parent component. This is my first time on using react navigation. I've tried many possible solution yet still can't solve this issue. I'm using react navigation 5 and i need help. I'm getting an error as such :

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

Home.js // Parent Component

class Home extends Component {
  render() {
    return (
      <Cards
      title="In Progress"
      imgUri={require('../assets/CardProgress.png')}
      navigateAction={() =>
        this.props.navigation.navigate('SiteAudit')
      }
    )
  }
}

Card.js // Child Component

const Cards = (props) => {
  return (
    <CardContainer
      backgroundColor={props.backgroundColor}
      onPress={() => {
        props.navigation.navigateAction;
      }}>
      <CardWrapper>
        <CardTitle>{props.title}</CardTitle>
        <CardImage source={props.imgUri} />
      </CardWrapper>
    </CardContainer>
  );
};

import React from 'react';
import {NavigationContainer} from '@react-navigation/native';
import {createStackNavigator} from '@react-navigation/stack';
import Dashboard from './screens/Dashboard';
import SiteAudit from './screens/SiteAudit';

const RootStack = createStackNavigator();
const DashboardStack = createStackNavigator();
const SiteAuditStack = createStackNavigator();

const DashboardScreen = () => {
  return (
    <DashboardStack.Navigator>
      <DashboardStack.Screen name="Dashboard" component={Dashboard} />
    </DashboardStack.Navigator>
  );
};

const SiteAuditScreen = () => {
  return (
    <SiteAuditStack.Navigator>
      <SiteAuditStack.Screen name="SiteAudit" component={SiteAudit} />
    </SiteAuditStack.Navigator>
  );
};

const Navigation = () => {
  return (
    <NavigationContainer>
      <RootStack.Navigator initialRouteName="Dashboard">
        <RootStack.Screen name="Dashboard" component={DashboardScreen} />
        <RootStack.Screen name="SiteAudit" component={SiteAuditScreen} />
      </RootStack.Navigator>
    </NavigationContainer>
  );
};

export default Navigation;

question from:https://stackoverflow.com/questions/65842375/pass-navigation-from-child-component-to-parent-getting-typeerror

Answer 1

Edit your card view as follows

<Cards
      title="In Progress"
      imgUri={require('../assets/CardProgress.png')}
      onPress={() => this.buttonPress()}
/>

const buttonPress = () => {
  this.props.navigation.navigate('Site Audit');
};

Edit your button as follows,

<TouchableOpacity
      style={styles.cardButton}
      onPress={onPress}
      <Text style={styles.cardTitle}>{this.props.title}</Text>
      <Image style={styles.imageCard} source={this.props.imgUri} />
</TouchableOpacity>