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

react-native get current location

$
0
0

I tried to use react-native-maps and get my current location. I tried to use not only 'react-native-geolocation-service' and '@react-native-community/geolocation'. Map still indicate google HQ maybe in San Francisco. ({"coords": {"accuracy": 20, "altitude": 5, "heading": 0, "latitude": 37.4219983, "longitude": -122.084, "speed": 0}, "mocked": false, "timestamp": 1577294172000})

How can I load my current location in my android emulator(Pixel_2 & Pixel_3). Please answer to me... I've been wrestling for over a week...

Below is my packages.

"dependencies": {
    "@react-native-community/geolocation": "^2.0.2",
    "react": "16.9.0",
    "react-native": "0.61.5",
    "react-native-android-location-enabler": "^1.2.0",
    "react-native-geolocation-service": "^3.1.0",
    "react-native-maps": "0.26.1"
  },



import React, {Component} from 'react';
import {StyleSheet, Text, View, Button, Alert, TextInput,
  TouchableWithoutFeedback, 
  TouchableHighlight, TouchableOpacity,
  Keyboard, ScrollView, PermissionsAndroid,
} from 'react-native';

import MapView, {Marker}  from 'react-native-maps';
import Geolocation from 'react-native-geolocation-service';
// import Geolocation from '@react-native-community/geolocation';
import RNAndroidLocationEnabler from 'react-native-android-location-enabler';

Geolocation.getCurrentPosition(
  (position) => {
      console.log(position);
  },
  (error) => {
      // See error code charts below.
      console.log(error.code, error.message);
  },
  { enableHighAccuracy: true, timeout: 15000, maximumAge: 10000 }
);


export default class App extends Component {


  render() {
    return (

        <View style={styles.container}>


        <MapView

          minZoomLevel={6}
          maxZoomLevel={16}
          // mapType="none"
          style={styles.map}
          initialRegion={{

            // latitude: this.state.location.coords.latitude,
            // longitude: this.state.location.coords.longitude,
            latitude: 37.4219983,
            longitude: -122.4324,
            latitudeDelta: 0.0922,
            longitudeDelta: 0.0421,
          }}>


               <Marker
          coordinate={{latitude: 37.78825, longitude: -122.4324}}
          title="this is a marker"
          description="this is a marker example"
        />


        </MapView>
        <Text style={styles.SampleHeader}>
             GUDUGUDU ^^  
             </Text>
      </View>

    );
  }
}

const styles = StyleSheet.create({
  SampleHeader: {
    // flex: 3,
    // flexDirection: 'column',
    backgroundColor: '#d9d9d9',
    // width: 90,
    paddingTop: 0,
    paddingBottom: 5,
    marginLeft: 15,
    marginRight: 15,
    marginTop: 5,
    marginBottom: 5,
    textAlign: "center",
    // fontFamily: 'Cochin',
    fontSize: 22,
    fontWeight: '300',
    color: 'black',
    padding: 5,
    borderRadius: 10,
  },
  container: {
    position: 'absolute',
    top: 0,
    left: 0,
    right: 0,
    bottom: 0,
    justifyContent: 'flex-end',
    alignItems: 'center',
  },
  map: {
    position: 'absolute',
    top: 0,
    left: 0,
    right: 0,
    bottom: 0,
  },


});
'''

Viewing all articles
Browse latest Browse all 29455

Trending Articles



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