CODEWITHSUNDEEP
javascriptreactjsreact-native
Tim Gregg
Tim Gregg

Reputation: 53

Click Handler immediately invoked in React Native

I've written a click handler to resolve a download button to the google play store URL.

The problem is that when the page loads, the URL is immediately visited.

The click handler is nested inside an onPress attribute, and I don't press anything, so I'm struggling to understand why this would be happening.

Any help would be appreciated!

OpenURL.js:

'use strict';
import React, {
  Component,
  PropTypes,
  Linking,
  StyleSheet,
  Text,
  TouchableNativeFeedback,
  TouchableHighlight,
  View
} from 'react-native';

class OpenURLButton extends Component {

  constructor(props) {
    super(props);
  }

  handleClick(url) {
    console.log(url);
    console.log('handling click! this is : ');
    console.dir(this);
    Linking.canOpenURL(this.props.url).then(supported => {
      if (supported) {
        Linking.openURL(this.props.url);
      } else {
        console.log('Don\'t know how to open URI: ' + this.props.url);
      }
    });
  }

  render() {
    console.log('logging "this" inside render inside OpenURL.js:');
    console.dir(this);
    return (
      <TouchableHighlight onPress={this.handleClick(this.props.appStoreUrl)}>
        <Text>Download {this.props.appStoreUrl}</Text>
      </TouchableHighlight>
    );
  }

}


OpenURLButton.propTypes = {
  url: React.PropTypes.string,
}

export default OpenURLButton;

Inventory.js:

    <ScrollView>
      <View style={styles.ImageContainer}>
        <Image style={styles.ImageBanner} source={{uri: selectedInventory.bannerImage}} />
      </View>
      <View style={styles.ListGridItemCaption}>
        <Image style={[styles.ImageThumb, styles.ImageGridThumb]} source={{uri: selectedInventory.thumbImage}} />
        <Text style={styles.Text} key="header">{name}</Text>
      </View>
      <View>
        <Text>{selectedInventory.description}</Text>
        <OpenURLButton url={selectedInventory.appStoreUrl}/>
      </View>
    </ScrollView>

Upvotes: 2

Views: 289

Answers (1)

IdeasForAName
IdeasForAName

Reputation: 126

Change:

<TouchableHighlight onPress={this.handleClick(this.props.appStoreUrl)}>
  <Text>Download {this.props.appStoreUrl}</Text>
</TouchableHighlight>

To:

<TouchableHighlight onPress={() => {this.handleClick(this.props.appStoreUrl)}}>
  <Text>Download {this.props.appStoreUrl}</Text>
</TouchableHighlight>

With the change you are creating anonymous function that are calling on "your" method. This will work.

Upvotes: 3

Related Questions