CODEWITHSUNDEEP
reactjsreact-native
A.khalifa
A.khalifa

Reputation: 2496

Click Item in ListView React-Native not working

I am new in react-native and I want to press to to specific item in ListView, but when I click the item which I want to select I didn't get a console log message and I didn't get any errors so my code look like this:

in renderRow my code look like this:

renderRow(record) {
    return (
            <View style={styles.row}>
                <TouchableHighlight onPress={() => this._pressRow()}>
                    <View style={styles.info}>
                        <Text style={styles.items}>{record.nom}</Text>
                    </View>
                </TouchableHighlight>
            </View>
        );
}

and _pressRow function simple console log:

 _pressRow (rowID: number) {
        console.log("clicked");
    }

and render function:

 render() {
        return (
            <ScrollView scrollsToTop={false} style={styles.menu}>
                <ListView
                    dataSource={this.state.dataSource}
                    renderRow={this.renderRow}
                />
            </ScrollView>
        );
    }

How can I resolve this issue and thanks.

Upvotes: 2

Views: 9325

Answers (3)

Phan Hai Quang
Phan Hai Quang

Reputation: 777

I used TouchableHighlight to wrap "un-pressable" component (accompany with changing this._pressRow to this._pressRow.bind(this)).

Moreover, some component (such as Text component) does not fill all the space of ListView row. So that onPress only works if you press right at text (it does not work if you press on the row location that does not have any text). So that it is useful to wrap with TouchableHighlight component.

Upvotes: 0

Ann
Ann

Reputation: 41

change the this._pressRow() to this._pressRow.bind(this) if your function is in your Class

Upvotes: 0

Isilher
Isilher

Reputation: 331

Are you using the autobind-decorator? Using your code as is the _pressRow method won't be triggered. When I add the autobind decorator or change _pressRow into a fat-arrow function the console.log does work for me:

import React, { Component } from 'react'
import { View, TouchableHighlight, Text, ScrollView, ListView } from 'react-native'

_pressRow = (rowID: number) => {
  console.log("clicked")
}

class App extends Component {
  constructor(props) {
    super(props)

    this.dataSource = new ListView.DataSource({
      rowHasChanged: (r1, r2) => r1 !== r2,
    })

    this.state = {
      dataSource: this.dataSource.cloneWithRows([
        { nom: 'a' },
        { nom: 'b' },
      ]),
    }
  }

  renderRow(record) {
    return (
      <View>
        <TouchableHighlight onPress={() => this._pressRow()}>
          <View>
            <Text>{record.nom}</Text>
          </View>
        </TouchableHighlight>
      </View>
    )
  }

  render() {
    return (
      <ScrollView scrollsToTop={false}>
        <ListView
          dataSource={this.state.dataSource}
          renderRow={this.renderRow}
        />
      </ScrollView>
    )
  }
}

export default App

Upvotes: 3

Related Questions