Snapping about rn-sliding-up-panel

[jsainz237]

@epurban

I created breaks by getting rid of the flick animation and using pure PanResponder and Animation.
(EDIT: For some reason it doesn't like to format my code correctly, so some code may appear out of the code box)

Inside the _onPanResponderRelease(evt, gestureState) function I did the following.
`

//gesture state has negative values for up, so these are less confusing
this.correctedDY = -gestureState.dy;
this.correctedVY = -gestureState.vy;

// BOTTOM PEEK
if(this.currentPosition === this.bottomPeek) {
  //user drags/slides up
  if( (Math.abs(gestureState.vy) > MINIMUM_VELOCITY_THRESHOLD && this.correctedVY > 0 ) || this.correctedDY > 50) {
    
    //if user drags over mid break point, go to topbreak
    if(this.correctedDY > (this.midBreak - this.bottomPeek + 20)) {
      this.transitionTo(this.topBreak, gestureState.vy);
    }
    else {
      this.transitionTo(this.midBreak, gestureState.vy);
    }
  }

  //if user drags/slides down
  else if( (Math.abs(gestureState.vy) > MINIMUM_VELOCITY_THRESHOLD && this.correctedVY < 0 ) || this.correctedDY < -25 ) {
    
    this.transitionTo(this.hidden, gestureState.vy);
    
    //user if closing panel...emit close panel event
    EventRegister.emit('closePanel');
  }
  else {
    this.transitionTo(this.bottomPeek, gestureState.vy);
  }
}

// MID BREAK
else if(this.currentPosition === this.midBreak) {
  //user drags/slides up
  if( (Math.abs(gestureState.vy) > MINIMUM_VELOCITY_THRESHOLD && this.correctedVY > 0 ) || this.correctedDY > 70) {
    this.transitionTo(this.topBreak, gestureState.vy);
  }
  //user drags/slides down
  else if( (Math.abs(gestureState.vy) > MINIMUM_VELOCITY_THRESHOLD && this.correctedVY < 0 ) || this.correctedDY < -50) {
    this.transitionTo(this.bottomPeek, gestureState.vy);
  }
  else {
    this.transitionTo(this.midBreak, gestureState.vy);
  }
}

// TOP BREAK
else if(this.currentPosition === this.topBreak) {
  //if user slides down
  if( (Math.abs(gestureState.vy) > MINIMUM_VELOCITY_THRESHOLD && this.correctedVY < 0) || this.correctedDY < -50) {
    
    //if user drags over mid break point, go to bottomPeak
    if(this.correctedDY < -(this.topBreak - this.midBreak + 20)) {
      this.transitionTo(this.bottomPeek, gestureState.vy);
    }
    else {
      this.transitionTo(this.midBreak, gestureState.vy);
    }
  }
  else {
    this.transitionTo(this.topBreak);
  }
}

`
topBreak, midBreak, bottomPeek, and Hidden are just values the slider should transition to

I also changed the transitionTo function slightly to be able to have a initial velocity and to be able to use the Spring animation

`transitionTo(toValue, initialVelocity = 0) {
this.currentPosition = toValue;
return this._triggerAnimation(toValue, initialVelocity)
}

_triggerAnimation(toValue, initialVelocity) {

//if going to topBreak, clamp the animation
const clamping = toValue === this.topBreak ? true : false
const onAnimationEnd = () => {}

const animationConfig = {
  bounciness: 10,
  velocity: initialVelocity,
  overshootClamping: clamping,
  toValue: -toValue,
}

const animation = Animated.spring(
  this._translateYAnimation,
  animationConfig,
)

animation.start(onAnimationEnd)

}`

this.currentPosition is just a variable I use to track where the panel currently is

[octopitus]

Thanks for your suggestion @AustinErck. Yes I've thought about it for a while. Will leave this issue open as a reference.

[prathammehta]

It'd be brilliant if this feature was added.

[epurban]

Has anyone created this feature?

[epurban]

@epurban

I created breaks by getting rid of the flick animation and using pure PanResponder and Animation.
(EDIT: For some reason it doesn't like to format my code correctly, so some code may appear out of the code box)

Inside the _onPanResponderRelease(evt, gestureState) function I did the following.
`

//gesture state has negative values for up, so these are less confusing
this.correctedDY = -gestureState.dy;
this.correctedVY = -gestureState.vy;

// BOTTOM PEEK
if(this.currentPosition === this.bottomPeek) {
  //user drags/slides up
  if( (Math.abs(gestureState.vy) > MINIMUM_VELOCITY_THRESHOLD && this.correctedVY > 0 ) || this.correctedDY > 50) {
    
    //if user drags over mid break point, go to topbreak
    if(this.correctedDY > (this.midBreak - this.bottomPeek + 20)) {
      this.transitionTo(this.topBreak, gestureState.vy);
    }
    else {
      this.transitionTo(this.midBreak, gestureState.vy);
    }
  }

  //if user drags/slides down
  else if( (Math.abs(gestureState.vy) > MINIMUM_VELOCITY_THRESHOLD && this.correctedVY < 0 ) || this.correctedDY < -25 ) {
    
    this.transitionTo(this.hidden, gestureState.vy);
    
    //user if closing panel...emit close panel event
    EventRegister.emit('closePanel');
  }
  else {
    this.transitionTo(this.bottomPeek, gestureState.vy);
  }
}

// MID BREAK
else if(this.currentPosition === this.midBreak) {
  //user drags/slides up
  if( (Math.abs(gestureState.vy) > MINIMUM_VELOCITY_THRESHOLD && this.correctedVY > 0 ) || this.correctedDY > 70) {
    this.transitionTo(this.topBreak, gestureState.vy);
  }
  //user drags/slides down
  else if( (Math.abs(gestureState.vy) > MINIMUM_VELOCITY_THRESHOLD && this.correctedVY < 0 ) || this.correctedDY < -50) {
    this.transitionTo(this.bottomPeek, gestureState.vy);
  }
  else {
    this.transitionTo(this.midBreak, gestureState.vy);
  }
}

// TOP BREAK
else if(this.currentPosition === this.topBreak) {
  //if user slides down
  if( (Math.abs(gestureState.vy) > MINIMUM_VELOCITY_THRESHOLD && this.correctedVY < 0) || this.correctedDY < -50) {
    
    //if user drags over mid break point, go to bottomPeak
    if(this.correctedDY < -(this.topBreak - this.midBreak + 20)) {
      this.transitionTo(this.bottomPeek, gestureState.vy);
    }
    else {
      this.transitionTo(this.midBreak, gestureState.vy);
    }
  }
  else {
    this.transitionTo(this.topBreak);
  }
}

`
topBreak, midBreak, bottomPeek, and Hidden are just values the slider should transition to

I also changed the transitionTo function slightly to be able to have a initial velocity and to be able to use the Spring animation

`transitionTo(toValue, initialVelocity = 0) {
this.currentPosition = toValue;
return this._triggerAnimation(toValue, initialVelocity)
}

_triggerAnimation(toValue, initialVelocity) {

//if going to topBreak, clamp the animation
const clamping = toValue === this.topBreak ? true : false
const onAnimationEnd = () => {}

const animationConfig = {
  bounciness: 10,
  velocity: initialVelocity,
  overshootClamping: clamping,
  toValue: -toValue,
}

const animation = Animated.spring(
  this._translateYAnimation,
  animationConfig,
)

animation.start(onAnimationEnd)

}`

this.currentPosition is just a variable I use to track where the panel currently is

Thank you for this. It has helped my project save some time :)

[epurban]

Does anyone have time to update this to work with version 2.0?

[Eralyne]

@epurban I've implemented a snapping method shown in my issue that I recently closed, if you still need it. #102