I am trying to use react navigation with react-native-super-grid getting error Cannot read property 'navigate' of undefined about react-native-super-grid

[saleel]

Its navigation prop is there, it should work.
Anyway, this issue is not associated with the Super Grid. Please try stack overflow with full code and error messages.

[saleel]

Probably because this.props.navigation is undefined. Are you sure this navigation prop is passed from the parent component?

[kobidkunda]

props is there . This is working code

`import React, {Component} from 'react';
import {
StyleSheet,
Text, StatusBar,TouchableOpacity,
View, Image, Dimensions,ScrollView,ActivityIndicator,TouchableHighlight
} from 'react-native';
import GridView from 'react-native-super-grid';
let BASE_URL = 'https://abc.xyz';
let PRODUCT_URL = '/api/products/all';
import { withNavigation } from 'react-navigation';

const {width, height} = Dimensions.get('window');

class Product extends Component<{}> {

constructor(props) {
    super(props);

    this.goToProductDetails = this.goToProductDetails.bind(this);

    this.state = {
        products : [],
        ProductsLoaded:false,
    };
   
}



goToProductDetails = async (item) => {

console.log(item)

    this.props.navigation.navigate('ProductDetails',{
        ProductName: item.name,
        ProductSlug: item.slug,
    })
  //  this.props.navigation.navigate('ProductDetails');


}




async  componentDidMount(){

    let response = await fetch(BASE_URL + PRODUCT_URL, {
        method: 'GET',
        headers: {
            'Accept': 'application/json',
            'Content-Type': 'application/json',
        },
    });

    let data = await response.json();
    let products = data.product.data;
    this.setState({ products: products});
    this.setState({ ProductsLoaded: true});
}

render() {

    let items = this.state.products;




   if (this.state.ProductsLoaded === true){
       return  (

           <View style={styles.productContainer}>
               <Text style={styles.productContainerTitle}>Best Selling Mobiles</Text>
               <GridView
                   itemDimension={140}
                   items={items}
                   style={styles.gridView}



                   renderItem={item => (
                       <TouchableOpacity style={[styles.itemContainer, { backgroundColor: '#ffffff' }]}
                                        // onPress={this.goToProductDetails}
                                         onPress={() => this.goToProductDetails(item)}



                       >
                           <Image
                               style={styles.ProductImage}
                               source={{uri: item.product_primary_images.cdn_url }}
                           >

                           </Image>
                           <Text style={styles.itemName}>{item.name.slice(0,15)}</Text>
                           <Text style={styles.itemPrice}>
                               ₹ {item.listing_price}</Text>
                       </TouchableOpacity>
                   )}
               />
           </View>

       )
   } else
    return (

           <View style={styles.productContainer}>
               <Text style={styles.productContainerTitle}>Best Selling Mobiles</Text>

               <View style={styles.gridViewLoading}>

                   <ActivityIndicator size="large" color="#4b8ccd" />

               </View>


           </View>

    );
}

}`