ExpoBackgroundLocation/app/(tabs)/index.tsx

import {
	Image,
	StyleSheet,
	Platform,
	View,
	Text,
	Button,
	NativeModules,
} from "react-native";

import { HelloWave } from "@/components/HelloWave";
import ParallaxScrollView from "@/components/ParallaxScrollView";
import { ThemedText } from "@/components/ThemedText";
import { ThemedView } from "@/components/ThemedView";
import React, { useEffect } from "react";
import * as Location from "expo-location";

import { Colors } from "@/constants/Colors";
// import NativeTaskRunner from "../../specs/NativeTaskRunner";

const { ForegroundHeadlessModule } = NativeModules;

export default function HomeScreen() {
	const [enabled, setEnabled] = React.useState(false);

	useEffect(() => {
		abc();
	}, []);

	async function abc() {
		let { status } = await Location.requestForegroundPermissionsAsync();
		if (status !== "granted") {
			console.log(":/");
		}

		console.log("getting location");
		const location = await Location.getLastKnownPositionAsync();
		console.log(location);
	}

	async function onLocPress(): Promise<void> {
		try {
			// const locInfo = (await geoLocationPromise()) as GeolocationResponse;
			// ToastAndroid.show(
			//   `lat-${locInfo.coords.latitude};long-${locInfo.coords.longitude}`,
			//   5000,
			// );
			if (enabled) {
				return;
			}

			try {
				ForegroundHeadlessModule.startService();
				// NativeTaskRunner.startService();
				setEnabled(true);
				// AsyncStorage.setItem('locationtask', '1');
			} catch (error) {
				console.log(error);
			}
			console.log("Did it run?");
		} catch (error) {
			console.log(error);
		}
	}

	function onLocStop() {
		try {
			ForegroundHeadlessModule.stopService();
			// NativeTaskRunner.stopService();
			setEnabled(false);
		} catch (error) {
			console.log(error);
		}
	}

	return (
		<ParallaxScrollView
			headerBackgroundColor={{ light: "#A1CEDC", dark: "#1D3D47" }}
			headerImage={
				<Image
					source={require("@/assets/images/partial-react-logo.png")}
					style={styles.reactLogo}
				/>
			}
		>
			<ThemedView style={styles.titleContainer}>
				<ThemedText type="title">Welcome!</ThemedText>
				<HelloWave />
			</ThemedView>
			<View style={styles.toolbar}>
				<Text style={styles.title}>Location Background Demo</Text>
				<Button title="Location Start" onPress={onLocPress} />
				<Button title="Stop" onPress={onLocStop} />
			</View>
			<ThemedView style={styles.stepContainer}>
				<ThemedText type="subtitle">Step 1: Try it</ThemedText>
				<ThemedText>
					Edit{" "}
					<ThemedText type="defaultSemiBold">
						app/(tabs)/index.tsx
					</ThemedText>{" "}
					to see changes. Press{" "}
					<ThemedText type="defaultSemiBold">
						{Platform.select({
							ios: "cmd + d",
							android: "cmd + m",
							web: "F12",
						})}
					</ThemedText>{" "}
					to open developer tools.
				</ThemedText>
			</ThemedView>
			<ThemedView style={styles.stepContainer}>
				<ThemedText type="subtitle">Step 2: Explore</ThemedText>
				<ThemedText>
					Tap the Explore tab to learn more about what's included in
					this starter app.
				</ThemedText>
			</ThemedView>
			<ThemedView style={styles.stepContainer}>
				<ThemedText type="subtitle">
					Step 3: Get a fresh start
				</ThemedText>
				<ThemedText>
					When you're ready, run{" "}
					<ThemedText type="defaultSemiBold">
						npm run reset-project
					</ThemedText>{" "}
					to get a fresh{" "}
					<ThemedText type="defaultSemiBold">app</ThemedText>{" "}
					directory. This will move the current{" "}
					<ThemedText type="defaultSemiBold">app</ThemedText> to{" "}
					<ThemedText type="defaultSemiBold">app-example</ThemedText>.
				</ThemedText>
			</ThemedView>
		</ParallaxScrollView>
	);
}

const styles = StyleSheet.create({
	title: {
		fontSize: 12,
		flex: 1,
		fontWeight: "bold",
		color: Colors.black,
	},
	titleContainer: {
		flexDirection: "row",
		alignItems: "center",
		gap: 8,
	},
	stepContainer: {
		gap: 8,
		marginBottom: 8,
	},
	reactLogo: {
		height: 178,
		width: 290,
		bottom: 0,
		left: 0,
		position: "absolute",
	},
	toolbar: {
		height: 57,
		flexDirection: "row",
		paddingLeft: 10,
		paddingRight: 10,
		alignItems: "center",
		backgroundColor: Colors.gold,
	},
});