Location Picker

A cross-platform location picker component for Web and React Native that allows users to search and select locations with geolocation support.

Usage

Select Location

location-picker-demo.tsx

import { LocationPicker } from "@/components/location-picker"

export default function Home() {
  return (
    <LocationPicker />
  )
}

location-picker-demo.tsx

import { LocationPicker } from "@/components/location-picker-rn"

export default function Home() {
  const [selectedLocation, setSelectedLocation] = useState<string>("");

  return (
    <LocationPicker
      variant="popover"
      onChange={setSelectedLocation}
      placeholder="Tap to search locations..."
    />
  )

}

Installation

Install the Location Picker component for your platform using your preferred package manager.

npx shadcn@latest add @rigidui/location-picker

Prerequisites

First, ensure you have React Native Reusables properly set up in your project. Follow the complete setup guide at React Native Reusables Installation.

Install Dependencies

Install the required Expo dependencies for location functionality:

npx expo install expo-device expo-location

Configure Expo Plugins

Add the expo-location plugin to your app.json file:

app.json

{
  "expo": {
    "plugins": ["expo-location"]
  }
}

For additional configuration options and permissions setup, refer to the Expo Location documentation.

Install Component

npx shadcn@latest add @rigidui/location-picker-rn

Features

The Location Picker component is packed with powerful features designed to provide an exceptional user experience across both Web and React Native platforms.

Location Search

Users can search for locations by name, address, or postal code with real-time suggestions.

Dual Variants

Choose between popover variant for compact layouts or inline variant for full-featured forms.

Autocomplete Suggestions

As users type, the component provides autocomplete suggestions for locations with debounced search.

Cross-Platform Support

Available for both Web and React Native with platform-specific optimizations and native geolocation support.

Geolocation Support

Allows users to quickly use their current location with browser geolocation API on Web and native location services on React Native.

Props

Prop	Type	Default
`defaultLocation?`	`string`	`''`
`autoDetectOnLoad?`	`boolean`	`false`
`variant?`	`'popover' \| 'inline'`	`'popover'`
`placeholder?`	`string`	`'Enter city, district, or area'`
`showLabel?`	`boolean`	`true`
`onChange?`	`(location: string) => void`	`undefined`
`className?`	`string`	`''`

Advanced Examples

Explore different configurations and use cases for the Location Picker component across Web and React Native platforms.

Popover Variant (Default)

Compact trigger that opens a popover with location search functionality. Perfect for navigation bars or space-constrained layouts.

Select Location

import { LocationPicker } from "@/components/location-picker"

export default function PopoverExample() {
  return (
    <LocationPicker
      variant="popover"
      defaultLocation="New York"
      onChange={(location) => console.log('Selected:', location)}
    />
  )
}

Inline Variant

Full-featured inline interface with immediate access to search functionality. Ideal for forms or dedicated location selection pages.

import { LocationPicker } from "@/components/location-picker"

export default function InlineExample() {
  return (
    <LocationPicker
      variant="inline"
      showLabel={true}
      placeholder="Search for your city..."
      onChange={(location) => console.log('Selected:', location)}
    />
  )
}

Auto-detect Location

Automatically detect user's current location when the component loads.

import { LocationPicker } from "@/components/location-picker"

export default function AutoDetectExample() {
  return (
    <LocationPicker
      variant="inline"
      autoDetectOnLoad={true}
      showLabel={false}
      placeholder="Detecting your location..."
    />
  )
}

Custom Styling

Customize the appearance with className and custom placeholder text.

Los Angeles

import { LocationPicker } from "@/components/location-picker"

export default function CustomExample() {
  return (
    <LocationPicker
      variant="popover"
      placeholder="Find stores near you..."
      defaultLocation="Los Angeles"
      className="border-2 border-blue-200 rounded-lg"
    />
  )
}

With Change Handler

Handle location changes with a callback function for integration with forms or state management.

import { LocationPicker } from "@/components/location-picker"
import { useState } from "react"

export default function HandlerExample() {
  const [selectedLocation, setSelectedLocation] = useState("")

  return (
    <div className="space-y-4">
      <LocationPicker
        variant="inline"
        showLabel={true}
        onChange={setSelectedLocation}
      />
      {selectedLocation && (
        <p className="text-sm text-muted-foreground">
          Selected: {selectedLocation}
        </p>
      )}
    </div>
  )
}