React Navigation Back Button Doesnt do anything - react-native

Question

Basically what the title says. I am trying to create a back button by passing the current page routeName into the navigation state and then on the detail page I retrieve the params and pass the routeName into the goBack button. But when I click the button it doesnt do anything. I checked to see if the routeName of the previous page was in the state but it still doesnt do anything.
List Screen
Here is my Button, I am passing an id from a reducer and the routeName of the currentscreen into the navigation params
renderList = () => {
const { lists } = this.props;
if(lists) {
return (lists.data.map(el => {
return (
<TouchableOpacity
key={el.id}
onPress={ () => this.props.navigation.navigate('PostItem', { nid: el.id, prevScreen: this.props.navigation.state.routeName})}>
<Text>Next Screen</Text>
</TouchableOpacity>
)}
))
}
}
ListDetail Screen
class listDetail extends Component {
constructor(props) {
super(props);
}
componentDidMount() {
this.props.loadPost('article', this.props.navigation.state.params.nid + '?include=field_image')
}
render() {
const { goBack } = this.props.navigation;
return (
<View>
<Button title="Back" onPress={() => goBack(this.props.navigation.state.params.prevScreen)} />
{ this.renderPost() }
</View>
)
}
}
any suggestions?

Answer 1

The parameter in goBack refers to the key not the routeName.
From the reactnavigation goBack docs
Note -- a key is not the name of the route but the unique identifier you provided when navigating to the route. See navigation key.
So in your example I'd try to call navigate with a key parameter
For renderList onPress could be
onPress={ () => this.props.navigation.navigate({ routeName: 'PostItem', key: `PostItem_${el.id}`, params: { nid: el.id } })}>
Then in ListDetail
<Button title="Back" onPress={() => goBack(`PostItem_${this.props.navigation.state.params.nid}`)} />