Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

react-native-swipeout onPress method disables containing component's onPress method

I have the following flatlist render method that upon tapping on a list item, it will call the this._onPress method:

render() {
      return (
      <TouchableOpacity  onPress={this._onPress} >
        <View style={styles.bookItem} >
          <Image style={styles.cover} source={{uri:this.props.coverURL}}/>
          <View style={styles.info} >
            <Text style={styles.title}>{this.props.title} </Text>
            <Text style={styles.author}>{this.props.author}</Text>
            <Text style={{height: 8}}/>
           </View>
           <View style={styles.rightIcon}>
                <Icon name="chevron-right" size={28} color={'#AAAAAA'} />
          </View>
        </View>
      </TouchableOpacity>
    );
  }

After I added the swipeout tag in the following code, the swipeout works but tapping on an item no longer calls the this._onPress method:

 render() {
    // Buttons
    var swipeoutBtns = [
      {
        text: 'Delete',
        onPress: this._buttonPress
      }
    ]
    return (
      <TouchableOpacity  onPress={this._onPress} >
      <Swipeout right={swipeoutBtns} >
        <View style={styles.bookItem} >
          <Image style={styles.cover} source={{uri:this.props.coverURL}}/>
          <View style={styles.info} >
            <Text style={styles.title}>{this.props.title} </Text>
            <Text style={styles.author}>{this.props.author}</Text>
            <Text style={{height: 8}}/>
           </View>
           <View style={styles.rightIcon}>
                <Icon name="chevron-right" size={28} color={'#AAAAAA'} />
          </View>
        </View>
      </Swipeout>
      </TouchableOpacity>
    );
  }

Is this a restriction of react-native-swipeout?

like image 739
William L. Avatar asked Jan 18 '18 22:01

William L.


1 Answers

If you were to have Swipeout as the first tag and touchable as the next nested tag I think it would work. However, its seems to make the Swipeout functionality less responsive

like image 138
Matt Jameson Avatar answered Oct 26 '22 14:10

Matt Jameson