Skip to content
This repository has been archived by the owner on May 9, 2022. It is now read-only.

Latest commit

 

History

History
137 lines (96 loc) · 7.7 KB

README.md

File metadata and controls

137 lines (96 loc) · 7.7 KB
Raw

WARNING: This library is for iOS only, and must be used with react-native-navigation, I highly recommend using react-native-google-place-picker instead as its more featured(using Google's SDK), easy to setup(not dependent on react-native-navigation), with support for both iOS and Android.

react-native-location-picker

React Native Wrapper for LocationPicker, a ready for use and fully customizable location picker.

Dependencies

  • react-native-navigation - native navigation library for React Native (required to natively display the location picker within RN)

Installation

  • Make sure your project relies on React Native >= 0.25

  • Make sure your project uses react-native-navigation and that you've followed the Installation instructions there

  1. In your RN project root run:
    npm install react-native-location-picker-controller --save

  2. In Xcode, in Project Navigator (left pane), right-click on the Libraries > Add files to [project name]
    Add ./node_modules/react-native-location-picker-controller/ios/LocationPicker.xcodeproj (screenshots)

  3. In Xcode, in Project Navigator (left pane), click on your project (top) and select the Build Phases tab (right pane)
    In the Link Binary With Libraries section add LocationPicker.framework (screenshots)

  4. Open your Xcode project and drag RNLocationPicker.swift, RNLocationPickerManager.h, RNLocationPickerManager.m from the folder node_modules/react-native-location-picker/ios into your project, in the dialog box let Xcode create Objective-C bridging header.(screenshot 1, screenshot 2)

  5. Editing <your project name>-Bridging-Header.h to import RCCExternalViewControllerProtocol.h and RCCViewController.h for Swift to use:

    //
//  Use this file to import your target's public headers that you would like to expose to Swift.
//
#import "RCCExternalViewControllerProtocol.h"
#import "RCCViewController.h"
#import "RCTConvert.h"

  6. In RNLocationPickerManager.m, replace #import "example-Swift.h" to #import "<your project name>-Swift.h"

Support Props(Subset of LocationPicker)

Boolean

Property name Default Target Remark
allowArbitraryLocation false Allows the selection of locations that did not match or exactly match search results
mapViewZoomEnabled true mapView.zoomEnabled Whether the map view can zoom in and out
mapViewShowsUserLocation true mapView.showsUserLocation Whether the map view shows user's location
mapViewScrollEnabled true mapView.scrollEnabled Whether user can scroll the map view

String

Property name Default Target Remark
currentLocationText "Current Location" currentLocationCell.locationNameLabel.text The text that indicates the user's current location
searchBarPlaceholder "Search for location" searchBar.placeholder The text that ask user to search for locations
locationDeniedAlertTitle "Location access denied" alertController.title The text of the alert controller's title
locationDeniedAlertMessage "Grant location access to use current location" alertController.message The text of the alert controller's message
locationDeniedGrantText "Grant" alertAction.title The text of the alert controller's Grant button
locationDeniedCancelText "Cancel" alertAction.title The text of the alert controller's Cancel button

Color

  • Using processColor to convert color, check example usage code at the end of README

  • Valid color formats for processColor are

    • '#f0f' (#rgb)
    • '#f0fc' (#rgba)
    • '#ff00ff' (#rrggbb)
    • '#ff00ff00' (#rrggbbaa)
    • 'rgb(255, 255, 255)'
    • 'rgba(255, 255, 255, 1.0)'
    • 'hsl(360, 100%, 100%)'
    • 'hsla(360, 100%, 100%, 1.0)'
    • 'transparent'
    • 'red'
    • 0xff00ff00 (0xrrggbbaa)
Property name Default Target Remark
tableViewBackgroundColor UIColor.whiteColor() tableView.backgroundColor The background color of the table view
currentLocationIconColor UIColor(hue: 0.447, saturation: 0.731, brightness: 0.569, alpha: 1) UIImage() The color of the icon showed in current location cell, the icon image can be changed via property currentLocationIconImage
searchResultLocationIconColor UIColor(hue: 0.447, saturation: 0.731, brightness: 0.569, alpha: 1) UIImage() The color of the icon showed in search result location cells, the icon image can be changed via property searchResultLocationIconImage
alternativeLocationIconColor UIColor(hue: 0.447, saturation: 0.731, brightness: 0.569, alpha: 1) UIImage() The color of the icon showed in alternative location cells, the icon image can be changed via property 'alternativeLocationIconImage'
pinColor UIColor(hue: 0.447, saturation: 0.731, brightness: 0.569, alpha: 1) UIImage() The color of the pin showed in the center of map view, the pin image can be changed via property pinImage
primaryTextColor UIColor(colorLiteralRed: 0.34902, green: 0.384314, blue: 0.427451, alpha: 1) Multiple The text color of search bar and location name label in location cells
secondaryTextColor UIColor(colorLiteralRed: 0.541176, green: 0.568627, blue: 0.584314, alpha: 1) Multiple The text color of location address label in location cells

Number

Property name Default Target Remark
defaultLongitudinalDistance Double 1000 Longitudinal distance of the map view shows when user select a location and before zoom in or zoom out
searchDistance Double 10000 Distance in meters that is used to search locations

Usage

For a fully working example look here

First, create a placeholder screen for the location picker. The main purpose of this screen is to handle navigation events. See an example here.

Note: Make sure your screen component has been registered with Navigation.registerComponent like all react-native-navigation screens need to be, example.

Now, to display your screen, from within one of your other app screens, push the location picker:

import processColor from 'processColor';

this.props.navigator.push({
  screen: 'example.LocationPickerScreen',
  title: 'Pick  a Location',
  passProps: {
    externalNativeScreenClass: 'RNLocationPicker',
    externalNativeScreenProps: {
      currentLocationText: '当前位置',
      currentLocationIconColor: processColor('#72c02c'),
      allowArbitraryLocation: true,
      defaultLongitudinalDistance: 100,
    }
  }
});

Credits

License

Code in this git repo is licensed MIT.