3

I have a drawer that hovers over a view. The user can vertically drag up to open and drag down to close it. I have the opening and closing part working smoothly. What I have a problem with is making sure that the drag animation stops once it reaches about 200 pixels from the top of the phone screen and also not drag beyond 100 pixels from the bottom of the screen. It's an absolute element and I have used Animated.ValueXY(). I know that I need to stop animation in the onPanResponderMove: (e, gestureState) =>{} function. I tried stopAnimation but it doesn't seem to affect anything.

This is what causes the drag to happen -

    onPanResponderMove: (e, gestureState) => {
      return Animated.event([null, {
        dy: this.state.drag.y,
      }])(e, gestureState)
    },

Using {...this.panResponder.panHandlers} on the view that users can drag to drag the whole drawer. Like a handle.

Using this.state.drag.getLayout() in styles, on the view that I want to drag in response to dragging the 'handle'.

Any response is appreciated!

Purnima Naik
  • 419
  • 1
  • 5
  • 16

1 Answers1

6

1st) you need to know the screen size.. Importing { Dimensions } from 'react-native' would give that for you

import { Dimensions } from 'react-native'

Dimensions.get('window').height;
Dimensions.get('window').width;
Dimensions.get('screen').height;
Dimensions.get('screen').width;

2nd) If you do a console.log( gestures ) inside 'onPanResponderMove', you would see something like this

{ 
   stateID: 0.04776943042437365,
   moveX: 140.58839416503906, //the pixel where the "finger" is at X
   moveY: 351.9721374511719, //the pixel where the "finger" is at Y
   x0: 89.08513641357422, //the pixel where finger touched first in X
   y0: 390.5161437988281, //the pixel where finger touched first in Y
   dx: 51.503257751464844, //distance finger dragged X
   dy: -38.54400634765625, //distance finger dragged Y
   veJS:   dy: -38.54400634765625,
   vx: 0.0880593692555147,
   vy: 0.06345143037683823,
   numberActiveTouches: 1,
  _accountsForMovesUpTo: 7017915 
}

3rd) With this information you can manipulate, limiting as you like, like this:

//...
const [pan, setPan] = React.useState(new Animated.ValueXY());
//... 
//to start to drag only after a 10% drag threshold
const DRAG_THRESHOLD = Dimensions.get('screen').height* 0.1;

//to limit the drag on 80% of the screen height
const DRAG_LIMIT = Dimensions.get('screen').height* 0.8

onPanResponderMove: (e, gesture) => {
   console.log(gesture);

   //for THRESHOLDs
   if ( (Math.abs( gesture.dy ) > DRAG_THRESHOLD) && 
        (Math.abs( gesture.dy ) < DRAG_LIMIT ) )
   {
       return Animated.event([
           null, {dx: 0, dy: pan.y}
       ]) (e, gesture)
   }
 },

I hope it helps. Keep Calm and Happy Coding!

sugaith
  • 772
  • 7
  • 14