Change screen FlatList onPress - react-native

Question

I have two screen.
First screen is HomeScreen, second screen is ProfileScreen.
I used FlatList on HomeScreen and i wanna push to navigation to another screen. But when i used that codes, i saw that error message: "Can not read property 'navigate' of undefined"
Code like that
class ProfileScreen extends Component {
static navigationOptions = {
title: 'Profile',
};
render() {
const { navigate } = props.navigation;
return <Text>Hello, I am profile!</Text>;
}
}
class HomeScreen extends Component {
static navigationOptions = {
title: 'Home',
};
constructor(props) {
super(props);
this.state = {
data: [],
};
}
getScreen() {
this.props.navigation.navigate('Profile')
}
render() {
return (
<View>
<FlatList
data={this.state.data}
renderItem={({ item }) => (
<TouchableHighlight underlayColor= 'transparent' onPress= {this.getScreen}>
<View style= {{width: 300, height: 'auto'}} >
<Text> {item.title} </Text>
<View style= {{width: 300, height: 1, backgroundColor: 'red', marginBottom: 30, marginTop: 15}} />
</View>
</TouchableHighlight>
)}
/>
</View>
);
}
}
const AppNavigator = StackNavigator({
Home: { screen: HomeScreen },
Profile: { screen: ProfileScreen }
});

Answer 1

You're losing the context of this in your implementation. Fix it with function call:
renderItem={({ item }) => (
<TouchableHighlight underlayColor='transparent' onPress={() => this.getScreen()}>
...
</TouchableHighlight>
)}
In addition, you can use pattern:
const { navigate } = this.props.navigation;
navigate('Profile');

Answer 2

Inside the constructor bind this to your getScreen method.
Simply add following line inside constructor.
this.getScreen = this.getScreen.bind(this);