React Native

Pan Responder Inside of a ScrollView

Lets talk PanResponder in a ScrollView. This gets brought up frequently, so lets address it.


You've got a PanResponder in your ScrollView. When you scroll you want it to scroll, when you interact with the component with the PanResponder you want it to do PanResponder things.

What happens

Things start scrolling just fine. You attemp to drag, all goes swimmingly, then the ScrollView scrolls, your drag stops working and it just sits there stuck until you go re-interact with it. Yikes. You curse the react native gods and begrudgingly start learning Objective-C.


{% img Screw it, lets just go native %}

<!-- more -->


The magic solution is scrollEnabled={false}. That's it. Seriously. Sadly it's only supported on ios as of me writing this blog post. I'm sure it'll be supported in the future for android.

{% img Sort of acceptable %}


Play with it here

Full Code Here

'use strict';

var React = require('react-native');
var {
} = React;

var SampleApp = React.createClass({
  getInitialState: function() {
        return {
      scroll: true,
      pan: new Animated.ValueXY()
  componentWillMount: function() {
    this._panResponder = PanResponder.create({
      onStartShouldSetPanResponder: (evt, gestureState) => true,
      onStartShouldSetPanResponderCapture: (evt, gestureState) => true,
      onMoveShouldSetPanResponder: (evt, gestureState) => true,
      onMoveShouldSetPanResponderCapture: (evt, gestureState) => true,
      onPanResponderGrant: () => this.setState({scroll: false}),
      onPanResponderMove: Animated.event([null, {dx: this.state.pan.x, dy: this.state.pan.y}]),
        onPanResponderRelease: () => this.setState({scroll: true})
  render: function() {
    return (
      <View style={styles.container}>
            style={{flex: 1}}
                style={{transform: this.state.pan.getTranslateTransform(), position: 'absolute', left: 150, top: 150}}
                <Text>Drag Me</Text>

var styles = StyleSheet.create({
  container: {
    flex: 1,


AppRegistry.registerComponent('SampleApp', () => SampleApp);

Liked this content?

Get notified more about React Native!

No Spam! We Promise!