@54vie/location - Location Services

Module providing location services for 54VIE Super App.

Installation

pnpm add @54vie/location

Current Location

import { useLocation, LocationService } from '@54vie/location';

// Hook
function NearbyStores() {
  const {
    location,
    isLoading,
    error,
    hasPermission,
    requestPermission,
    refresh,
  } = useLocation();

  if (!hasPermission) {
    return <Button onPress={requestPermission}>Allow Location</Button>;
  }

  if (isLoading) return <Loading />;

  return <StoreList lat={location.latitude} lng={location.longitude} />;
}

// Direct
const service = new LocationService();
const position = await service.getCurrentPosition({
  accuracy: 'high',
  timeout: 15000,
});

Location Tracking

import { useTracking } from '@54vie/location';

function DeliveryTracking() {
  const {
    isTracking,
    positions,
    distance,
    start,
    stop,
    pause,
    resume,
  } = useTracking();

  return (
    <View>
      <MapView>
        <Polyline coordinates={positions} />
      </MapView>
      <Text>Distance: {distance.toFixed(2)} km</Text>
      <Button onPress={isTracking ? stop : start}>
        {isTracking ? 'Stop' : 'Start'} Tracking
      </Button>
    </View>
  );
}

Geofencing

import { useGeofence } from '@54vie/location';

function StorePromotion() {
  const { addRegion, onEnter, onExit } = useGeofence();

  useEffect(() => {
    addRegion({
      id: 'store-1',
      name: 'Store ABC',
      latitude: 10.7769,
      longitude: 106.7009,
      radius: 100, // meters
    });

    onEnter((region) => {
      showNotification(`Welcome to ${region.name}!`);
    });

    onExit((region) => {
      showNotification(`Thanks for visiting ${region.name}!`);
    });
  }, []);
}

Geocoding

import { useGeocoding, GeocodingService } from '@54vie/location';

// Hook
function AddressInput() {
  const { geocode, reverseGeocode, isLoading } = useGeocoding();

  const handleAddressSubmit = async (address) => {
    const location = await geocode(address);
    console.log(location); // { latitude, longitude }
  };

  const handleMapPress = async (lat, lng) => {
    const address = await reverseGeocode(lat, lng);
    console.log(address); // { street, ward, district, city }
  };
}

Address Autocomplete

import { useAddressSearch } from '@54vie/location';

function AddressSearch() {
  const { search, results, isLoading } = useAddressSearch();

  return (
    <View>
      <TextInput
        placeholder="Search address..."
        onChangeText={search}
      />
      <FlatList
        data={results}
        renderItem={({ item }) => (
          <ListItem
            title={item.formattedAddress}
            subtitle={item.district}
            onPress={() => selectAddress(item)}
          />
        )}
      />
    </View>
  );
}

Map Components

import { MapView, Marker, Polyline, Circle } from '@54vie/location';

function StoreMap() {
  return (
    <MapView
      initialRegion={{
        latitude: 10.7769,
        longitude: 106.7009,
        latitudeDelta: 0.01,
        longitudeDelta: 0.01,
      }}
      showsUserLocation
    >
      <Marker
        coordinate={{ latitude: 10.7769, longitude: 106.7009 }}
        title="Store ABC"
      />
      <Circle
        center={{ latitude: 10.7769, longitude: 106.7009 }}
        radius={500}
        fillColor="rgba(0, 122, 255, 0.1)"
      />
    </MapView>
  );
}

Vietnam Support

import { formatVietnamAddress, VIETNAM_LANDMARKS } from '@54vie/location';

// Format address
const formatted = formatVietnamAddress({
  street: '123 Nguyen Hue',
  ward: 'Ben Nghe',
  district: 'Quan 1',
  city: 'Ho Chi Minh',
});
// "123 Nguyen Hue, Phuong Ben Nghe, Quan 1, TP. Ho Chi Minh"

// Popular locations
console.log(VIETNAM_LANDMARKS.hoChiMinh.center);
// { lat: 10.7769, lng: 106.7009 }