r.props.navigation.goBack is not defined [react-native][navigation]

I try to use react-navigation on snack.expo.
then I got this error.

[r.props.navigation.goBack is not defined]

I googled solution, but I couldn't find it.

I'd like to know how i can fix this error.

those are my codes

import React, Component from 'react';
import FlatList, StyleSheet, Button, View,
Text, TouchableHighlight from 'react-native';
import createStackNavigator from 'react-navigation';

class HomeScreen extends React.Component
render()
return (
<View style=styles.container>
<FlatList
data=[
key: 'Devin',
]
renderItem=(item) =>
<TouchableHighlight onPress=() => this.props.navigation.navigate('Details')>
<View style=styles.temp>
<View style=backgroundColor : 'yellow',width:100,height:100>
<Text style=styles.item>item.key</Text>
</View>
<View style= backgroundColor: 'skyblue',width:250,padding:5>
<Text style=styles.item>item.key</Text>
</View>
</View>
</TouchableHighlight>
/>
</View>
)


class DetailsScreen extends React.Component
render()
return (
<View style= flex: 1, alignItems: 'center', justifyContent: 'center' >
<Text>Details Screen</Text>
<Button
title="Go to Details... again"
onPress=() => this.props.navigation.goBack()
/>
</View>
);



const RootStack = createStackNavigator(
Home: HomeScreen,
Details: DetailsScreen, ,
initialRouteName: 'Home',
);

export default class App extends React.Component
render()
return <RootStack />;


const styles = StyleSheet.create({
container:
flex: 1,
paddingTop: 22,
,
temp:
flex:2,
margine:20,
padding: 10,
flexDirection: 'row'
,
item:
padding: 10,
fontSize: 18,
height: 44,
,


);

do i have to define r.props.navigation.goBack?
how can i define this?

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.