How to navigate from a card list using TouchableOpacity in react native?

Question

Hi all i'm trying to make a navigation on clicking the card (list view) using TouchableOpacity.Also i want to pass cat_id (response returned from server)along with this(to CourseDetail page) ?Is it possible? Below is my code but i got the error 'can't find variable navigate'.please do help...

HomeScreen.js

const HomeScreen = ({course}) =>{
    const {name,featured_image,cat_id} = course;

    return(

<TouchableOpacity onPress={() =>navigate("CourseDetail")}>
    <Card>
     <CardSection>
     <View style={styles.thumbnailContainerStyle}>
         {course.term_id == '28' ? (<View></View>) : (
         <Text style={styles.userStyle}>{name}
         </Text> )}
    </View>
     </CardSection>
    </Card>
    </TouchableOpacity>
    );
};

const ScheduledApp = StackNavigator({
CourseDetail:{
    screen: CourseDetail
}
});

Answer 1

You should do the following changes. You need to access navigate method through navigation, and before you can do that in a functional component (since there is no longer a this.props) declare your navigation prop too.

Also, you can pass props between screens. Second parameter of navigate function gets passed, and by adding your parameters you can access them in navigated pages in the form: navigation.state.params.cat_id. (Note that if that page is a class you need to write this.props.navigation.state.params.cat_id)

const HomeScreen = ({course, navigation}) =>{
    const {name,featured_image,cat_id} = course;

    return(
        <TouchableOpacity onPress={() => navigation.navigate("CourseDetail", { cat_id })}>