React Native Place Autocomplete Picker

A fully native, high-performance and easy to use Google Place Autocomplete picker for React Native. Built with the new architecture (Turbo Modules) and the new Google Places SDK for maximum performance and a seamless native feel on both iOS and Android.

Demos

iOS	Android

✨ Features

• 📍 New Google Places SDK: Utilizes the latest and most powerful Google Places SDK for accurate and reliable place data.
• 📱 Fully Native UI: Presents a 100% native autocomplete interface on both iOS and Android for a smooth user experience.
• 🔧 Customizable: Control the presentation mode on Android (fullscreen or overlay).
• 🚀 Turbo Module Powered: Built for the new React Native architecture, ensuring high performance and direct native integration.
• 📝 Rich Data: Returns detailed place information, including formatted address, coordinates, and granular addressComponents (with long and short names).

📦 Installation

Install the package using npm or yarn:

1npm install react-native-place-autocomplete-picker
2# --- or ---
3yarn add react-native-place-autocomplete-picker

Android Setup

No additional setup is required for Android. The API key is passed programmatically. Just rebuild the project and run.

🔑 Getting Your API Key

This module uses the new Google Places SDK, which requires you to enable the "Places API (New)" in your Google Cloud project. You can use an existing API key, but you must ensure this new service is enabled for it.

1. Go to the Google Cloud Console.
2. Create a new project or select an existing one.
3. Enable Billing for your project and APIs & Services > Library.
4. Search for "Places API (New)".

   Important: Do not select the legacy "Places API". This module will not work with it.

5. Click the Enable button and go to APIs & Services > Credentials to create a new API Key or select an existing one.

Usage

Using the picker is straightforward. First, initialize it with your API key as soon as your app starts, then call the open method to present the UI.

1import { View, Button, Text, StyleSheet, ScrollView, Platform } from 'react-native';
2import * as PlacePicker from 'react-native-place-autocomplete-picker';
3
4// It's recommended to store your API key in a secure way, e.g., environment variables.
5const YOUR_API_KEY = "YOUR_GOOGLE_PLACES_API_KEY";
6
7export default function App() {
8  const [selectedPlace, setSelectedPlace] = useState(null);
9
10  useEffect(() => {
11    // Initialize the module once, e.g., in your root component
12    // This connects to the new Places SDK.
13    PlacePicker.initialize(YOUR_API_KEY);
14  }, []);
15
16  const handleOpenPicker = async (mode) => {
17    try {
18      const place = await PlacePicker.open(mode);
19      console.log(JSON.stringify(place, null, 2));
20      setSelectedPlace(place);
21    } catch (error) {
22      // Handle cancellation or other errors
23      console.log(error.message);
24    }
25  };
26
27  return (
28    <ScrollView contentContainerStyle={styles.container}>
29      <View style={styles.buttonContainer}>
30        <Button title="Open Picker (Fullscreen)" onPress={() => handleOpenPicker('fullscreen')} />
31      </View>
32      {Platform.OS === 'android' && (
33        <View style={styles.buttonContainer}>
34          <Button title="Open Picker (Overlay)" onPress={() => handleOpenPicker('overlay')} />
35        </View>
36      )}
37
38      {selectedPlace && (
39        <View style={styles.placeDetails}>
40          <Text style={styles.placeName}>{selectedPlace.name}</Text>
41          <Text>{selectedPlace.address}</Text>
42          <Text>Lat: {selectedPlace.latitude}, Lng: {selectedPlace.longitude}</Text>
43          {selectedPlace.postalCode && <Text>Postal Code: {selectedPlace.postalCode}</Text>}
44        </View>
45      )}
46    </ScrollView>
47  );
48}
49
50const styles = StyleSheet.create({
51  container: {
52    padding: 20,
53  },
54  buttonContainer: {
55    marginBottom: 10,
56  },
57  placeDetails: {
58    marginTop: 20,
59    padding: 15,
60    borderWidth: 1,
61    borderColor: '#ddd',
62    borderRadius: 8,
63  },
64  placeName: {
65    fontWeight: 'bold',
66    fontSize: 16,
67    marginBottom: 5,
68  },
69});

API Reference

initialize(apiKey) Initializes the Google Places SDK with your API key. This must be called once before using the open method. Ensure the API key is associated with a project that has the Places API (New) enabled.

open(mode?) Opens the native place picker UI. Returns a promise that resolves with the selected place object or rejects if the user cancels or an error occurs.

Returns: Promise<Place>

The promise resolves with a Place object with the following structure:

1interface Place {
2  name: string;
3  address: string;
4  latitude: number;
5  longitude: number;
6  postalCode?: string;
7  addressComponents?: AddressComponent[];
8}
9
10interface AddressComponent {
11  longName: string;
12  shortName?: string;
13  types: string[];
14}

🚧 Future Work

Application Key Restrictions: Currently, the library does not fully support Google Cloud's application key restrictions for both platforms when a single key is used. We plan to add support for platform-specific keys in an upcoming release.

🤝 Contributing

Contributions are always welcome! Whether it's bug reports, feature requests, or pull requests, please feel free to contribute.

1. Fork the Project
2. Create your Feature Branch (git checkout -b feature/AmazingFeature)
3. Commit your Changes (git commit -m 'feat: Add some AmazingFeature')
4. Push to the Branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

📜 License

This project is licensed under the MIT License