React native 'this' references dedicatedWorkerGlobalScope instead of class instance

Question

I have a component that I want to capture gesture events for using panResponder, however while trying to debug remotely (within chome) the 'this' context is referencing an instance of DedicatedWorkerGlobalScope instead of the class instance.

Say I have a simple component

import React, { Component } from 'react';

import {
    View,
    Text
    PanResponder
} from 'react-native';


class MyC extends Component
{
    constructor(props)
    {
      super(props);
      this.panResponder = PanResponder.create({

            onStartShouldSetPanResponder : () => true,
            onMoveShouldSetPanResponder : () => true,
            onPanResponderGrant : this.panResponderGranted ,
      })
    }

    panResponderGranted = (e, gestureState) => {

       this.setState({offset : gestureState.dx}); //this.setState is undefined
    }

    render(){

      return (<View />)
    }

}

now whenever I step through the panResponderGranted function and I look at the first level closure, I can see that there is a variable named _this that has the correct reference to the instance of the class. I am debugging wrong? is this expected behavior, or a bug?

Answer 1

You need to bind panResponderGranted, because ES6 doesn't automatically bind functions.

I.e.

onPanResponderGrant : this.panResponderGranted.bind(this),