onPanResponderRelease is not firing, hence seekbar not working properly

[ranjanpoudel1234]

Hi there,

I upgraded react-native on my app to use 0.61.5. I am using react-native-video 4.4.5. After the upgrade, the seekbar stopped working.

I debugged the library and looks like onPanResponderRelease was not firing when i release the control from seekbar. Changing that to onPanResponderEnd seems to be the fix, however the seekbar drag is not very smooth.

Anyone else run into the same issue ? Trying to understand why onPanResponderRelease stopped working all of a sudden.

[kylemilloy]

I can't replicate this using the versions you describe on a fresh install...can you share your code?

[ranjanpoudel1234]

Hi @kylemilloy , thanks very much for trying to replicate. This started happening after i upgraded my RN version from 0.59.3 to 0.61.5. Below is my code, appreciate you looking into this. I even upgraded the peer dependencies of react-native-video-controls to have following, still no luck.

"peerDependencies": {
    "react-native": ">=0.61.5",
    "react-native-video": "^4.4.5"
  }

Here is my code..

  static navigationOptions = ({ navigation }) => ({
    headerShown: false,
    gesturesEnabled: false,
    tabBarVisible: false
  });

  constructor(props) {
    super(props);

    this.state = {
      augmentObject: {},
      isVideoPaused: false
    };

    this.onNavigateBack = this.onNavigateBack.bind(this);
    this.onVideoEnd = this.onVideoEnd.bind(this);
  }

  componentDidMount() {
    this.setState({ augmentObject: this.props.augmentObject });
  }

  onVideoEnd(ref) {
    this.player.player.ref.seek(0);
  }
  onNavigateBack() {
    this.props.navigateBack();
  }

  render() {
    return (
      <StyleProvider style={getTheme(commonColor)}>
        <Container style={styles.container}>
          {this.state.augmentObject.videoUrl && (
            <VideoPlayer
              style={styles.backgroundVideo}
              source={{ uri: this.state.augmentObject.videoUrl }} // Can be a URL or a local file.
              ref={ref => {
                this.player = ref;
              }}
              disableVolume={true}
              disableBack={false}
              paused={this.state.isVideoPaused}
              onEnd={() => this.onVideoEnd(this.player)}
              onBack={() => this.onNavigateBack()}
              disableSeekbar={false}
              controlTimeout={5000}
              ignoreSilentSwitch={"ignore"}
            />
          )}
        </Container>
      </StyleProvider>
    );
  }
}```

[ranjanpoudel1234]

Figured it out, it was due to some other library conflicting during navigation. Closing it.