"Error: Undefined is not an object" when adding navigation.navigate to a component?

Question

I'm trying to implement navigation into my practice app:

onPress will cause a move from HomeScreen to ListingReview.

I'm not sure what's going wrong to be honest, though I have suspect I'm not passing props correctly.

Please help!

This is my repo: https://github.com/rphly/practice (Each object is created in a separate .js file in src/components.)

Index.js

import React, { Component } from 'react';
import { AppRegistry, ScrollView } from 'react-native';
import { StackNavigator } from 'react-navigation';
import Header from './src/components/Header';
import Card from './src/components/Card';
import ListingsFeed from './src/components/ListingsFeed';
import ListingReview from './ListingReview';

class HomeScreen extends Component {

    render() {

        return (
                <ScrollView> 
                    <Header />
                    <ListingsFeed />
                </ScrollView>
            );
        }
    }

export const App = StackNavigator({
    Home: { screen: HomeScreen, navigationOptions: {header: null} },
    ListingReview: { screen: ListingReview },
});

AppRegistry.registerComponent('hackathon', () => App);

ListingDetails.js (where I'm implementing onPress)

import React from 'react';
import { View, Text, Image, Button } from 'react-native';
import { StackNavigator } from 'react-navigation';
import Card from './Card';
import CardSection from './CardSection';

 const ListingDetails = (props) => {

    return (

    <Card>
        <CardSection>
            <View style={styles.titleContainerStyle}>   
                <Text style={styles.titleContentStyle}>{props.listing.title}</Text>
            </View>
            <View style={styles.thumbnailContainerStyle}>
                <Image style={styles.thumbnailStyle} source={{uri: props.listing.primary_photo_url}}/>
            </View>

            <View style={styles.headerContentStyle}>    
                <Text style={{marginBottom: 5}} numberOfLines={15}>{props.listing.description.trim()}</Text>
                <Text style={styles.priceContentStyle}>${props.listing.price}</Text>
            </View>

            <Button
                onPress={() => navigation.navigate('ListingReview')}
                title= "Mark Listing"
                color = "#D2232A"
                />

        </CardSection>
    </Card>
    );
 };

 const styles = {
    headerContentStyle: {
        //backgroundColor: '#D2D2D2D2',
        justifyContent:'center',
        alignItems: 'center',
        marginLeft: 10
    },

    titleContainerStyle: {
        marginLeft: 10,
        marginBottom: 2,
        marginTop: 2

    },

    titleContentStyle: {
        fontSize: 15,
        fontWeight: 'bold'

    },

    thumbnailStyle: {
        height: 180,
        width: 180
    },

    thumbnailContainerStyle: {
        flexDirection: 'row',
        justifyContent: 'center',
        padding: 2,
        marginLeft: 5,
        marginRight: 5,
        marginTop: 5,
        marginBottom: 5

        //alignItems: 'flex-start'
    },

    priceContentStyle: {
        fontSize: 15,
        color: 'green'

    }
 };

 export default ListingDetails;

ListingFeed.js (where I connect ListingDetails and Index)

import React, { Component } from 'react';
import axios from 'axios';
import { View } from 'react-native';
import ListingDetails from './ListingDetails'

class ListingsFeed extends Component {
    state = { listings:[] };

    componentWillMount() {
        axios.get('example.com/i-removed-the-url')
        .then( response => this.setState({ listings:response.data.data.products}));
        // this.setState({ listings:response.data.data.products})
    }

    renderListings() {
        return this.state.listings.map(listing =>
            <ListingDetails key={listing.id} listing={listing}/>
        );
    }

  render() {
    console.log(this.state);

    return (
      <View>
        {this.renderListings()}
      </View>
    );
  }
}

export default ListingsFeed;

Answer 1

You have to pass the navigation props from your HomeScreen to your ListingsFeed component like <ListingsFeed navigation={this.props.navigation}/>. And then, to pass this same props to your ListingDetails : <ListingDetails key={listing.id} listing={listing} navigation={this.props.navigation}/>

In your ListingDetails component you call the navigation.navigate('ListingReview') function, but the navigation is defined nowhere in your component. You have to call props.navigation.navigate('ListingReview') instead (from props) or get a navigation const from props : const {navigation} = props;

Answer 2

ListingDetails.js and ListingsFeed.js not in the stack.

export const App = StackNavigator({
Home: { screen: HomeScreen, navigationOptions: {header: null} },
ListingReview: { screen: ListingReview },
ListingDetails: { screen: ListingDetails },
ListingsFeed:{screen:ListingsFeed}
});