ionic react geoloaction

//tab2.tsx

import React, { useState } from 'react';
import {
  IonContent, IonHeader, IonPage, IonTitle, IonToolbar,
  IonAlert, IonButton, IonCard, IonCardHeader,
  IonCardSubtitle, IonCardTitle, IonCardContent,
  IonItem, IonIcon, IonLabel, IonDatetime, IonFooter,
  IonList, IonItemDivider, IonTextarea, IonAvatar,
  IonText, IonThumbnail, IonSelectOption, IonInput,
  IonSelect, IonCheckbox, IonToggle, IonRange,
  IonNote, IonRadio, IonItemSliding, IonItemOption,
  IonItemOptions, IonListHeader, IonChip, IonImg,
  IonLoading, IonProgressBar, IonSkeletonText,
  IonReorder, IonReorderGroup, IonSlide, IonSlides,
  IonTabBar, IonTabs, IonTabButton, IonBadge,
  IonRouterOutlet
} from '@ionic/react';
import ExploreContainer from '../components/ExploreContainer';
import './Tab2.css';
import {
  calendar, personCircle, map,
  informationCircle
} from 'ionicons/icons';
import { Plugins } from '@capacitor/core';

const Tab2: React.FC = () => {
  const { Geolocation } = Plugins;
  const [coordinates, setCoordinates] = useState<any>(null)
  const [watching, setWatching] = useState<boolean>(false)
  const [watchN, setWatchN] = useState<string>('')

  const getCurrentPosition = async () => {
    const coordinates = await Geolocation.getCurrentPosition();
    setCoordinates(coordinates.coords)
    console.log(coordinates.coords)
  }

  const watchPosition = () => {
    const wait = Geolocation.watchPosition({}, (position, err) => {
      setWatching(true)
      setWatchN(wait.toString())
      setCoordinates(position.coords)
      console.log(wait, position)
    })
  }

  const clearWatch = () => {
    Geolocation.clearWatch({ id: watchN })
    setWatching(false)
  }

  return (
    <IonPage>
      <IonHeader>
        <IonToolbar>
          <IonTitle>Geolocation Examples</IonTitle>
        </IonToolbar>
      </IonHeader>
      <IonContent>
        <IonList>
          <IonItem >
            <IonButton onClick={() => getCurrentPosition()}>get location</IonButton>
            <IonButton onClick={() => watchPosition()} disabled={watching}>watch location</IonButton>
            <IonButton onClick={() => clearWatch()}>clear watch</IonButton>
          </IonItem>
          <IonItem>
            <IonTextarea readonly>
              accuracy {coordinates ? coordinates.accuracy : ''} <br />
              latitude: {coordinates ? coordinates.latitude : ''} <br />
              longitude: {coordinates ? coordinates.longitude : ''}<br />
              altitude: {coordinates ? coordinates.altitude : ''} <br />
              altitude Accuracy: {coordinates ? coordinates.altitudeAccuracy : ''} <br />
              heading: {coordinates ? coordinates.heading : ''} <br />
              speed: {coordinates ? coordinates.speed : ''}
            </IonTextarea>
          </IonItem>
        </IonList>
      </IonContent>
    </IonPage >
  )
}

export default Tab2;

------------------------------------

androidManifext.xml

<?xml version='1.0' encoding='utf-8'?>

<manifest package="capacitor.android.plugins"

xmlns:android="http://schemas.android.com/apk/res/android"

xmlns:amazon="http://schemas.amazon.com/apk/res/android">

    <!-- Geolocation API -->

    <uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />

    <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />

    <uses-feature android:name="android.hardware.location.gps" />

<application >

</application>

</manifest>

----------------------

reference:

https://capacitor.ionicframework.com/docs/apis/geolocation#android-notes