CODEWITHSUNDEEP
react-nativereact-native-listview
Konayuki
Konayuki

Reputation: 674

Why won't the TouchableHighlight inside ListView let me go to the next page?

I'm trying my hand on React Native (ver. 0.37.0) for Android, and trying to make a simple apps to learn. After successfully made a Button to go to next page, now I want users to go to next page by clicking item in ListView (like you click an item on online shop, and it goes to the next page, showing item's information). Here's my code:

      <View>

        // ListView
        <ListView contentContainerStyle={styles.list}
            dataSource={this.state.dataSource}
            enableEmptySections={true}
            renderRow={(rowData) => 
                <TouchableHighlight 
                  style={styles.listviewContainer}
                  onPress={() => {
                      Alert.alert('kyaa');
                      this.gotoItemPage.bind(this);
                    }} 
                  >
                    <View>
                        /*some Text and Image*/
                    </View>
                </TouchableHighlight>
            }
        />

        // Button Add
        <TouchableOpacity onPress={this.gotoItemPage.bind(this)} >
          <Image
            style={styles.button}
            source={/*some source*/}
          />
        </TouchableOpacity>

      </View>

There are two things clickable in above code: ListView's item and Button Add. Both execute the same method. Button Add works as intended, where users navigated to next page when it's clicked. Yet when ListView's item clicked, it doesn't. The color changed just like when a button is clicked, the Alert 'kyaa' shown, but it doesn't go to the next page (even if the Alert removed, still the same).

What did I do wrong?

Upvotes: 1

Views: 504

Answers (2)

martinarroyo
martinarroyo

Reputation: 9701

You are not calling your function, you are just binding it, which you don't need to do since you are using an arrow function. Your callback should look like this:

<TouchableHighlight 
                  style={styles.listviewContainer}
                  onPress={() => {
                      Alert.alert('kyaa');
                      this.gotoItemPage();
                    }}>
//...

What bind does is create a new function that will have as scope the thing you pass as first parameter (in this case, the component where you are instantiating the rows), but it does not call the function itself. Arrow functions do not replace the scope when called from a different one, so you don't need to do any sort of binding.

Upvotes: 3

Victor Benetatos
Victor Benetatos

Reputation: 416

Try removing the Alert and see then if it works. If the Alert is needed for the app, maybe you can try refactoring a bit like so :

Alert.alert(
      'Alert Title',
      'Main message of the alert',
       [{text: 'OK', onPress: this.gotoItemPage.bind(this) }]
     )

In any case, try binding your functions in the component Constructor.

https://medium.com/@housecor/react-binding-patterns-5-approaches-for-handling-this-92c651b5af56#.ii36rho3r

Upvotes: 0

Related Questions