title: React native navigation with redux
body: <p>I have an inbox component which fetches all the notifications from the server and lists in a view. The code for which looks like,</p>
  
  <pre><code>import React, { Component } from 'react'
  import {
    View,
    FlatList,
    ActivityIndicator,
    TouchableOpacity
  } from 'react-native'
  
  import {List, ListItem, SearchBar} from 'react-native-elements'
  import Header from '../common/Header'
  import { Container } from 'native-base'
  import PushNotifications from '../../fcm/notifications/PushNotifications'
  import NotificationDetails from './NotificationDetails';
  
  export const Navigator = new StackNavigator({
    NotificationList: { screen: NotificationList },
    NotificationDetail: { screen: NotificationDetail },
  },{
    initialRouteName: 'NotificationList',
  })
  
  class NotificationList extends Component {
    constructor(props) {
      super(props)
  
      this.state = {
        loading: false,
        data: [],
        page: 1,
        seed: 1,
        error: null,
        refreshing: false
      }
      this.loadNotificationDetails = this.loadNotificationDetails.bind(this)
    }
  
    componentDidMount() {
      const{dispatch,actions} = this.props
      dispatch(actions.getNotification())
    }
  
    handleRefresh = () =&gt; {
      this.setState(
        {
          page: 1,
          seed: this.state.seed + 1,
          refreshing: true
        },
        () =&gt; {
          const{dispatch,actions} = this.props
          dispatch(actions.getNotification())
        }
      )
    }
  
    handleLoadMore = () =&gt; {
      this.setState(
        {
          page: this.state.page + 1
        },
        () =&gt; {
          const{dispatch,actions} = this.props
          dispatch(actions.getNotification())
        }
      );
    }
    renderSeparator = () =&gt; {
      return (
        &lt;View
          style={{
            height: 1,
            width: "86%",
            backgroundColor: "#CED0CE",
            marginLeft: "14%"
          }}
        /&gt;
      );
    };
  
    renderHeader = () =&gt; {
      return &lt;SearchBar placeholder="Type Here..." lightTheme round /&gt;
    }
  
    renderFooter = () =&gt; {
      if (!this.state.loading) return null;
  
      return (
        &lt;View
          style={{
            paddingVertical: 20,
            borderTopWidth: 1,
            borderColor: "#CED0CE"
          }}
        &gt;
          &lt;ActivityIndicator animating size="large" /&gt;
        &lt;/View&gt;
      )
    }
  
    loadNotificationDetails = () =&gt; {
      this.props.navigation.navigate('NotificationDetails')
    }
  
    render() {
      return (
        &lt;Container &gt;
          &lt;Header /&gt;
          &lt;List containerStyle={{ marginTop: 0, borderTopWidth: 0, borderBottomWidth: 0 }}&gt;
            &lt;FlatList
              data={this.props.listNotification}
  
              renderItem={({ item }) =&gt; (
                &lt;TouchableOpacity
                  onPress={() =&gt; this.loadNotificationDetails()}&gt;
                  &lt;ListItem
                    roundAvatar
                    title={`${item.text}`}
                    subtitle={item.dateTime}
                    // avatar={{ uri: item.picture.thumbnail }}
                    containerStyle={{ borderBottomWidth: 0 }}
                  /&gt;
                &lt;/TouchableOpacity&gt;
              )}
              ItemSeparatorComponent={this.renderSeparator}
              ListHeaderComponent={this.renderHeader}
              ListFooterComponent={this.renderFooter}
              onRefresh={this.handleRefresh}
              refreshing={this.state.refreshing}
              onEndReached={this.handleLoadMore}
              onEndReachedThreshold={50}
            /&gt;
          &lt;/List&gt;
          &lt;PushNotifications /&gt;
        &lt;/Container&gt;
      )
    }
  }
  
  export default NotificationList;
  </code></pre>
  
  <p>Now what i want to achieve is on clicking any of the listItem, i want to load the complete detailed notification.
  Whats happening is when i click it seems to be missing the navigation object. Hence its complaining cannot find property of navigate. 
  The props is having only the items from the redux store, i am not able to understand how do i get the navigation props into this component which is already having props from the redux store?
  How do i achieve this? Any help is much appreciated.</p>
  
  <p>Thanks,
  Vikram</p>