React Native android set state array not working

Issue

Android Set state array not working. React-native MapView componentWillMount update state set map position not working. Help me please.

States :

constructor(props) {
    super(props);
    this.state = {
        loading: '',
        mapRegion: {
          latitude: 37.78825,
          longitude: -122.4324,
          latitudeDelta: 0.0922,
          longitudeDelta: 0.0421,
        },
        location: {
          coords: {
            latitude: 37.78825,
            longitude: -122.4324,
            latitudeDelta: 0.0922,
            longitudeDelta: 0.0421,
          }
        }
    };
  }

component Will Mount

async componentWillMount() {
this.setState({
          mapRegion: {
            latitude: responseJson.latitude,
            longitude: responseJson.longitude,
            latitudeDelta: 0.0922,
            longitudeDelta: 0.0421,
          },
          location: {
            coords: {
              latitude: responseJson.latitude,
              longitude: responseJson.longitude,
              latitudeDelta: 0.0922,
              longitudeDelta: 0.0421,
            }
          },
 });
}

Return view not change position

<MapView style={{ width: '100%', height: '100%' }}
region={{
     latitude: this.state.location.coords.latitude,
     longitude: this.state.location.coords.longitude,
     latitudeDelta: 3,
      longitudeDelta: 3
 }}
zoomEnabled = {true}>
<MapView.Marker coordinate={this.state.location.coords} title={strings('Location.Buradasiniz')} />
<MapView.Circle center={this.state.location.coords} radius={this.state.radius} strokeColor='red' fillColor="rgba(255, 0, 0, 0.20)"/></MapView>

Solution

Try this:

async componentWillMount() {
await this.setState({
          mapRegion: {
            latitude: responseJson.latitude,
            longitude: responseJson.longitude,
            latitudeDelta: 0.0922,
            longitudeDelta: 0.0421,
          },
          location: {
            coords: {
              latitude: responseJson.latitude,
              longitude: responseJson.longitude,
              latitudeDelta: 0.0922,
              longitudeDelta: 0.0421,
            }
          },
 });
}

When You use async after that You must write await somewhere, here is the docs: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/async_function

Or try without async await like this:

componentWillMount() {
 this.setState({
          mapRegion: {
            latitude: responseJson.latitude,
            longitude: responseJson.longitude,
            latitudeDelta: 0.0922,
            longitudeDelta: 0.0421,
          },
          location: {
            coords: {
              latitude: responseJson.latitude,
              longitude: responseJson.longitude,
              latitudeDelta: 0.0922,
              longitudeDelta: 0.0421,
            }
          },
 });
}

Good luck))

Answered By - Robert Hovhannisyan