react-native-location-picker-controller

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

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

• 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)

• 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)

• 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)

• 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"
  

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

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:

this.props.navigator.push({
  screen: 'example.LocationPickerScreen',
  title: 'Pick  a Location',
  passProps: {
    externalNativeScreenClass: 'RNLocationPicker',
  }
});

Credits

• This work is inspired from react-native-wordpress-editor, using it as a template.

• LocationPicker is the original library.

License

Code in this git repo is licensed MIT.