javascript - React Native PanResponder not working on Android device - Stack Overflow

For some reason, I cannot make the PanResponder on my Android device. I use a Motorola Moto E (2nd gen) with Android 5.0.2

I was able to make this work on Android emulators (Nexus 6: Android 5.1 and Nexus S: Android 4.4) and on iOS Simulator and Device.

Any idea why the PanResponder doesn't work on device?

Some code here just in case it's needed. None of the console.log works on the device:

ponentWillMount() {
    this.panResponder = this.getPanResponder();
}

getPanResponder() {
    return PanResponder.create({
        onStartShouldSetPanResponder: () => {
            console.log('start');
            return true;
        },
        onStartShouldSetPanResponderCapture: () => {
            console.log('start capture');
            return true;
        },
        onMoveShouldSetPanResponder: () => {
            console.log('move');
            return true;
        },
        onMoveShouldSetPanResponderCapture: () => {
            console.log('move capture');
            return true;
        },
        onPanResponderMove: () => {
            console.log('moving');
        }
     })
}

render() {
    return (
        <View
            style={styles.container}
            {...this.panResponder.panHandlers}
        >
        </View>
    )
}

Thanks

For some reason, I cannot make the PanResponder on my Android device. I use a Motorola Moto E (2nd gen) with Android 5.0.2

I was able to make this work on Android emulators (Nexus 6: Android 5.1 and Nexus S: Android 4.4) and on iOS Simulator and Device.

Any idea why the PanResponder doesn't work on device?

Some code here just in case it's needed. None of the console.log works on the device:

ponentWillMount() {
    this.panResponder = this.getPanResponder();
}

getPanResponder() {
    return PanResponder.create({
        onStartShouldSetPanResponder: () => {
            console.log('start');
            return true;
        },
        onStartShouldSetPanResponderCapture: () => {
            console.log('start capture');
            return true;
        },
        onMoveShouldSetPanResponder: () => {
            console.log('move');
            return true;
        },
        onMoveShouldSetPanResponderCapture: () => {
            console.log('move capture');
            return true;
        },
        onPanResponderMove: () => {
            console.log('moving');
        }
     })
}

render() {
    return (
        <View
            style={styles.container}
            {...this.panResponder.panHandlers}
        >
        </View>
    )
}

Thanks

• javascript
• android
• react-native
• device

Share Improve this question Follow edited Sep 7, 2016 at 12:07 alexmngn asked Sep 7, 2016 at 8:42 alexmngnalexmngn 9,6572020 gold badges7575 silver badges136136 bronze badges 3

• Did you already solved your problem? I have the same problem – Jo VdB Commented Oct 19, 2016 at 18:00
• No I didn't find a solution. – alexmngn Commented Oct 20, 2016 at 2:54
• 3 react-native is full of bugs – mayaa Commented Aug 30, 2017 at 13:36

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 13

I had the same problem, and in my case what solved the problem is setting a backgroundColor to the view with the pan responder handlers. If you can't make it colorful (as I couldn't), just set the backgroundColor to something unnoticeable, like rgba(255,255,255,0.01)

It seems that android ignores pan responder handlers on transparent views

It seems, onResponder... callbacks only works after grant current view as responder, i.e you should return true from one of these callbacks (dependent on gesture type and event phase): onStartShouldSetResponder, onStartShouldSetResponderCapture, onMoveShouldSetResponder, onMoveShouldSetResponderCapture. In my opinion this is a quite correct behaviour.