React Native Location Package

A lightweight React Native package for managing location permissions and coordinates using Expo Location. This package provides a simple context-based API for accessing device location with built-in permission handling.

Features

• 🎯 Simple context-based API
• 🔐 Built-in permission management
• 📍 Real-time coordinate tracking
• ♻️ Automatic refresh on app state changes
• 🎣 Custom React hooks for flexibility
• 📱 Expo Location integration

Installation

npm install expo-location

or

yarn add expo-location

Setup

1. Configure App Permissions

Add the following permissions to your app.json or app.config.js:

{
  "expo": {
    "plugins": [
      [
        "expo-location",
        {
          "locationAlwaysAndWhenInUsePermission": "Allow $(PRODUCT_NAME) to use your location."
        }
      ]
    ]
  }
}

2. Wrap Your App with LocationProvider

import { LocationProvider } from './path-to-package';

function App() {
  // Required callback that fires when permission status changes
  const handlePermissionChange = (isAllowed: boolean) => {
    console.log('Location permission:', isAllowed ? 'granted' : 'denied');
    // You can use this to update analytics, show notifications, etc.
  };

  return (
    <LocationProvider onPermissionChange={handlePermissionChange}>
      <YourApp />
    </LocationProvider>
  );
}

Usage

Using the Context Hook

Access location data anywhere in your component tree:

import { useLocationContext } from './path-to-package';

function MyComponent() {
  const { coordinates, permission, requestPermission } = useLocationContext();

  const handleRequestPermission = async () => {
    const result = await requestPermission();
    console.log('Permission status:', result.status);
  };

  if (!permission) {
    return <Text>Loading permission status...</Text>;
  }

  if (permission.status !== 'granted') {
    return (
      <View>
        <Text>Location permission is required</Text>
        <Button title="Grant Permission" onPress={handleRequestPermission} />
      </View>
    );
  }

  return (
    <View>
      <Text>Latitude: {coordinates?.lat}</Text>
      <Text>Longitude: {coordinates?.lng}</Text>
    </View>
  );
}

Using Individual Hooks

For more granular control, use the individual hooks:

import { useLocationPermission, useCurrentCoordinates } from './path-to-package';

function CustomLocationComponent() {
  const { permission, requestPermission } = useLocationPermission();
  const isGranted = permission?.status === 'granted';

  const { coordinates, refreshCoordinates } = useCurrentCoordinates({
    enabled: isGranted,
  });

  const handleRefresh = async () => {
    const newCoordinates = await refreshCoordinates();
    console.log('Updated coordinates:', newCoordinates);
  };

  return (
    <View>
      {coordinates && (
        <>
          <Text>Current Location:</Text>
          <Text>Lat: {coordinates.lat}</Text>
          <Text>Lng: {coordinates.lng}</Text>
          <Button title="Refresh" onPress={handleRefresh} />
        </>
      )}
    </View>
  );
}

API Reference

LocationProvider

Provider component that manages location state.

Props:

• onPermissionChange: (isAllowed: boolean) => void - Required. Callback fired when permission status changes (granted/denied)
• children: React.ReactNode - Child components

useLocationContext()

Hook to access location context. Must be used within a LocationProvider.

Returns:

{
  coordinates: Coordinates | null;
  permission: Location.LocationPermissionResponse | null;
  requestPermission: () => Promise<Location.LocationPermissionResponse>;
}

useLocationPermission()

Hook for managing location permissions independently.

Returns:

{
  permission: Location.LocationPermissionResponse | null;
  requestPermission: () => Promise<Location.LocationPermissionResponse>;
}

useCurrentCoordinates(params)

Hook for fetching and managing coordinates.

Parameters:

{
  enabled: boolean; // Whether to fetch coordinates
}

Returns:

{
  coordinates: Coordinates | null;
  refreshCoordinates: () => Promise<Coordinates | null>;
}

Types

interface Coordinates {
  lat: number;
  lng: number;
}

interface LocationContextType {
  coordinates: Coordinates | null;
  permission: Location.LocationPermissionResponse | null;
  requestPermission: (() => Promise<Location.LocationPermissionResponse>) | null;
}

Behavior

• Automatic Refresh: Coordinates automatically refresh when the app returns to the foreground
• Permission Checking: Permission status is checked on mount and cached
• Conditional Fetching: Coordinates are only fetched when permission is granted
• Error Handling: Built-in handling for permission denials and location errors

Example: Complete Implementation

import React from 'react';
import { View, Text, Button, StyleSheet } from 'react-native';
import { LocationProvider, useLocationContext } from './path-to-package';

function LocationDisplay() {
  const { coordinates, permission, requestPermission } = useLocationContext();

  if (!permission) {
    return <Text>Checking permissions...</Text>;
  }

  if (permission.status === 'denied') {
    return (
      <View style={styles.container}>
        <Text>Location access was denied</Text>
        <Text>Please enable it in settings</Text>
      </View>
    );
  }

  if (permission.status !== 'granted') {
    return (
      <View style={styles.container}>
        <Text>We need your location</Text>
        <Button title="Allow Location" onPress={requestPermission} />
      </View>
    );
  }

  return (
    <View style={styles.container}>
      <Text style={styles.title}>Your Location:</Text>
      {coordinates ? (
        <>
          <Text>Latitude: {coordinates.lat.toFixed(6)}</Text>
          <Text>Longitude: {coordinates.lng.toFixed(6)}</Text>
        </>
      ) : (
        <Text>Loading coordinates...</Text>
      )}
    </View>
  );
}

export default function App() {
  const handlePermissionChange = (isAllowed: boolean) => {
    console.log('Location permission:', isAllowed);
  };

  return (
    <LocationProvider onPermissionChange={handlePermissionChange}>
      <LocationDisplay />
    </LocationProvider>
  );
}

Dependencies

• expo-location: For location services
• react: Peer dependency
• react-native: Peer dependency