react native maps directions onReady distance and duration

Question

There was a problem showing the distance in onReady showing slower than render. Would like to show the distance and duration values before displaying the render.

const MyMapView = (props) => {
    return (
        <MapView
            style={{ flex: 1 }}
            region={props.region}
            showsUserLocation={true}
        >
            <Marker coordinate={props.region} />
            <MapViewDirections
                origin={MapOrigin}
                destination={props.region}
                apikey={API_MAP.API}
                strokeWidth={3}
                strokeColor="hotpink"
                onReady={result => {
                    MapData.distance = result.distance
                    MapData.duration = result.duration
                    console.log(`Distance: ${MapData.distance} km`)
                    console.log(`Duration: ${MapData.duration} min.`)
                }}
            />
            <Body>
                <Text>distance : {MapData.distance} km.time : {MapData.duration} min</Text>
            </Body>
        </MapView>
    )
}

After displaying a value, it displays the value in Text before storing it in the const file.

Can you please let me know what do you mean by **displaying the render**? — Rajan, Mar 26 '20 at 11:32
I mean result.display and reult.duration it storage is slowly than display — Ya'Su Min, Mar 26 '20 at 11:34
No. I mean storage val Map.distance = result.distance it a slowly than Instead of showing the new value, But showing the old value first. — Ya'Su Min, Mar 26 '20 at 11:41
Is there a way to store variables and display more quickly than before? — Ya'Su Min, Mar 26 '20 at 11:44
After the display it shows, Before storing in variables **MapData.distance and MapData.duration** Therefore, in ` distance: {MapData.distance} km.time: {MapData.duration} min ` It shows the old values. When there is a change it doesn't show results. But after changing it again, it will show the other value that was collected before that round to show — Ya'Su Min, Mar 27 '20 at 08:16

Rajan · Accepted Answer · 2020-03-27T08:41:46.127

0

Try to forceUpdate your component.

class MyMapView extends React.Component {
  render() {
    return (
      <MapView
        style={{ flex: 1 }}
        region={props.region}
        showsUserLocation={true}
      >
        <Marker coordinate={props.region} />
        <MapViewDirections
          origin={MapOrigin}
          destination={props.region}
          apikey={API_MAP.API}
          strokeWidth={3}
          strokeColor="hotpink"
          onReady={result => {
            MapData.distance = result.distance
            MapData.duration = result.duration
            console.log(`Distance: ${MapData.distance} km`)
            console.log(`Duration: ${MapData.duration} min.`)
            this.forceUpdate()
          }}
        />
        <Body>
          <Text>distance : {MapData.distance} km.time : {MapData.duration} min</Text>
        </Body>
      </MapView>
    )
  }
}

edited Mar 27 '20 at 08:41

answered Mar 27 '20 at 08:18

Rajan

1,512
2
14
18

it's still the same. – Ya'Su Min Mar 27 '20 at 08:33
If you don't want to convert your function component to class component. Then please refer https://stackoverflow.com/a/53837442/2427715 – Rajan Mar 27 '20 at 08:43
**Thank you.** I can do it. – Ya'Su Min Mar 28 '20 at 10:51

score 0 · Answer 2 · edited Mar 09 '23 at 23:50

0

onReady={result => {
 console.log(`Distance: ${result.distance} km`)
 console.log(`Duration: ${result.duration} min.`)
 this.forceUpdate()
}}

edited Mar 09 '23 at 23:50

Ahmed Sbai

10,695
9
19
38

answered Mar 08 '23 at 11:14

GUGAN RAJ

101
7

react native maps directions onReady distance and duration

2 Answers2