Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
wazzupex opened this issue Dec 4, 2018 · 8 comments
Labels
API: PanResponder Bug Platform: Android Android applications. Stale There has been a lack of activity on this issue and it may be closed soon.

Comments

@wazzupex
Copy link

wazzupex commented Dec 4, 2018

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
@fbzz
Copy link

fbzz commented Dec 4, 2018

I'm having the same issue, only on android.

@wazzupex wazzupex changed the title PanResponder is not working on Android after upgrade from 0.54.2 to 0.57.6 [Android] [0.57.6] [BUG] PanResponder is not working on Android after upgrade from 0.54.2 to 0.57.6 Dec 6, 2018
@wazzupex
Copy link
Author

wazzupex commented Dec 7, 2018

To make it work, I have downgraded react-native and dependencies tree while awaiting for a solution for this issue.

I'm making myself available to help in any way even though I'm not a very skilled developer.

Find me dependencies below:

"dependencies": {
    "@babel/core": "^7.1.5",
    "@babel/plugin-check-constants": "^7.0.0-beta.38",
    "cli-engine-command": "^12.0.0",
    "cli-engine-config": "^3.5.0",
    "d3-interpolate": "^1.3.2",
    "expo": "^26.1.1",
    "fetch-intercept": "^2.3.1",
    "lodash.range": "^3.2.0",
    "moment": "^2.22.2",
    "native-base": "^2.8.1",
    "prop-types": "^15.6.1",
    "react": "^16.6.1",
    "react-native": "^0.54.2",
    "react-native-svg": "^6.3.1",
    "react-navigation": "^1.6.1",
    "react-redux": "^5.1.0",
    "redux": "^3.7.2",
  },

@wazzupex
Copy link
Author

Does anyone acknowledge it as React-Native issue/Bug or it is something too dumb I did that no one even comment on this topic?

@wazzupex
Copy link
Author

wazzupex commented Dec 25, 2018

I have tried with latest version, the error still remains...

React Native Environment Info:
System:
OS: macOS 10.14.2
CPU: (4) x64 Intel(R) Core(TM) i5-5257U CPU @ 2.70GHz
Memory: 2.60 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.7.0 => 16.7.0
react-native: ^0.57.8 => 0.57.8
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

@gvnc
Copy link

gvnc commented Jan 1, 2019

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

@orta
Copy link
Contributor

orta commented Mar 19, 2019

Something changed, I'm not too sure what because I can't run any of these snacks in some of the latest version - any chance someone can give this a fresh look on the latest releases?

@stale
Copy link

stale bot commented Sep 16, 2019

Hey there, it looks like there has been no activity on this issue recently. Has the issue been fixed, or does it still require the community's attention? This issue may be closed if no further activity occurs. You may also label this issue as a "Discussion" or add it to the "Backlog" and I will leave it open. Thank you for your contributions.

@stale stale bot added the Stale There has been a lack of activity on this issue and it may be closed soon. label Sep 16, 2019
@wazzupex
Copy link
Author

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

@facebook facebook locked as resolved and limited conversation to collaborators Sep 17, 2019
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
API: PanResponder Bug Platform: Android Android applications. Stale There has been a lack of activity on this issue and it may be closed soon.
Projects
None yet
Development

No branches or pull requests

6 participants