FlatList component navigate to new details screen passing props onpress - react-native

Question

I have a FlatList component on a screen, when I press it I can't get the details screen to show up.
How do I get this component to push the props to a new screen so the user can take the next action?
It works fine when I don't use it as a component in its own view.
snack - https://snack.expo.io/#mattmegabit/stuck
import React from 'react';
import {
FlatList,
StyleSheet,
ActivityIndicator,
Text,
View,
TouchableOpacity,
Image,
Button,
Alert,
} from 'react-native';
import {
createStackNavigator,
createBottomTabNavigator,
} from 'react-navigation';
import Ionicons from 'react-native-vector-icons/Ionicons';
import moment from 'moment';
import decode from 'parse-entities';
class ShowsScreen extends React.Component {
render() {
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Text>Click an item to see what I mean</Text>
<GetShows />
</View>
);
}
}
class GetShows extends React.Component {
constructor(props) {
super(props);
this.state = { isLoading: true, dataSource: null };
}
_onPress(item) {
this.props.navigation.navigate('Details', {
itemId: item.id,
title: item.title.rendered,
});
}
renderItem = ({ item }) => {
return (
<TouchableOpacity onPress={() => this._onPress(item)}>
<View style={styles.container}>
<Text>{decode(item.title.rendered)}</Text>
<Text>{item.id}</Text>
<Text>
Show Dates: {moment(item.show_start_date).format('MMM Do')} -{' '}
{moment(item.show_end_date).format('MMM Do')}
</Text>
</View>
</TouchableOpacity>
);
};
componentDidMount() {
return fetch('https://twinbeachplayers.org/wp-json/wp/v2/show/')
.then(response => response.json())
.then(responseJson => {
this.setState(
{
isLoading: false,
dataSource: responseJson,
},
function() {}
);
})
.catch(error => {
console.error(error);
});
}
render() {
if (this.state.isLoading) {
return (
<View style={styles.container}>
<ActivityIndicator />
</View>
);
}
return (
<View style={styles.container}>
<FlatList
data={this.state.dataSource}
renderItem={this.renderItem}
keyExtractor={({ id }, index) => id}
/>
</View>
);
}
}
class DetailsScreen extends React.Component {
render() {
const { navigation } = this.props;
const itemId = navigation.getParam('itemId', 'NO-ID');
const title = navigation.getParam('title', 'no title');
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Text>Details Screen</Text>
<Text>ItemId: {JSON.stringify(itemId)}</Text>
<Text>Title: {JSON.stringify(title)}</Text>
</View>
);
}
}
class HomeScreen extends React.Component {
render() {
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Text>Home Screen</Text>
</View>
);
}
}
const RootStack = createBottomTabNavigator(
{
Home: { screen: HomeScreen },
Shows: { screen: ShowsScreen },
Details: { screen: DetailsScreen },
},
{
initialRouteName: 'Home',
}
);
export default class App extends React.Component {
render() {
return <RootStack />;
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
paddingTop: 22,
},
});

Answer 1

You can use an arrow function at your event _onPress, to fix the "this" attribute
_onPress = item => {
this.props.navigation.navigate('Details', {
itemId: item.id,
title: item.title.rendered,
});
}

Answer 2

replaced <GetShows />
with
<GetShows navigation={this.props.navigation} />
an additional way to solve this is to use withNavigation when you export your component.

Answer 3

Remove from DetailsScreen:
const { navigation } = this.props;
const itemId = navigation.getParam('itemId', 'NO-ID');
const title = navigation.getParam('title', 'no title');
And replace with this:
componentWillReceiveProps(nextProps) {
this.setState({
itemId: nextProps.navigation.getParam("itemId"),
title: nextProps.navigation.getParam("title"),
});
}