onReady issue about react-native-maps-directions HOT 6 CLOSED

You have a binding: setDistance is not bound to your class instance, so this.setState() won't work there (as it there is no this in it).

Use one of these 5 suggested approaches to solve it. My preference goes out to number 5 “Arrow Function in Class Property“:

class Example extends React.Component {

  // By using an Arrow Function, the function will be bound to the execution context from which it is called (“lexical this”)
  setDistance = (distance,duration_in_traffic) => {
    this.setState({distance:parseFloat(distance),durationInTraffic:parseInt(duration_in_traffic)});
  }

  render() { 
    // ...
  }
}

See Javascript ES6 — Arrow Functions and Lexical this for more info.

from react-native-maps-directions.

I have tried and it should not be related to this issue since it can successfully execute the code inside setDistance, but somehow it will drive onReady to infinity loop when I call the function or this.setState().

from react-native-maps-directions.

Ok, think I see it now: setState() will trigger a re-render, thus re-rendering MapViewDirections. Normally a re-render with the same data won't happen, but I'll look further into it to be sure …

from react-native-maps-directions.

The problem is in this line:

if ((nextProps.origin != this.props.origin) || (nextProps.destination != this.props.destination) || !isEqual(nextProps.waypoints, this.props.waypoints)) {

You should not compare arrays in JS directly, because two arrays are always not equal. You should compare route values. Use isEqual instead of !== to fix this issue.

from react-native-maps-directions.

Good point @sidious18. Working and testing a fix right now.

from react-native-maps-directions.

It took a bit longer than expected, but couldn't trigger this one myself at first. The “culprit” was the fact that I used an array holding all coordinates in my state. This then resulted in the fact that the references remained the same all the time, even after a re-render.

In contrast: the example above creates a new object on every render. Even though react-native-maps-directions can now catch this, I'd advise against this use.

Thanks to all involved for their input :)

from react-native-maps-directions.