undefined is not an object (evaluating 'this.props.navigator.push')

Question

Can't make this work, have cross checked all the references, but it isn't helping. Here is all the code for the view.

I am not sure what I am missing, have required all the dependencies.

var React = require('react-native');
var Delivery = require('./Delivery');

var {
    View,
    Text,
    StyleSheet,
    TouchableHighlight,
} = React;


class ListItem extends React.Component{

    showDetails(){
        this.props.navigator.push({
            title: "Delivery details",
            component: Delivery
        });
    }

    render(){
        return(
            <TouchableHighlight onPress={this.showDetails.bind(this)} >
                <View style={styles.listItem}>
                    <View style={styles.listContents}>
                        <Text style={styles.listHead}>JMD Megapolis</Text>
                        <Text style={styles.listAddress}>1109, Sector 48, Sohna Road, Gurgaon 122018</Text>
                        <Text style={styles.listMeta}>2Kms from store</Text>
                    </View>
                    <View style={styles.listCost}>
                        <Text style={styles.cost}>₹40</Text>
                    </View>
                </View>
            </TouchableHighlight>
        )
    }
}

module.exports = ListItem;

Answer 1

If you're calling your ListView component like this, it should work. NavigatorIOS already passes the reference down (but just one level/generation).

<NavigatorIOS
    initialRoute={{
        title: 'List View Component',
        component: ListView,
    }} />

But if you're calling your ListView component from within a child component of the component referenced by NavigatorIOS, try this. From the component referenced by NavigatorIOS, where you call <ListView /> add a navigator property.

<ListView navigator={this.props.navigator} />

You need to remember to pass the properties you want to access in the child components so if you want to change the component displayed in <NavigatorIOS /> from a component not directly referenced by NavigatorIOS then you need to pass the navigator property down like above.

Hope this helps.