react native arrow functions and geoQueries

Question

I am still struggling a little bit with arrow functions. I have previously made these posts:

• react native and globally accessible objects
• react native arrow functions and if statements

But now I am having a new issue with how these can be used with geoQuery. I have tried the code shown below:

    myFunction = () => {

    var onKeyMovedRegistration = () => geoQuery.on("key_moved", function(key, location, distance) {
        console.log('Test log');
        if (key != this.props.userID) {
            arraySearchResult = findKeyInArray(key, this.props.arrayOfKeys);
            if (arraySearchResult != "keyNotFound") {    
                console.log(key + " moved within query to " + location + " (" + distance + " km from center)");
            }
        }    
    })
    }

So myFunction is bound, and I am trying to bind the geoQuery as well, as otherwise this.props.userID and this.props.arrayOfKeys are not accessible if I use the original line:

var onKeyMovedRegistration = geoQuery.on("key_moved", function(key, location, distance) {

With the attempt above, nothing fires. I do not get "Test log" to the console. There is no crash or error, it's just clearly not how this is supposed to be done.

Anyone know how I can get past this one?

Answer 1

Since your geoFire listener function is not bound therefore you can't access class level props to it.

Therefore the simplest way would be to use the arrow function here as

geoQuery.on("key_moved", (key, location, distance) => 

After this, this will be bound to the class and you will be able to access the class level props.