Examples

Basic tracking

AngularReactVue

import { Injectable, OnDestroy } from '@angular/core';
import BackgroundGeolocation, {
  Subscription,
} from '@transistorsoft/capacitor-background-geolocation';

@Injectable({ providedIn: 'root' })
export class BackgroundGeolocationService implements OnDestroy {
  private subscriptions: Subscription[] = [];

  init() {
    // Register event listeners *before* calling ready()
    this.subscriptions.push(
      BackgroundGeolocation.onLocation(location => {
        console.log('[onLocation]', location);
      })
    );

    // ready() configures the SDK and restores persisted state.
    // It does NOT start tracking — call start()/stop() separately.
    BackgroundGeolocation.ready({
      {{> ts-ready-config.md}}
    });
  }

  // e.g. wired to a toggle button in your template
  async onToggleTracking() {
    const state = await BackgroundGeolocation.getState();
    if (state.enabled) {
      await BackgroundGeolocation.stop();
    } else {
      await BackgroundGeolocation.start();
    }
    console.log('[state]', state.enabled, state.trackingMode);
  }

  ngOnDestroy() {
    this.subscriptions.forEach(s => s.remove());
  }
}

import React, { useEffect, useRef } from 'react';
import BackgroundGeolocation, {
  Subscription,
} from '@transistorsoft/capacitor-background-geolocation';

export default function App() {
  const subscriptions = useRef<Subscription[]>([]);

  useEffect(() => {
    const subs = subscriptions.current;

    // Register event listeners *before* calling ready()
    subs.push(
      BackgroundGeolocation.onLocation(location => {
        console.log('[onLocation]', location);
      })
    );

    // ready() configures the SDK and restores persisted state.
    // It does NOT start tracking — call start()/stop() separately.
    BackgroundGeolocation.ready({
      {{> ts-ready-config.md}}
    });

    return () => subs.forEach(s => s.remove());
  }, []);

  // e.g. a toggle-button handler in your UI
  const onToggleTracking = async () => {
    const state = await BackgroundGeolocation.getState();
    if (state.enabled) {
      BackgroundGeolocation.stop();
    } else {
      BackgroundGeolocation.start();
    }
    console.log('[state]', state.enabled, state.trackingMode);
  };

  return (
    <IonButton onClick={onToggleTracking}>Toggle Tracking</IonButton>
  );
}

<script setup lang="ts">
import { onMounted, onUnmounted } from 'vue';
import BackgroundGeolocation, {
  Subscription,
} from '@transistorsoft/capacitor-background-geolocation';

const subscriptions: Subscription[] = [];

onMounted(() => {
  // Register event listeners *before* calling ready()
  subscriptions.push(
    BackgroundGeolocation.onLocation(location => {
      console.log('[onLocation]', location);
    })
  );

  // ready() configures the SDK and restores persisted state.
  // It does NOT start tracking — call start()/stop() separately.
  BackgroundGeolocation.ready({
    {{> ts-ready-config.md}}
  });
});

// e.g. a toggle-button handler in your template
async function onToggleTracking() {
  const state = await BackgroundGeolocation.getState();
  if (state.enabled) {
    await BackgroundGeolocation.stop();
  } else {
    await BackgroundGeolocation.start();
  }
  console.log('[state]', state.enabled, state.trackingMode);
}

onUnmounted(() => {
  subscriptions.forEach(s => s.remove());
});
</script>