Skip to content

b0iq/react-native-place-picker

Repository files navigation

react-native-place-picker

demo demo video
HEADER
RocketSim_Recording_iPhone_14_Pro_2023-07-09_19.01.58.mp4

NPM Version Tests Passing GitHub Contributors Issues GitHub pull requests

Features

  • 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 capability.
  • Renders on top of the app (Blazing Fast).
  • Well typed.
  • Significantly small package.
  • No peer depedancies 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

Expo

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

Info Expo managed app not yet 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" />

Usage

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;
}

Contributing

See the contributing guide to learn how to contribute to the repository and the development workflow.

License

MIT

Extra

[1] The only liberary is used: Kotlin object parsing liberary com.fasterxml.jackson.module:jackson-module-kotlin:2.14.+ to parse Javascript parameters easily.