Click Item in ListView React-Native not working

Issue

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.

Solution

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

Answered By - Isilher