CODEWITHSUNDEEP
react-nativeexporeact-native-maps
Matheus Silva
Matheus Silva

Reputation: 118

Map back to previous position after onRegionChange

I'm using Expo MapView, and when I try to change the value of the indicated region in the onRegionChange, the map returns to the previous position. How fix this?

import React from 'react';
    import { Text, View, TouchableOpacity } from 'react-native';
    import { Camera, Permissions } from 'expo';
    import {
      Location,
      MapView,
      Marker
    } from 'expo';

    export default class App extends React.Component {
      state= {
          region: {
            latitude: 37.78825,
            longitude: -122.4324,
            latitudeDelta: 0.0922,
            longitudeDelta: 0.0421,
          },
      }

      render() {
        return (
          <MapView
            style={{ flex: 1, height: '100%', width: '100%', zIndex: 0 }}
            onRegionChange={(region) =>this.setState({ region: region })}
            region={this.state.region}
          />
        );
      }
    }

Upvotes: 0

Views: 968

Answers (2)

Matheus Silva
Matheus Silva

Reputation: 118

I solved with:

 onRegionChangeComplete={(region) => props.map.animateToRegion(region, 0)}

Upvotes: 1

Jaydeep Galani
Jaydeep Galani

Reputation: 4961

Its because you are setting state that is passed to region props in onRegionChange,

setState takes its time to set the value and re-render component.

In between onRegionChange is called atleast 5-10 times.

Hence again 5-10 setState, so it is becoming laggy.

If you want to store current region then just use other state than region.

EDIT: actually using state can also be laggy right because after all it is again doing all the stuffs but now just name changed.

SO you might use normal variable instead of state.

Upvotes: 3

Related Questions