CODEWITHSUNDEEP
react-nativegps
CodeLover
CodeLover

Reputation: 208

React Native - Get Location latitude and longitude using react-native-get-location

I am creating an app which uses the phone's location. I would like to be able to get the latitude and longitude and using it as part of an api address.

I have been following this sample code using react-native-get-location and have been able to print the information in json formate but can't pull the latitude and longitude and use them.

react-native-get-location

Here is my code.

import GetLocation from 'react-native-get-location'

export default class App extends React.Component {
  constructor (props) {
    super(props);
    this.state = {
      isLoading: true,
      latitude: null,
      longitude: null,
      location: null
    };
  }

  _requestLocation = () => {
    GetLocation.getCurrentPosition({
      enableHighAccuracy: true,
      timeout: 150000,
    })
    .then(location => {
      this.setState ({
        location,
        isLoading: false,
      });
    })
    .catch(error => {
      const { code, message} = error;
      if (code === 'CANCELLED') {
        Alert.alert('location cancelled by user or by another request');
      }
      if (code === 'UNAVAILABLE') {
        Alert.alert('Location service is disabled or unavailable');
      }
      if (code === 'TIMEOUT') {
        Alert.alert('Location request timed out');
      }
      if (code === 'UNAUTHORIZED') {
        Alert.alert('Authorization denied')
      }
      this.setState({
        location: null,
        isLoading: false,
      });
    });
  }


componentDidMount() {
GetLocation.getCurrentPosition(async (info) => {
  const location = await GetLocation(
    info.coords.latitude,
    info.coords.longitude
  );
})
const fetch = require('node-fetch');
 fetch('https://api.weatherapi.com/v1/forecast.json?&q=London', {
   method: 'GET',
   headers: {
    'Accept': 'application/json',
    'Content-Type': 'application/json'

   },
 }).then((response) => response.json())
   .then((responseJson) => {
   console.log(responseJson);
     this.setState({
       isLoading: false, 
       dataSource: responseJson,  
     })       
   }).catch((error) => {
     console.error(error);
   });
}

  render() {
    const {location, isLoading} = this.state;
    if (this.state.isLoading) {
  return (
    <View style={{flex: 1, paddingTop: 20}}>
     <ActivityIndicator /> 
  
  </View>
  );
    }

    return (
     <View style={{flex:1, paddingTop: 20}}>
<Text>{JSON.stringify(location, 0, 2)}</Text>

<View style={{flex:1, flexDirection: 'row', textAlign: 'center', paddingLeft: 90}}>

<Button
                        disabled={isLoading}
                        title="Get Location"
                        onPress={this._requestLocation}
                    />
</View>

      </View>
       )
      }
   }

Upvotes: 2

Views: 11542

Answers (1)

Pasindu Dilshan
Pasindu Dilshan

Reputation: 386

react-native-geolocation-service is a good alternative too for fetching latitude & longitude values.

Example usage:

import GeoLocation from 'react-native-geolocation-service';

const getDeviceCurrentLocation = async () => {
  return new Promise((resolve, reject) =>
    GeoLocation.getCurrentPosition(
      (position) => {
        resolve(position);
      },
      (error) => {
        reject(error);
      },
      {
        enableHighAccuracy: true, // Whether to use high accuracy mode or not
        timeout: 15000, // Request timeout
        maximumAge: 10000 // How long previous location will be cached
      }
    )
  );
};

Upvotes: 1

Related Questions