animation - React Native: Creating an Animated View that slides directly with finger drag -

desired effect:

i want create basic animation of smooth sliding view (left or right) in sync drag pace of finger.(e.g. sliding off- canvas menu , out of view)

currently i'm using animated.spring in parent component handles gestures. i'm using transform,translatex in child component slide view left or right.

for example:

root.js(parent component handles gestures)

_handlepanrespondermove(e: object, gesturestate: object) {     let dx = gesturestate.movex - this.state.swipestart;     animated.spring(     this.state.slidevalue,     {         tovalue: newvalue,         velocity: gesturestate.vx,         tension: 2,         friction: 8,     }).start();  } 

navigation.js(child component slides)

render(){     <animated.view style={[styles.navigation,{transform: [{translatex: this.props.slidevalue}]}]}>         <view >         </view>     </animated.view> } 

the problem:

there sticky/lagging behavior animation instead of smooth movement paces finger sliding guesture.

my reasoning far:

from limited animation experience - animated.spring, animated.ease , animated.timing don't describe equally paced sliding movement i'm after - suppose need using 1 of them optimized native performance (otherwise i'd use .setstate(slidevalue) , math current location of finger figure position of view.)

question:

what preferred way describe type of smooth sliding animation using optimized react-native animated library?

what i've tried out:

1) using animated.timing , setting duration low , easing linear(my best guess @ should do)

animated.timing(     this.state.navslidevalue,     {         tovalue: newvalue,         duration: 10,         easing: easing.linear      }).start(); 

2) moving tension on animated.spring

animated.spring(     this.state.navslidevalue,     {         tovalue: newvalue,         velocity: (gesturestate.vx),         tension: 300,         friction: 30,     }).start();  

the preset functions timing, spring useful running animations specified value given easing. if want tie animated value event, can use animated.event instead:

panresponder.create({   // on each move event, set slidevalue gesturestate.dx --    // first value `null` ignores first `event` argument   onpanrespondermove: animated.event([     null, {dx: this.state.slidevalue}   ])    // ...rest of panresponder handlers });