Quantcast
Channel: Active questions tagged react-native+ios - Stack Overflow
Viewing all articles
Browse latest Browse all 16750

React Native issue with state and initialRegion in MapView component

$
0
0

I have a MapView that I'm trying to have focus on a user's current location. Right now I'm logging the position, and logging the currentRegion state. My issue is the component is showing the empty array in the log, and after it cycles through render it sets the state as the position coordinates, so that the MapView shows me somewhere in the middle of the ocean. Why isn't initialRegion grabbing the changed state and rendering?

 const screen = Dimensions.get('window');    const ASPECT_RATIO = screen.width / screen.height;    var LATITUDE_DELTA = 0.3022;    var LONGITUDE_DELTA = LATITUDE_DELTA * ASPECT_RATIO;    class MapScreen extends Component {      constructor(props) {        super(props)        this.state = {          currentRegion: []        }      }      componentDidMount() {        navigator.geolocation.getCurrentPosition(          (position) => {            console.log(position)            this.setState({ currentRegion: {              latitude: position.coords.latitude,              longitude: position.coords.longitude,              latitudeDelta: LATITUDE_DELTA,              longitudeDelta: LONGITUDE_DELTA            }})          },          (error) => alert(error.message),          {timeout: 20000, maximumAge: 1000}        )      }      render () {        console.log(this.state.currentRegion)        return(<View style={styles.container}><MapView              showsUserLocation = {true}              style={styles.map}              initialRegion={this.state.currentRegion}            /></View>        )      }     }

Viewing all articles
Browse latest Browse all 16750

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>