title: react native Flatlist navigation
body: <p>I m getting error 
      TypeError: Cannot read property 'navigation' of undefined. I don't understand how to pass navigation component into each child so when a user presses an item it can navigate to employeeEdit component using React Navigation. i am newbie sorry if this is obvious.    </p>
  
  <pre><code>import React, { Component } from 'react';
  import { FlatList } from 'react-native';
  import { connect } from 'react-redux';
  //import { R } from 'ramda';
  import _ from 'lodash';
  import { employeesFetch } from '../actions';
  import { HeaderButton } from './common';
  import ListEmployee from './ListEmployee';
  
  
  class EmployeeList extends Component {
    static navigationOptions = ({ navigation }) =&gt; ({
      headerRight: (
        &lt;HeaderButton onPress={() =&gt; navigation.navigate('employeeCreate')}&gt;
          Add
        &lt;/HeaderButton&gt;
      )
    });
  
    componentWillMount() {
      this.props.employeesFetch();
    }
  
    keyExtractor(item) {
      return item.uid;
    }
    renderItem({ item }) {
      return &lt;ListEmployee employee={item} navigation={this.props.navigation} /&gt;;
    }
    render() {
      return (
        &lt;FlatList
        data={this.props.employees}
        renderItem={this.renderItem} // Only for test
        keyExtractor={this.keyExtractor}
        navigation={this.props.navigation}
        /&gt;
      );
    }
  }
  const mapStateToProps = (state) =&gt; {
    const employees = _.map(state.employees, (val, uid) =&gt; ({ ...val, uid }));
    return { employees };
  };
  
  export default connect(mapStateToProps, { employeesFetch })(EmployeeList);
  </code></pre>
  
  <p>Here's the code for ListEmployee</p>
  
  <pre><code>import React, { Component } from 'react';
  import {
    Text,
    StyleSheet,
    TouchableWithoutFeedback,
    View
  } from 'react-native';
  import { CardSection } from './common';
  
  class ListEmployee extends Component {
  
    render() {
    const { employee } = this.props;
    const { navigate } = this.props.navigation;
    const { textStyle } = styles;
    const { name } = this.props.employee;
      return (
        &lt;TouchableWithoutFeedback onPress={() =&gt; navigate('employeeEdit', { employee })}&gt;
          &lt;View&gt;
            &lt;CardSection&gt;
              &lt;Text style={textStyle}&gt;{name}&lt;/Text&gt;
            &lt;/CardSection&gt;
          &lt;/View&gt;
        &lt;/TouchableWithoutFeedback&gt;
      );
    }
  }
  
  /**
   second argument in connect does 2 things. 1.  dispatches all actions creators
  return action objects to the store to be used by reducers; 2. creates props
  of action creators to be used by components
  **/
  export default ListEmployee;
  
  const styles = StyleSheet.create({
    textStyle: {
      fontSize: 18,
      paddingLeft: 15,
    }
  });
  </code></pre>