React Native Swipeable close after onPress not working

Question

So I've seen many posting the same problem, but for some I don't seem to be able to adapt the posted solutions to my case.. I hope someone can tell me exactly what changes I need to do in order to get this working, since I don't know how to implement the suggested solutions!

I am using React Native Swipeable

Example of someone having the same issue

I have a file in which I built the Swipeable Component and an other class which calls the component. I've set a timeout close function on the onSwipeableOpen as a temporary solution. But ideally it should close immediately upon pressing "delete". The "..." stands for other code which I deleted since it's not important for this case.

AgendaCard.js

...
const RightActions = ({ onPress }) => {
  return (
    <View style={styles.rightAction}>
      <TouchableWithoutFeedback onPress={onPress}>
        <View style={{ flexDirection: "row", alignSelf: "flex-end" }}>
          <Text style={styles.actionText}>Löschen</Text>
          <View style={{ margin: 5 }} />
          <MaterialIcons name="delete" size={30} color="white" />
        </View>
      </TouchableWithoutFeedback>
    </View>
  );
};
...
export class AgendaCardEntry extends React.Component {
  updateRef = (ref) => {
    this._swipeableRow = ref;
  };
  close = () => {
    setTimeout(() => {
      this._swipeableRow.close();
    }, 2000);
  };
  render() {
    return (
      <Swipeable
        ref={this.updateRef}
        renderRightActions={() => (
          <RightActions onPress={this.props.onRightPress} />
        )}
        onSwipeableOpen={this.close}
        overshootRight={false}
      >
        <TouchableWithoutFeedback onPress={this.props.onPress}>
          <View style={styles.entryContainer}>
            <Text style={styles.entryTitle}>{this.props.item.info}</Text>
            <Text style={styles.entryTime}>
              eingetragen um {this.props.item.time} Uhr
            </Text>
          </View>
        </TouchableWithoutFeedback>
      </Swipeable>
    );
  }
}

Agenda.js

...
renderItem(item) {
...
<AgendaCardAppointment
        item={item}
        onRightPress={() => firebaseDeleteItem(item)}
      />
...
}

score 0 · Answer 1 · answered May 27 '20 at 22:55

I'm having the same issue and have been for days. I was able to hack through it, but it left me with an animation I don't like, but this is what I did anyways.

export class AgendaCardEntry extends React.Component {
  let swipeableRef = null; // NEW CODE
  updateRef = (ref) => {
    this._swipeableRow = ref;
  };
  close = () => {
    setTimeout(() => {
      this._swipeableRow.close();
    }, 2000);
  };

  onRightPress = (ref, item) => { // NEW CODE
      ref.close()
      // Delete item logic
  }

  render() {
    return (
      <Swipeable
        ref={(swipe) => swipeableRef = swipe} // NEW CODE
        renderRightActions={() => (
          <RightActions onPress={() => this.onRightPress(swipeableRef)} /> // NEW CODE
        )}
        onSwipeableOpen={this.close}
        overshootRight={false}
      >
        <TouchableWithoutFeedback onPress={this.props.onPress}>
          <View style={styles.entryContainer}>
            <Text style={styles.entryTitle}>{this.props.item.info}</Text>
            <Text style={styles.entryTime}>
              eingetragen um {this.props.item.time} Uhr
            </Text>
          </View>
        </TouchableWithoutFeedback>
      </Swipeable>
    );
  }
}

React Native Swipeable close after onPress not working

1 Answers1