Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

React Native PanResponder not working on Android device

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:

componentWillMount() {
    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

like image 966
alexmngn Avatar asked Jan 05 '23 09:01

alexmngn


1 Answers

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

like image 72
YaNuSH Avatar answered Jan 13 '23 09:01

YaNuSH