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

Hello,

Recently we have been working with React Native for one of our application where we faced an issue with Android Navigator. Basically we had two lists Category List and Sub Category List and on tap of category list item we wanted to render sub category list. Following is the code for that.

<TouchableOpacity onPress={()=> this.pressRow(rowData)} >
<CardSection>
 <View style={thumbnailContainerStyle}>
<Image
 style={thumbnailStyle}
 source={{ uri: rowData.image }}
/>
 </View>
 <View style={headerContentStyle}>
<Text style={headerTextStyle}>{rowData.name}</Text>
 </View>
</CardSection>
</TouchableOpacity>

And following is function where we were using navigator.push to go to next view.

pressRow (rowData) {

    if(rowData.subcategory == true)
    {
      this.props.navigator.push({
        name: SubCategoryList,
        passProps: {rowId:rowData.id}
      });
    }
    else if(rowData.subcategory == false)
    {
      this.props.navigator.push({
        name: ProductList,
        passProps: {rowId:rowData.id}
      });
    }

 }

Here we are getting problem with error, this.props.navigator is undefined so were not able to go to second screen.

The problem here is on scope as we were having category list rendered in app container like this.


<CategoryList />

So props of parent are not passed to child and hence navigator was not available. To solve this all you have to do it add your child component like this.

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

And now navigator object will be available. Hope this solves your problem.