React native navigation with redux - react-native

Question

I have an inbox component which fetches all the notifications from the server and lists in a view. The code for which looks like,
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;
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.
Thanks,
Vikram

Answer 1

StackNavigator is a factory function instead of a constructor. Have you try
const Navigator = StackNavigator({
NotificationList: { screen: NotificationList },
NotificationDetail: { screen: NotificationDetail },
},{
initialRouteName: 'NotificationList',
})
It is a bit confusing, however in v2 the team change the api to createStackNavigator.