Security News
tea.xyz Spam Plagues npm and RubyGems Package Registries
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
react-native-location-picker-controller
Advanced tools
Readme
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 Wrapper for LocationPicker, a ready for use and fully customizable location picker.
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"
#import "RCTConvert.h"
In RNLocationPickerManager.m
, replace #import "example-Swift.h"
to #import "<your project name>-Swift.h"
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 |
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 |
Using processColor
to convert color, check example usage code at the end of README
Valid color formats for processColor
are
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 |
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 |
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,
}
}
});
This work is inspired from react-native-wordpress-editor, using it as a template.
LocationPicker is the original library.
Code in this git repo is licensed MIT.
FAQs
React Native Wrapper for LocationPicker, a ready for use and fully customizable location picker.
The npm package react-native-location-picker-controller receives a total of 0 weekly downloads. As such, react-native-location-picker-controller popularity was classified as not popular.
We found that react-native-location-picker-controller demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.
Security News
UnitedHealth Group disclosed that the ransomware attack on Change Healthcare compromised protected health information for millions in the U.S., with estimated costs to the company expected to reach $1 billion.