Why can't I access this.props.navigation in react native Alert? - react-native

Question

Alert.alert(
'',
'Kindly Select from the following Actions',
[
{
text: 'Edit',
onPress: () => this.props.navigation.navigate(
'PositionForm',
{
formType: 'edit',
item: this.props.position
}
)
},
{ text: 'Delete', onPress: () => console.log('delete Pressed') },
]
);
I am looking for a work around. I want to navigate to another page when an edit button is clicked on alert. I am using react-navigation and redux. Kindly Help.
Thanks in advance.
COmplete Component COde is below:
import React, { Component } from 'react';
import { View, Text, StyleSheet, TouchableOpacity, Alert } from 'react-native';
import Icon from 'react-native-vector-icons/FontAwesome';
class PositionItem extends Component {
showAlert() {
Alert.alert(
'',
'Kindly Select from the following Actions',
[
{
text: 'Edit',
onPress: () => this.props.navigation.navigate(
'PositionForm',
{
formType: 'edit',
item: this.props.position
}
)
},
{ text: 'Delete', onPress: () => console.log('delete Pressed') },
]
);
}
render() {
const {
positionContainer,
textStyle,
iconsStyle,
positionName,
starIconStyle
} = styles;
const {
name
} = this.props.position;
return (
<TouchableOpacity onPress={this.showAlert.bind(this)}>
<View style={positionContainer}>
<View style={positionName}>
<Text style={textStyle}>{name}</Text>
</View>
<View style={iconsStyle}>
<Icon style={starIconStyle} name="star-o" size={30} color="#ccc" />
<Icon name="angle-right" size={30} color="#ccc" />
</View>
</View>
</TouchableOpacity>
);
}
}
const styles = StyleSheet.create({
positionContainer: {
flex: 1,
flexDirection: 'row',
justifyContent: 'space-between',
alignItems: 'center',
paddingTop: 15,
paddingBottom: 15,
borderBottomWidth: 1,
borderColor: '#ccc'
},
textStyle: {
marginBottom: 0,
color: '#333333',
fontSize: 20,
fontWeight: '600',
borderLeftWidth: 6,
borderColor: '#cccccc',
paddingLeft: 20,
paddingTop: 5,
paddingBottom: 5,
lineHeight: 20
},
iconsStyle: {
flexDirection: 'row',
flex: 20,
},
starIconStyle: {
paddingTop: 2,
paddingRight: 15
},
positionName: {
flex: 80
}
});
export default PositionItem;

Answer 1

I can't see the issue, but worse case you can just put the variable in the upper scope.
showAlert() {
const {navigation, position} = this.props
Alert.alert(
Also I prefer not to bind and use the new syntax for creating class fields, you always get the right this.
showAlert = () => {
...
}
<TouchableOpacity onPress={this.showAlert}>