onPress not workin in a FlatList - React Native - reactjs

Question

I am working in a regular app using github API and can't solve a problem.
On my FlatList I am trying to implement an onPress to enter an Webview but this onPress
is not working for some reason. I tried everything. Now I just put a console.log and still not working. Code bellow:
import React, {Component} from 'react';
import {ActivityIndicator} from 'react-native';
import PropTypes from 'prop-types';
import api from '../../services/api';
import {
Container,
Header,
Avatar,
Name,
Bio,
Stars,
Starred,
OwnerAvatar,
Info,
Title,
Author,
Loading,
} from './styles';
export default class User extends Component {
static navigationOptions = ({navigation}) => ({
title: navigation.getParam('user').name,
});
static propTypes = {
navigation: PropTypes.shape({
getParam: PropTypes.func,
}).isRequired,
};
state = {
stars: [],
loading: false,
page: 1,
end: false,
refreshing: false,
};
async componentDidMount() {
this.loadItems();
}
loadItems = async (page = 1) => {
const {stars} = this.state;
const {navigation} = this.props;
const user = navigation.getParam('user');
this.setState({loading: true});
const response = await api.get(`/users/${user.login}/starred?page=`, {
params: {page},
});
this.setState({
stars: page >= 2 ? [...stars, ...response.data] : response.data,
loading: false,
page: response.data.length == 0 ? page - 1 : page,
end: response.data.length == 0 ? true : false,
refreshing: false,
});
};
loadMore = async () => {
const {page, end} = this.state;
const pageNum = page + 1;
{
!end ? this.loadItems(pageNum) : '';
}
};
refreshList = () => {
this.setState({refreshing: true, stars: []}, this.loadItems);
};
// Enviar repository via navigate
handleNavigate = repository => {
console.log('navi');
const {navigation} = this.props;
navigation.navigate('Repository', {repository});
};
teste = () => {
console.log('testado...');
};
render() {
const {navigation} = this.props;
const {stars, end} = this.state;
const user = navigation.getParam('user');
return (
<Container>
<Header>
<Avatar source={{uri: user.avatar}} />
<Name>{user.name}</Name>
<Bio>{user.bio}</Bio>
</Header>
<Stars
onRefresh={this.refreshList}
refreshing={this.state.refreshing}
data={stars}
onEndReachedThreshold={0.2}
onEndReached={this.loadMore}
keyExtractor={star => String(star.id)}
ListFooterComponent={
!end ? () => <ActivityIndicator size="large" color="#00ff00" /> : ''
}
renderItem={({item}) => (
** <Starred onPress={() => console.log('clicked')}> **
<OwnerAvatar source={{uri: item.owner.avatar_url.toString()}} />
<Info>
<Title>{item.name}</Title>
<Author>{item.owner.login}</Author>
</Info>
</Starred>
)}
/>
</Container>
);
}
}
Could you please try help me figure out what may be wrong? I just wanted to do this console.log but not even this is working.

Answer 1

The problem was that I did not stated that Starred was an button, that is the reason the onPress was not working.
Thank you #Huỳnh Lợi Nguyễn for the tip!