touchableopacity onPress problem in react navigation.navigate - react-native

Question

I tried to implement this codes, But failed. 'undefined is not an object (evaluating 'navigation.navigate') ' error shows when I click that object. I want use TouchableOpacity, not button. How can I fix? or Can I use button without default style in touchableOpacity located place?
import React from 'react'
import {
View,
Text,
StyleSheet,
TouchableOpacity,
Platform,
} from 'react-native'
import { Ionicons } from '#expo/vector-icons'
const ArticleItem = ({
article: {
id,
title,
content,
date,
},
navigation,
}) => {
return (
<View>
<TouchableOpacity
activeOpacity={0.8}
onPress={() => navigation.navigate('ViewStack')} <-error point
>
<View style={styles.container}>
<View style={styles.icon}>
<Ionicons name="md-list" size={14} color="#9E9E9E"/>
</View>
<View style={styles.info}>
<Text style={styles.title}>
{title}
</Text>
<Text style={styles.content}>
{content}
</Text>
<Text style={styles.date}>
{date}
</Text>
</View>
</View>
</TouchableOpacity>
</View>
);
}
const styles = StyleSheet.create({
container: {
flexDirection: 'row',
padding: 16,
paddingBottom: 0,
},
icon: {
width: 16,
height: 16,
marginRight: 8,
justifyContent: 'center',
alignItems: 'center',
paddingTop: Platform.select({
ios: 3, android: 8,
})
},
title: {
marginBottom: 8,
fontSize: 16,
fontWeight: '800',
color: '#212121',
},
content: {
marginBottom: 4,
fontSize: 14,
color: '#9E9E9E',
lineHeight: 18,
},
date: {
fontSize: 12,
color: '#BDBDBD',
},
info: {
flex: 1,
paddingBottom: 16,
borderBottomWidth: 1,
borderBottomColor: '#DEDEDE',
},
})
export default ArticleItem
ArticleItem.js
import React from 'react'
import {
View,
Text,
} from 'react-native'
import { createStackNavigator } from '#react-navigation/stack'
import ViewDiaryScreen from './ViewDiaryScreen'
const Stack = createStackNavigator();
const ViewStackScreen = () => {
return (
<Stack.Navigator>
<Stack.Screen name="ViewStack" component={ViewDiaryScreen}/>
</Stack.Navigator>
)
}
export default ViewStackScreen
ViewStackScreen.js (placed in screens/ViewStackScreen.js)
import React from 'react'
import {
Text,
StyleSheet,
SafeAreaView,
} from 'react-native'
const ViewDiaryScreen = () => {
return (
<SafeAreaView style={styles.container}>
<Text>
Screen
</Text>
</SafeAreaView>
)
}
const styles = StyleSheet.create({
container: {
flex: 1,
}
})
export default ViewDiaryScreen
ViewDiaryScreen.js
import React from 'react'
import {
View,
Text,
} from 'react-native'
import { Ionicons } from '#expo/vector-icons'
import Header from '../components/Header'
import ArticleItem from '../components/ArticleItem'
const DiaryScreen = () => {
return (
<View style={{ flex: 1}}>
<Header title="new Diary" />
<ArticleItem
article={{
id: 1,
title: 'Test1',
content: 'contentTest1',
date: '2021/1/2',
}}
/>
<ArticleItem
article={{
id: 1,
title: 'Test2',
content: 'contentTest2',
date: '2021/1/2',
}}
/>
</View>
);
}
export default DiaryScreen
DiaryScreen.js

Answer 1

As Hend EL-Sahli mentioned, it has nothing to do with your TouchableOpacity but I believe you should have both of the screens in your stack Navigator, Like this:
return (
<Stack.Navigator>
<Stack.Screen name="ArticleItem" component={ArticleItem}/>
<Stack.Screen name="Viewstack" component={ViewDiaryScreen}/>
</Stack.Navigator>
)