React native: this.touchableHandleResponderGrant is not a function

Question

I'm trying to implement a simple drag feature, by using the React Native PanResponder. I looked at this tutorial but I'm making a much simpler thing, which just will change a state variable on drag.

componentWillMount() {
    this._panResponder = PanResponder.create({
        onMoveShouldSetResponderCapture: () => true,
        onMoveShouldSetPanResponderCapture: () => true,
        onPanResponderGrant: (e, gestureState) => {
            //this.setState({pan: 0});
            console.log('grant');
        },

        onPanResponderMove: (e, gestureState) => {
        //this.setState({pan: gestureState.dx});
        console.log(gestureState);
        },
        onPanResponderRelease: (e, {vx, vy}) => {
        }

    });
    console.log('pan init');
}

And in my render function I have this:

<Text {...this._panResponder.panHandlers}>Drag here</Text>

But as soon as I pan/drag i get a redbox with the error:

this.touchableHandleResponderGrant is not a function

What did I do wrong?

Answer 1

I guess panHandlers prop can only be used with View or Animated.View component.

<View {...this._panResponder.panHandlers}>
  <Text>Drag here</Text>
</View>

or

<Animated.View {...this._panResponder.panHandlers}>
  <Text>Drag here</Text>
</Animated.View>