React Native: ListItem does nothing onPress - react-native

Question

I am attempting to navigate from my current screen to the Profile screen and pass a parameter along using the ListItem onPress prop. The ListItems render properly onto the screen within a FlatList component, however, onPress does not navigate to the Profile screen.
import React from "react";
import { withNavigation } from '#react-navigation/compat';
import { StyleSheet, FlatList} from "react-native";
import { ListItem } from "react-native-elements";
import nerdProfiles from '../constants/nerdProfiles';
import { Block, Text } from 'galio-framework';
import argonTheme from "../constants/Theme";
import { TouchableOpacity } from "react-native-gesture-handler";
class NerdList extends React.Component {
renderItem = ({item}) => (
<TouchableOpacity>
<ListItem
title={
<Block>
<Text style={styles.names}>
{item.name}
</Text>
</Block>
}
subtitle={
<Block>
<Text style={styles.descriptions}>
{item.shortDescription}
</Text>
</Block>
}
leftAvatar={{ source: { uri: item.image } }}
bottomDivider
chevron
onPress={() => this.props.navigation.navigate('Profile', {test: 'Hello'})}
/>
</TouchableOpacity>
);
render() {
return (
<FlatList
data={nerdProfiles.bios}
renderItem={this.renderItem}
keyExtractor={item => item.id}
/>
);
};
};
export default withNavigation(NerdList);

Answer 1

Your code is correct, just try to put alert in the onPress function. Like,
onPress{()=>alert('ok')}
and check whether onPress is working or not. If yes it means there is problem with your navigate function. It cant find page Profile in navigation file. (Maybe spelling mistake of page name. Just check once what you've declare in your navigation file.)
If alert is also not working then try to remove onPress from ListItem and put it in the TouchableOpacity. Like
<TouchableOpacity onPress={()=>alert('ok')}>
then try to add navigate function
<TouchableOpacity onPress={() => this.props.navigation.navigate('Profile', {test: 'Hello'})}>
Here is my working small code
import React from "react";
import { StyleSheet, FlatList, Text, TouchableOpacity} from "react-native";
import { ListItem } from "react-native-elements";
import Font from 'expo-font'
class NerdList extends React.Component {
render() {
return (
<TouchableOpacity>
<ListItem
title={
<Text>
'item.name'
</Text>
}
subtitle={
<Text>
'item.shortDescription'
</Text>
}
bottomDivider
chevron
onPress={()=>alert('ok')}
/>
</TouchableOpacity>
);
}
}
export default NerdList;

Answer 2

When onPress function is provided to ListItem, it behaves like a Touchable component. So, no need to wrap the ListItem with a TouchableOpacity.
The parent TouchableOpacity captures onPress function and you cannot reach out the onPress function of the ListItem.