question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

[Android] [0.57.6] [BUG] PanResponder is not working on Android after upgrade from 0.54.2 to 0.57.6

See original GitHub issue

Issue report from previously closed/unresolved/incomplete issue: #22434

I have created a Circular Slider, using PanResponder, based on existing GitHub project and it was working beautifully in both Android and iOS (react-native version ^0.54.2).

PanResponder was responding to touch events for both Android and iOS when in RN 0.54.2, after upgrading to 0.57.6 it doesn’t trigger any events to Android anymore but it still works fine in iOS.

I’ve worked around the issues with scrollviews using a toggle to switch scroll on/off while in version 0.54.2, it was affecting only iOS and this workaround resolved it.

There is a debug (console.log) in the code (slider.page.js -> enableScroll()) which writes “true” or “false” as my scroll toggles, it can be seen in console when running in iOS but not in Android.

this._panResponder = PanResponder.create({
      onStartShouldSetPanResponder: (e, gs) => {return true;},
      onStartShouldSetPanResponderCapture: (e, gs) => {return true;},
      onMoveShouldSetPanResponder: (e, gs) => {return true;},
      onMoveShouldSetPanResponderCapture: (e, gs) => {return true;},
      onPanResponderStart: e => {
        this.props.enableScroll(false);
        return true;
      },
      onPanResponderMove: (e, gs) => {
        this.layoutData();
        let xOrigin = this.state.initialX;
        let yOrigin = this.state.initialY;
        let a = this.cartesianToPolar(gs.moveX - xOrigin, gs.moveY - yOrigin);
        this.setState({ angle: a });
        this.props.changeDuration(a);
        return true;
      },
      onPanResponderRelease: (e, gestureState) => {
        this.props.enableScroll(true);
        return true;
      }
    });
  }

render() {
    let width = (this.props.dialRadius + this.props.btnRadius) * 2;
    let bR = this.props.btnRadius;
    let dR = this.props.dialRadius;
    let startCoord = this.polarToCartesian(0);
    let endCoord = this.polarToCartesian(this.state.angle);

    return (
      <View style={styles.container} onLayout={this.layoutData}>
        <Svg
          ref={ref => (this.svg = ref)}
          width={width}
          height={width}
          fill="#f2f8fb"
        >
          <Circle
            r={dR}
            cx={width / 2}
            cy={width / 2}
            stroke="#cccccc"
            strokeWidth={1.5}
            fill="#f2f8fb"
          />

          <Path
            stroke={this.props.meterColor}
            strokeWidth={this.props.dialWidth}
            fill="#f2f8fb"
            d={`M${startCoord.x} ${startCoord.y} A ${dR} ${dR} 0 ${
              this.state.angle > 180 ? 1 : 0
            } 1 ${endCoord.x} ${endCoord.y}`}
          />

          <Text 
            fontSize={20}
          >
            {this.state.duration}
          </Text>

          
          <G x={endCoord.x - bR} y={endCoord.y - bR} >
            <Circle
              r={bR}
              cx={bR}
              cy={bR}
              fill="#005b7f"
              {...this._panResponder.panHandlers}
            />
          </G>
          
        </Svg>
      </View>
    );
  }
}

I’ve tried: going back to expo version (0.57.1) tried the suggestion on issue #21749 (set collapseable=false)

Reproducible Demo

https://snack.expo.io/@wazzupex/circularslider

React Native Environment Info:

System:
  OS: macOS 10.14.1
  CPU: (4) x64 Intel(R) Core(TM) i5-5257U CPU @ 2.70GHz
  Memory: 2.63 GB / 16.00 GB
  Shell: 3.2.57 - /bin/bash
Binaries:
  Node: 10.11.0 - /usr/local/bin/node
  Yarn: 1.12.3 - /usr/local/bin/yarn
  npm: 6.4.1 - /usr/local/bin/npm
SDKs:
  iOS SDK:
    Platforms: iOS 12.1, macOS 10.14, tvOS 12.1, watchOS 5.1
IDEs:
  Xcode: 10.1/10B61 - /usr/bin/xcodebuild
npmPackages:
  react: ^16.6.3 => 16.6.3 
  react-native: https://github.com/expo/react-native/archive/sdk-31.0.0.tar.gz => 0.57.1 
npmGlobalPackages:
  create-react-native-app: 2.0.2
  eslint-plugin-react-native: 3.4.0
  react-native-cli: 2.0.1
  react-native-git-upgrade: 0.2.7

Issue Analytics

  • State:closed
  • Created 5 years ago
  • Reactions:1
  • Comments:8 (1 by maintainers)

github_iconTop GitHub Comments

2reactions
gvnccommented, Jan 1, 2019

I am having the same issue, any news on that ? downgrading the version is not something I want.

0reactions
wazzupexcommented, Sep 16, 2019

The issue is no longer happening since I upgraded to 0.59+

Read more comments on GitHub >

github_iconTop Results From Across the Web

React Native PanResponder not working on Android device
I had the same problem, and in my case what solved the problem is setting a backgroundColor to the view with the pan...
Read more >
PanResponder — gestures not working - React native
In my case, I followed the official RN docs for pan-responder. It responded on iOS but not any android phone I tested on....
Read more >
Pan Responder - React Native Express
Only a single component can respond to touch events at one time - the component responding to events owns a global "interaction lock"....
Read more >
Exploring React Native's PanResponder and LayoutAnimation
However, the Animated API can only do so much on its own. Its key limitation: it is incapable of responding gestures beyond the...
Read more >
Understanding PanResponder with react-native-dragging-list
Understanding PanResponder with react-native-dragging-list | There are few blogs addressing issues related to PanResponder and Animated ...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found