Реагируйте на родную навигацию с помощью redux

У меня есть компонент почтового ящика, который получает все уведомления с сервера и перечисляет их в представлении. Код, который выглядит так:

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 = () => {
    this.setState(
      {
        page: 1,
        seed: this.state.seed + 1,
        refreshing: true
      },
      () => {
        const{dispatch,actions} = this.props
        dispatch(actions.getNotification())
      }
    )
  }

  handleLoadMore = () => {
    this.setState(
      {
        page: this.state.page + 1
      },
      () => {
        const{dispatch,actions} = this.props
        dispatch(actions.getNotification())
      }
    );
  }
  renderSeparator = () => {
    return (
      <View
        style = {{
          height: 1,
          width: "86%",
          backgroundColor: "#CED0CE",
          marginLeft: "14%"
        }}
      />
    );
  };

  renderHeader = () => {
    return <SearchBar placeholder = "Type Here..." lightTheme round />
  }

  renderFooter = () => {
    if (!this.state.loading) return null;

    return (
      <View
        style = {{
          paddingVertical: 20,
          borderTopWidth: 1,
          borderColor: "#CED0CE"
        }}
      >
        <ActivityIndicator animating size = "large" />
      </View>
    )
  }

  loadNotificationDetails = () => {
    this.props.navigation.navigate('NotificationDetails')
  }

  render() {
    return (
      <Container >
        <Header />
        <List containerStyle = {{ marginTop: 0, borderTopWidth: 0, borderBottomWidth: 0 }}>
          <FlatList
            data = {this.props.listNotification}

            renderItem = {({ item }) => (
              <TouchableOpacity
                onPress = {() => this.loadNotificationDetails()}>
                <ListItem
                  roundAvatar
                  title = {`${item.text}`}
                  subtitle = {item.dateTime}
                  // avatar = {{ uri: item.picture.thumbnail }}
                  containerStyle = {{ borderBottomWidth: 0 }}
                />
              </TouchableOpacity>
            )}
            ItemSeparatorComponent = {this.renderSeparator}
            ListHeaderComponent = {this.renderHeader}
            ListFooterComponent = {this.renderFooter}
            onRefresh = {this.handleRefresh}
            refreshing = {this.state.refreshing}
            onEndReached = {this.handleLoadMore}
            onEndReachedThreshold = {50}
          />
        </List>
        <PushNotifications />
      </Container>
    )
  }
}

export default NotificationList;

Теперь я хочу добиться, щелкнув любой элемент listItem, и я хочу загрузить полное подробное уведомление. Что происходит, когда я нажимаю, кажется, что отсутствует объект навигации. Следовательно, его жалоба не может найти свойство навигации. В реквизите есть только элементы из магазина redux, я не могу понять, как мне добавить реквизиты навигации в этот компонент, который уже имеет реквизиты из магазина redux? Как мне этого добиться? Любая помощь очень ценится.

Спасибо, Викрам