[Labels] Show labels when using swiper methods

[solominh]

Version: 1.5.25 Expected result:

• Call a method programmatically: this.swiper.swipeLeft => Left label will be shown as well

Actual result:

• Labels aren't shown.

[webraptor]

@solominh this was never the intended result. Labels show up only as a feedback to manual pan movements of the card. Swipes using the swiper methods are so fast that users will not even see or manage to grasp what the labels say...

[solominh]

@webraptor Thanks for your answer. I think showing labels when calling swipeLeft will help improving user experience. I use this lib for deck swiper: https://docs.nativebase.io/Components.html#deckswiper-def-headref It has top layer and bottom layer => i can custom labels Please add this feature as an opt-in option.

[ramanjaneya-karnati]

I have made small tweek to code to get the labels shown when you call "this.swiper.swipeLeft".

Just add this line in the swipeLeft functions after the "mustDecrementCardIndex," this.setState({labelType: LABEL_TYPES.LEFT})

Example:

swipeLeft = (mustDecrementCardIndex = false) => { this.swipeCard( this.props.onSwipedLeft, -this.props.horizontalThreshold, 0, mustDecrementCardIndex, this.setState({labelType: LABEL_TYPES.LEFT}) ) }

[webraptor]

In order for the solution to be acceptable, a new prop would be required, so that users can turn the label on / off depending on their needs.

Please feel free to submit a PR with a new prop, the code for showing labels for all 4 swipe types and don't forget to increment the versioning for the main package as well as for the example folder.

[nirazan1]

Hi, is it possible to add custom buttons other than Left, Right, Top, Bottom inside the card? I tried adding few but it gets triggered itself when card is displayed.

[ramanjaneya-karnati]

Yes.. we can add

On Tue, Feb 5, 2019, 22:12 nirazan1 notifications@github.com wrote:

Hi, is it possible to add custom buttons other Left, Right, Top, Bottom inside the card? I tried adding few but it gets triggered itself when card is displayed.

— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/alexbrillant/react-native-deck-swiper/issues/198#issuecomment-460710130, or mute the thread https://github.com/notifications/unsubscribe-auth/AhFVbNEerZsTXnYp-KL5g84RJVCf1RbXks5vKbR6gaJpZM4Y3Et6 .

[1reldi]

I did a simple fix for this issue. You can check it here https://github.com/alexbrillant/react-native-deck-swiper/issues/278

[farazirfan47]

@ramanjaneya-karnati your solution works, I also had to update the swipeCard function and the following logic:

if(this.state.labelType != "none"){
   this.setState({ labelType: LABEL_TYPES.NONE })
}

  swipeCard = (
    onSwiped,
    x = this._animatedValueX,
    y = this._animatedValueY,
    mustDecrementCardIndex = false
  ) => {
    this.setState({ panResponderLocked: true })
    this.animateStack()
    Animated.timing(this.state.pan, {
      toValue: {
        x: x * SWIPE_MULTIPLY_FACTOR,
        y: y * SWIPE_MULTIPLY_FACTOR
      },
      duration: this.props.swipeAnimationDuration,
      useNativeDriver: true
    }).start(() => {
      this.setSwipeBackCardXY(x, y, () => {
        mustDecrementCardIndex = mustDecrementCardIndex
          ? true
          : this.mustDecrementCardIndex(
            this._animatedValueX,
            this._animatedValueY
          )

        if (mustDecrementCardIndex) {
          this.decrementCardIndex(onSwiped)
        } else {
          this.incrementCardIndex(onSwiped)
        }
       if(this.state.labelType != "none"){
          this.setState({ labelType: LABEL_TYPES.NONE })
        }
      })
    })
  }