2

I have below code base

 componentDidMount() {
        //firebase.firestore().collection('locations').doc('test').set({ test: 'test' })

        Geolocation.getCurrentPosition(
            (position) => {
                if (position) {

                    this.setState({
                      region: {
                        latitude: Number(position.coords.latitude),
                        longitude: Number(position.coords.longitude),
                        latitudeDelta: 0.003,
                        longitudeDelta: 0.003,
                      },
                    });
                  }
                  alert(JSON.stringify(this.state.region))
            },
            (error) => alert(JSON.stringify(error)),
            { enableHighAccuracy: true, timeout: 20000, maximumAge: 1000, distanceFilter: 100 }
        );
        this.unsubscribe = this.locationRef.onSnapshot(this.getCollectionData);
       // firebase.firestore().collection("locations").get().then(QuerySnapshot => {  });
    }

And Map

  render() {
        return (<View style={{
            flex: 1,
            flexDirection: 'column',
          }}>
            <HeaderNavigationBar {...this.props} />
            <MapView showsUserLocation={true}
                // ref={map => this.map = map}
                initialRegion={this.state.region}
                style={styles.container}
            >
                {this.state.AllLocations.map((marker, index) => (
                    <MapView.Marker key={index}
                        coordinate={marker.locations.coords}
                        title={marker.Title}
                    />
                ))}
            </MapView>
          </View>);

    }

componentDidMount is correcty updating the state, but map is not showing correct position,it is taking as it was set in construction

constructor(props) {
        super(props);
        this.locationRef = firebase.firestore().collection('locations');
        this.unsubscribe = null;
        this.state = {
            isLoading: true,
            AllLocations: [],
            region: {
                latitude: 0,
                longitude: 0,
                latitudeDelta: 0.003,
                longitudeDelta: 0.003,
            }
        };
    }

Please help

thanks

2 Answers 2

2

initialRegion is used for the initial render of map. In your case, You are getting the user location after your map render, Thats the reason its not getting updated.

To counter this there are two ways.

1: use a loading state till you get your use location, and prevent the map render before you get the location.

2: Use region, for example region = {this.state.region}.

<MapView showsUserLocation={true}
                // ref={map => this.map = map}
                initialRegion={this.state.region}
                region={this.state.region}
                style={styles.container}
            >
                {this.state.AllLocations.map((marker, index) => (
                    <MapView.Marker key={index}
                        coordinate={marker.locations.coords}
                        title={marker.Title}
                    />
                ))}
            </MapView>

Both will work, it depends on your usecase.

4
  • I added region={this.state.region}, but still no effect Apr 15, 2019 at 13:19
  • The issue is with location probably, make sure you are getting the location for your geolocation api, It doesn't work well on many phones, and you can try a loading state till you get a location. Apr 15, 2019 at 13:27
  • I am getting geolocation correctly i checked by placing an alert Apr 16, 2019 at 4:38
  • Yes adding the region property doesn't work. Location is being captured correctly. Anyone found answer to this problem? Apr 25, 2021 at 20:46
1

Try this

{this.state.region ? (<MapView


                    style={[styles.map]}
                    initialRegion={this.state.region}
                    region={this.state.region}


                    provider={PROVIDER_GOOGLE}


                >


                    {this.state.AllLocations.map((marker, index) => (
                    <MapView.Marker key={index}
                        coordinate={marker.locations.coords}
                        title={marker.Title}
                    />
                ))}
                </MapView>) : (
                        <MapView
                            loadingEnabled={true}
                            style={styles.map}
                            showsMyLocationButton={true}
                            provider={PROVIDER_GOOGLE}
                            style={[styles.map]}
                        >
                        </MapView>
                    )
                }

Set region: null in the constructor it will work

1
  • This works. I created a separate function and did this. Apr 25, 2021 at 21:07

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.