Geo location tracking app

[kabil]

Hi everyone,
I try to fetch current location but i have permission issue in new react native 0.60.kindly some one advice me how to get permission in react native and get the current location in map.if anyone have app.js kindly share me

[adam.sinnott]

This is my app.js. However the stopBackgroundLocation doesn’t work, so ignore that.
Make sure to install the followinf using expo install:

• expo-task-manager
• expo-permissions
• expo-location

import React, { Component } from 'react';
import { 
  Button, 
  StyleSheet, 
  Text, 
  TouchableOpacity,
  View 
} from 'react-native';  
import { Entypo } from '@expo/vector-icons';
import * as TaskManager from 'expo-task-manager'
import * as Permissions from 'expo-permissions';
import * as Location from 'expo-location';

const taskName = "geofencing"
var count = 0
var locationGlobal = {
  "coords": {
    "latitude": 0,
    "longitude": 0
  }
};

export default class App extends Component {
  constructor (props) {
    super(props)
  }

  state = {
    buttonText: false,
    hasLocationPermission: null,
    permissionStates: { 
      granted: "granted",
      denied: "denied"
    },    
  }  

  componentWillMount() {
    this._getLocationPermissionAsync();
    this.startBackgroundUpdate()
  }

  toggleTracking = () => {
    if (this.state.buttonText) {
      this.stopBackgroundUpdate()
      .then(this.state.buttonText ? this.setState({buttonText: true}) : this.setState({buttonText: false}))
      .catch((err)=>console.log(err))
      // TaskManager.isTaskRegisteredAsync(taskName)
      // .then((result)=>console.log(result))
      // .catch((err)=>console.log(err))
    } else {
      this.startBackgroundUpdate()
      .then(this.state.buttonText ? this.setState({buttonText: false}) : this.setState({buttonText: true}))
      .catch((err)=>console.log(err))
    }
  }

  _getLocationPermissionAsync = async () => {
    Permissions.askAsync(Permissions.LOCATION).then((response) => {
      this.setState({
          hasLocationPermission: response.status === this.state.permissionStates.granted
      });
    })
  }
  
  async startBackgroundUpdate() {
    await Location.startLocationUpdatesAsync(taskName, {
      accuracy: Location.Accuracy.Highest,
      timeInterval: 0,
      distanceInterval: 0,
      forgroundService: {
        notificationTitle: "I'm a notification title",
        notificationBody: "I'm a notification body",
        notificationBody: "#abcdef"
      }
    });    
    await Location.stopLocationUpdatesAsync(taskName)
  }
  
  async stopBackgroundUpdate() {
    await Location.stopLocationUpdatesAsync(taskName)
  }

  render () {
    return ( 
      <View style={styles.container}>
        <View style={styles.header}>
          <Text style={styles.headerText}>Track It</Text>
        </View>
        <View style={styles.body}>
          <View style={styles.centered}>
            <Text style={styles.coordinates}>51.5566 / 1.6677</Text>
          </View>
          <View style={styles.centered}>
            <Text style={styles.coordinatesLabel}>Current Co-ordinates: </Text>
          </View>
          <View style={styles.centered}>
            <Text style={styles.regionText}>
              Inside Region: {}
            </Text>
          </View>
          <View style={styles.toggleTracking}>
            <TouchableOpacity style={styles.toggleTrackingButton} onPress={this.toggleTracking}>
              <View style={styles.controller}>
                {this.state.buttonText ? <Entypo name="controller-stop" size={130} color="#ef6c00" /> : <Entypo name="controller-play" size={130} color="#ef6c00" />}
              </View>
            </TouchableOpacity>
          </View>
        </View>
      </View>
    )
  }
}

TaskManager.defineTask(taskName, async ({ data, error }) => {
  if (error) {
    return console.log(error)
  }
  if (data) {
    const { locations } = data;
    locationGlobal = locations[0];
    let date = new Date(locationGlobal.timestamp).toISOString().slice(-13, -5)
    // App.setLocation(location)
    console.log("Task has been running "+ count +" time(s). With data: "+data);
    console.log(locationGlobal);
    console.log(count++);
    console.log(date)
  }
});

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
    flexDirection: "column",
  },
  header: {
    flex: 1,
    backgroundColor: '#66BB6A',
    width: "100%",
    alignItems: 'center',
    justifyContent: 'center',
    padding: 20
  },
  headerText: {
    color: "#fff",
    fontSize: 30,
  },
  body: {
    flex: 4,
    padding: 50,
    marginTop: 50,
    padding: 50,
  },
  coordinates: {
    fontSize: 25,
    fontWeight: 'bold',
  },
  coordinatesLabel: {
    marginBottom: 20,
  },
  toggleTracking: {
    margin: 10,
  },
  toggleTrackingButton: {
    alignItems: 'center',
    justifyContent: 'center',
  },
  controller: {
    height: 120,
    alignItems: 'center',
    justifyContent: 'center',
  },
  centered: {
    alignItems: 'center',
    justifyContent: 'center',
  },
  regionText: {
    marginBottom: 20,
  }
});