React-native-place-picker NPM

🎨 Theme customization.
📱 UI written natively.
🗺️ Location reverse-geocoding (coordinate -> address).
🔍 Searchable (users can search for location).
📍 Device location.
⚙️ Fully configurable.
🏗️ Supporting Turbo Modules (New Arch) with backward compatibility.
⚡ Renders on top of the app (Blazing Fast).
📐 Well typed.
📦 Significantly small package.
🔗 No peer dependencies except React and React-Native [1].

How is it working?

This plugin is built only by create native page UIViewController for iOS or Activity for Android. and present the page in front of React Native Application without any special dependencies just native code

Installation

npm install react-native-place-picker
# or
yarn add react-native-place-picker
# or
pnpm add react-native-place-picker
# or
bun add react-native-place-picker

Expo

You need to add expo-dev-client and run expo run:ios or expo run:android

Info Expo managed app not supported 🚧

iOS

If you want to enable user current location button you have to add this to your Info.plist

<key>NSLocationWhenInUseUsageDescription</key>
<string>YOUR_PURPOSE_HERE</string>

Android ⚠️

Add to your AndroidManifest.xml you Google Map API Key or your application will crash

<meta-data
   android:name="com.google.android.geo.API_KEY"
   android:value="YOUR_KEY" />

Request

import { pickPlace } from "react-native-place-picker";

pickPlace({
  enableUserLocation: true,
  enableGeocoding: true,
  color: "#FF00FF",
  //...etc
})
  .then(console.log)
  .catch(console.log);

// or

pickPlace().then(console.log).catch(console.log);

Result

{
    /**
     * @description Selected coordinate.
     */
    coordinate: PlacePickerCoordinate;
    /**
     * @description Geocoded address for selected location.
     * @if `enableGeocoding: true`
     */
    address?: PlacePickerAddress;
    /**
     * @description Did cancel the place picker window without selecting.
     */
    didCancel: boolean;
}

PlacePickerOptions

Property	Type	Description	Default
`presentationStyle`	`PlacePickerPresentationStyle` \| string	Presentation style of the place picker window. iOS only	`'fullscreen'`
`title`	`string`	The title of the place picker window.	`'Choose Place'`
`searchPlaceholder`	`string`	Placeholder for the search bar in the place picker window.	`'Search...'`
`color`	`string`	Primary color of the theme (map pin, shadow, etc.).	`'#FF0000'`
`contrastColor`	`string`	Contrast color for the primary color.	`'#FFFFFF'`
`locale`	`string`	Locale for the returned address.	`'en-US'`
`initialCoordinates`	`PlacePickerCoordinate`	Initial map position.	`{ latitude: 25.2048, longitude: 55.2708 }`
`enableGeocoding`	`boolean`	geocoding for the selected address.	`true`
`enableSearch`	`boolean`	search bar for searching specific positions.	`true`
`enableUserLocation`	`boolean`	current user position button. Requires setup.	`true`
`enableLargeTitle`	`boolean`	large navigation bar title of the UIViewController. iOS only	`true`
`rejectOnCancel`	`boolean`	Reject and return nothing if the user dismisses the window without selecting a place.	`true`

PlacePickerPresentationStyle

Enum Value	Description
`modal`	Presentation style as a modal window.
`fullscreen`	Presentation style in fullscreen mode.

PlacePickerAddress

Property	Type	Description
`name`	`string`	Name of the location.
`streetName`	`string`	Street name of the address.
`city`	`string`	City of the address.
`state`	`string`	State of the address.
`zipCode`	`string`	Zip code of the address.
`country`	`string`	Country of the address.

PlacePickerCoordinate

Property	Type	Description
`latitude`	`number`	Latitude of the location.
`longitude`	`number`	Longitude of the location.

PlacePickerResults

Property	Type	Description
`coordinate`	`PlacePickerCoordinate`	Selected coordinate.
`address`	`PlacePickerAddress`	Geocoded address for selected location (if `enableGeocoding`).
`didCancel`	`boolean`	Indicates if the place picker was canceled without selecting.