this.props.navigation is not working in React Native - reactjs

Question

I have the ff stacknavigation on my App.js:
<NavigationContainer>
<Stack.Navigator
initialRouteName={'BookListing'}>
<Stack.Screen name="Book List" component={Tabs} />
<Stack.Screen
name="BookDetailScreen"
component={BookDetail}
/>
</Stack.Navigator>
</NavigationContainer>
Now on my BookList Screen file, I created an onPressHandler function so I can navigate on the details screen and probably pass the data from redux state.
class BookListingScreen extends Component {
componentDidMount() {
this.props.fetchBooks();
}
onPressHandler = () => {
this.props.navigation.navigate('BookDetailScreen');
};
render() {
let content = (
<BookList
onPress={this.onPressHandler}
books={this.props.randomBooks.books}
/>
);
if (this.props.randomBooks.isFetching) {
content = <ActivityIndicator size="large" />;
}
return (
<View style={styles.container}>
<View>{renderHeader()}</View>
<View>{content}</View>
</View>
);
}
}
Here's my book list component:
export default class BookList extends Component {
_keyExtractor = item => item.cover_i;
render() {
return (
<FlatList
style={{flex: 1}}
data={this.props.books}
keyExtractor={this._keyExtractor}
renderItem={({item} = this.props.books) => {
return (
<BookItem onPressHandler={this.props.onPressHandler} item={item} />
);
}}
/>
);
}
}
Now on my item list, I am trying to use a TouchableOpacity to go the Details Screen.
export default class BookItem extends Component {
render() {
const {title, author_name, oclc = []} = this.props.item;
const onPressHandler = this.props.onPressHandler;
return (
<TouchableOpacity onPress={() => onPressHandler}>
<View style={styles.cardContainerStyle}>
<View style={{paddingRight: 5}}>
<Text style={styles.cardTextStyle}>{title}</Text>
</View>
</View>
</TouchableOpacity>
);
}
}
However, this doesn't go to the Details Screen. Any idea what's happening here?

Answer 1

change this in BookItem
onPress={() => onPressHandler}
to this
onPress={() => onPressHandler()}
or
onPress={onPressHandler}