title: Pass navigation.navigate to Child Component
body: <p>Building an app using react-navigation. I have a parent component that pulls from firebase and renders data in a listview. The listview render component 'ListName' has an onRowPress function but this.props.navigation.navigate comes up undefined because navigation is not in that child component's state.</p>
  
  <p>Ive tried multiple ways of passing in navigation prop to the child and also importing navigation from react-navigation within the child.  Nothing works.</p>
  
  <p>Thanks!</p>
  
  <p>Here is my rootStackNavigator:</p>
  
  <pre><code>const RootStackNavigator = StackNavigator(
    {
      Login: { screen: LoginScreen },
      Main: { screen: MainTabNavigator },
      Feedback: { screen: ProvideInstanceScreen }
    },
    {
      navigationOptions: () =&gt; ({
        //headerTitleStyle: {
          //fontWeight: 'normal',
          tabBarVisible: false,
          header: null
        //},
      }),
    }
  );
  </code></pre>
  
  <p>Here is my Parent Component (which has navigation.navigate in its state)</p>
  
  <pre><code>import React from 'react';
  import { ListView, StyleSheet, Text, Image } from 'react-native';
  import { connect } from 'react-redux';
  import _ from 'lodash';
  import { MainButton, GenSection } from '../components/common';
  import { namesFetch } from '../actions';
  import ListName from '../components/ListName.js';
  
  class ProvideScreen extends React.Component {
  
    static navigationOptions = {
      header: null,
    };
  
  
    componentWillMount() {
    //console.log('HOME HOME HOME  PRINT', this.props)
      this.props.namesFetch();
  
      this.createDataSource(this.props);
    }
  
    componentDidMount() {
      console.log('PROVIDE PROPS   PRINT', this.props)
      this.createDataSource(this.props);
    }
  
    componentWillReceiveProps(nextProps) {
      //nextProps are next set of props component is rendered with and this.props is still old props
      console.log('NEXT PROPS', nextProps)
      this.createDataSource(nextProps);
    }
  
  
    createDataSource({ names }) {
      var namesArray = names.map(function(a) {return [a.name, a.uid];});
      //console.log('NAMES ARRAY PRINT', namesArray)
      const ds = new ListView.DataSource({
        rowHasChanged: (r1, r2) =&gt; r1 !== r2
      });
      this.dataSource = ds.cloneWithRows(namesArray);
    }
  
    renderRow(user) {
      return &lt;ListName name={user[0]} /&gt;;
    }
  
  
    render() {
      return (
        &lt;Image
          source={require('../components/images/mainBG.png')}
          style={styles.containerStyle}&gt;
          &lt;Text style={styles.textStyle}&gt;
            Provide Feedback
          &lt;/Text&gt;
          &lt;GenSection style={{paddingTop: 8}} /&gt;
          &lt;ListView
            enableEmptySections
            dataSource={this.dataSource}
            renderRow={this.renderRow}
            removeClippedSubviews={false}
          /&gt;
  
      &lt;/Image&gt;
      );
    }
  }
  
  const styles = StyleSheet.create({
    container: {
      flex: 1,
      paddingTop: 15,
      backgroundColor: '#fff',
    },
    containerStyle: {
      flex: 1,
      width: undefined,
      height: undefined,
      backgroundColor:'transparent'
    },
    textStyle:
    {
      paddingTop: 20,
      paddingLeft: 12,
      fontSize: 32,
      fontWeight: '200',
      color: '#597abc'
    }
  });
  
  
  
  const mapStateToProps = state =&gt; {
    //console.log('STATE PRINT', state.feedbackInput)
    const names = _.map(state.feedbackInput, (val) =&gt; {
      return { ...val};
    });
    //console.log('NAMES PRINT', names)
    return { names };
  };  //this is lodash   .map iterates over key value pairs and run function which assigns data to groups array
  
  
  
  export default connect(mapStateToProps, { namesFetch })(ProvideScreen);
  </code></pre>
  
  <p>Here is my child component (which does not have navigation.navigate in state):</p>
  
  <pre><code>import React, { Component } from 'react';
  import { Text, TouchableWithoutFeedback, View } from 'react-native';
  import { connect } from 'react-redux';
  import { ListButton } from './common';
  
  class ListName extends Component {
    onRowPress() {
      console.log('ON ROW PRESS  PRINT', this.props)
      this.props.navigation.navigate('Feedback', this.props);
    }
  
    componentDidMount() {
      //console.log('LIST NAME LIST NAME  PRINT', this.props)
    }
  
    render() {
      const name = this.props.name;
      //console.log('LISTNAME PRINT', name)
  
      return (
        &lt;TouchableWithoutFeedback onPress={this.onRowPress.bind(this)}&gt;
          &lt;View&gt;
            &lt;ListButton&gt;
              &lt;Text style={styles.titleStyle}&gt;
                {name}
              &lt;/Text&gt;
            &lt;/ListButton&gt;
          &lt;/View&gt;
        &lt;/TouchableWithoutFeedback&gt;
      );
    }
  }
  
  const styles = {
    titleStyle: {
      alignSelf: 'center',
      color: '#fff',
      fontSize: 16,
      fontWeight: '600',
    }
  };
  
  
  const mapStateToProps = state =&gt; {
    //console.log('NAMES PRINT', names)
    return state
  };  //this is lodash   .map iterates over key value pairs and run function which assigns data to groups array
  
  
  export default connect(mapStateToProps)(ListName);
  </code></pre>