2

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.

  • What is `Starred`? Does it actually have the `onPress` event? Try replacing `Starred` with a button and see if it works for a button (which actually has `onPress`) or not.. – Loi Nguyen Huynh Nov 26 '19 at 01:18
  • You got it @HuỳnhLợiNguyễn!! My style was not configure as an button! Thank you! – Jeferson Costa Nov 26 '19 at 01:39

1 Answers1

0

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!