Basic Usage

Quick Start

Here's a basic example using OpenStreetMap (which requires no API key):

import { LocationAutocomplete } from '@julekgwa/react-native-places-autocomplete';

export default function App() {
  return (
    <LocationAutocomplete
      provider="openstreetmap"
      onLocationSelect={(location) => {
        console.log('Selected:', location);
      }}
    />
  );
}

Here's a basic example of how to use the LocationAutocomplete component:

import React from 'react';
import { View, Text } from 'react-native';
import { LocationAutocomplete } from '@julekgwa/react-native-places-autocomplete';

// Create an attribution component
const Attribution = () => (
  <Text style={{ padding: 8, fontSize: 10, color: '#666' }}>
    © 2024 Your Geocoding Provider
  </Text>
);

const App = () => {
  const handleLocationSelect = (location) => {
    console.log('Selected location:', location);
  };

  return (
    <View style={{ flex: 1, padding: 20 }}>
      <LocationAutocomplete
        provider="openstreetmap"
        onLocationSelect={handleLocationSelect}
        placeholder="Search for a location..."
        attribution={Attribution}
        providerConfig={{
          userAgent: 'YourApp/1.0',
        }}
      />
    </View>
  );
};

export default App;

Props Explanation

• provider: Specifies which geocoding provider to use (e.g., 'openstreetmap', 'google', 'mapbox')
• onLocationSelect: Callback function that receives the selected location data
• placeholder: Custom placeholder text for the search input
• attribution: Component to display provider attribution (required by most providers)
• providerConfig: Configuration options for the selected provider

Core Features

api-reference.md

Location Selection

<LocationAutocomplete
  provider="openstreetmap"
  onLocationSelect={(location) => {
    const { place_id, display_name, lat, lon } = location;
    console.log('Place ID:', place_id);
    console.log('Name:', display_name);
    console.log('Coordinates:', { lat, lon });
  }}
/>

Recent Searches

const [recentSearches, setRecentSearches] = useState([]);

<LocationAutocomplete
  showRecentSearches={true}
  recentSearches={recentSearches}
  onRecentSearchesChange={setRecentSearches}
  maxRecentSearches={5}
/>

Handling Errors

<LocationAutocomplete
  provider="google"
  providerConfig={{
    apiKey: 'YOUR_API_KEY'
  }}
  onError={(error) => {
    console.error('Search error:', error);
  }}
/>

See the API Reference guide for more detailed setup options.