CODEWITHSUNDEEP
javascriptreact-nativenative-base
Amit Patil
Amit Patil

Reputation: 3067

Native base list item click event not working

I have started learning react native 2 days back only. I am using list item component from Native Base UI framework.

According to their docs and examples to catch a click event on ListItem you need to add onPress and button option to the ListItem. But in my case its not working.

I have another element with also tracks click event, it works fine, but list element isn't catching click event.

Strange this is that if I trigger a alert, it works

<List button onPress={() => { Alert.alert('Item got clicked!') } }>

Below id my complete code

  import React from 'react';
  import { 
    Content, 
    List, 
    ListItem, 
    Body, 
    Thumbnail, 
    Text, 
    Badge, 
    View 
  } from 'native-base';
  import { ActivityIndicator, TouchableHighlight, TouchableOpacity, Alert } from 'react-native';

  export default class Questions extends React.Component{

    constructor(props){
      super(props);
      this.handleClick = this.handleClick.bind(this);
    }

    handleClick(){
      Alert.alert("I am clicked");
      // Call method from parent
      this.props.onPress();
    }

    render() {
        var items = this.props.items;

        return (
          <Content>
            <List button onPress={() => { this.handleClick } }>
                {Object.keys(items).map(function(eachQuestion) {
                  return (
                    <ListItem avatar key={items[eachQuestion].id} button onPress={() => { this.handleClick } } >
                      <Body>
                        <Text>{items[eachQuestion].question}</Text>
                      </Body>
                    </ListItem>
                  )
                })}  
            </List>

            <TouchableOpacity onPress={this.handleClick}> 
                <View><Text>Click me</Text></View> 
            </TouchableOpacity>          
          </Content>  
        ); 

   }
  }

Edit 1

    render() {
        var questions = {
          "1" : "James", 
          "2" : "Smith", 
          "3" : "Doe", 
          "4" : "Smith"
        };

        return (
          <Container>
            <Content>
              <List>
                {Object.keys(questions).map(function(key) {
                  return (<ListItem button={true} onPress={this.handleClick}>
                            <Text>{questions[key]}</Text>
                          </ListItem>
                  )        
                })}
              </List>
            </Content>
          </Container>        
        ); 
    }

** Final Solution **

handleClick(){
  Alert.alert("I got clicked");
}

render() {
  var questions = this.props.questions;

  return (
    <Content>
      <List>
          {Object.keys(questions).map((eachQuestion) => { 
            return (
                <ListItem key={questions[eachQuestion].id} button={true} onPress={this.handleClick} >
                  <Body>
                    <Text>{questions[eachQuestion].question}</Text>
                  </Body>
                </ListItem>
            )
          })}  
      </List>
    </Content>  
  );

}

Upvotes: 0

Views: 8053

Answers (1)

Michael Cheng
Michael Cheng

Reputation: 10471

Two errors:

  1. You should brush up on your ES6 arrow function expressions. You aren't calling your handleClick function which is why nothing is happening vs your Alert example where it does work (since you are actually doing something).
  2. You don't define the value for the button prop. The docs say that there is no default value, so it's good practice to define it as true or false.

So to fix your code, you should define your props for ListItem like so:

button={true}
onPress={() => { this.handleClick() }}

OR to make it shorter:

button={true}
onPress={this.handleClick}

I'm also not sure why you are defining button and onPress props on your List component since it's the ListItems that you are trying to click, not the entire List itself. But since that isn't part of the question, I won't address that.

Full example of working code:

import React, { Component } from 'react';
import { Container, Content, List, ListItem, Text } from 'native-base';
import { Alert } from 'react-native';

export default class App extends Component {
  constructor(props){
    super(props);
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick(){
    Alert.alert("I am clicked");
    // Call method from parent
    //this.props.onPress();
  }

  render() {
    return (
      <Container>
        <Content>
          <List>
            <ListItem button={true} onPress={this.handleClick}>
              <Text>Simon Mignolet</Text>
            </ListItem>
            <ListItem button={true} onPress={() => { this.handleClick() }}>
              <Text>Nathaniel Clyne</Text>
            </ListItem>
            <ListItem button={true} onPress={this.handleClick}>
              <Text>Dejan Lovren</Text>
            </ListItem>
          </List>
        </Content>
      </Container>
    );
  }
}

Upvotes: 4

Related Questions