Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

react-native-places-input

Package Overview
Dependencies
Maintainers
1
Versions
19
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-native-places-input

Up to date working Google Places Input. Calling directly API not JS SDK.

  • 1.1.7
  • latest
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
291
increased by18.78%
Maintainers
1
Weekly downloads
 
Created
Source

React Native Places Input

Up to date working Google Places Input. Calling directly API not JS SDK.

exmaples

Latest changes

1.1.6

Component is now fetching places if query prop is provided.

1.1.5

If query prop change it will also update a component state. New configuration props:

  • clearQueryOnSelect - Clear input query on place select

1.1.4

Adding loading indicator for a place details request.

1.1.3

New configuration props:

  • query - Custom query value for a text field

Installation

yarn add react-native-places-input

or

npm install react-native-places-input

Usage

Fairly easy. Few required props but most of the work is already done in a component.

Basic

import PlacesInput from 'react-native-places-input';

And inside a component

    <PlacesInput
        googleApiKey={GOOGLE_API_KEY}
        onSelect={place => console.log(place)}
    />
class InputWrapper extends React.Component {
    render() {
        return (
            <View style={{ width: '100%' }}>
                <PlacesInput
                    googleApiKey={GOOGLE_API_KEY}
                    placeHolder={"Some Place holder"}
                    language={"en-US"}
                    onSelect={place => {
                        this.props.goToPoint(get(place, 'result.geometry.location.lat'), get(place, 'result.geometry.location.lng'))
                    }}
                    iconResult={<Ionicons name="md-pin" size={25} style={styles.placeIcon}/>}
                />
            </View>
        );
    }
}

Configuration props

List of props supported by a component

PropTypeDefaultDescription
googleApiKeyPropTypes.string.isRequiredGoogle API key
clearQueryOnSelectboolfalseClear input query on place select
iconInputanyIcon added to an input
iconResultanyIcon added to results
languagestringenLanguage for google API call
placeHolderstringSearch places...placeholder for an input
querystringCustom text field value on init
querySessionstringA random string which identifies an autocomplete session for billing purposes. If this parameter is omitted from an autocomplete request, the request is billed independently. See the pricing sheet for details.
queryTypesstringYou may restrict results from a Place Autocomplete request to be of a certain type by passing a types parameter. Google docs
queryFieldsstringformatted_address,geometry,nameFields requested from Google API
queryCountriesarrayArray of country codes to limit results
resultRenderfuncplace => place.descriptionFunction to render results text
searchLatitudenumberLat to limit results
searchLongitudenumberLng to limit results
searchRadiusnumberradius to limit results
stylesContainerobject{}Custom styles for a container
stylesInputobject{}Custom styles for an input
stylesItemobject{}Custom styles for an item
stylesItemTextobject{}Custom styles for an item text
stylesListobject{}Custom styles for a list
stylesLoadingobject,{}Custom styles for a loading indicator
textInputPropsobject{}Custom TextInput props
requiredCharactersBeforeSearchnumber2Component wont fetch places unless string length is equal this prop
requiredTimeBeforeSearchnumber1000Idle time on text input before component will fetch places
onSelectfuncFunction called when you select a place
onChangeTextfuncMethod triggered when TextInput is changed. Returning query and this.

Examples

Inline

exmaples

    <PlacesInput
        placeHolder={'Some placeholder'}
        stylesContainer={{
            position: 'relative',
            alignSelf: 'stretch',
            margin: 0,
            top: 0,
            left: 0,
            right: 0,
            bottom: 0,
            shadowOpacity: 0,
            borderColor: '#dedede',
            borderWidth: 1,
            marginBottom: 10
        }}
        stylesList={{
            top: 50,
            borderColor: '#dedede',
            borderLeftWidth: 1,
            borderRightWidth: 1,
            borderBottomWidth: 1,
            left: -1,
            right: -1
        }}
        googleApiKey={GOOGLE_API_KEY} 
        onSelect={place => this.setState({place})} 
    />

Limit results to a country

    <PlacesInput
        placeHolder={'Some placeholder'}
        queryCountries={['pl', 'fr']}
        googleApiKey={GOOGLE_API_KEY} 
        onSelect={place => this.setState({place})} 
    />

Limit results to a location

    <PlacesInput
        placeHolder={'Some placeholder'}
        searchRadius={500}
        searchLatitude={51.905070}
        searchLongitude={19.458834}
        googleApiKey={GOOGLE_API_KEY} 
        onSelect={place => this.setState({place})} 
    />

Place types

    <PlacesInput
        placeHolder={'Some placeholder'}
        queryTypes="establishment"
        googleApiKey={GOOGLE_API_KEY} 
        onSelect={place => this.setState({place})} 
    />

Common issues

If on click is not working and component is inside a ScrollView make sure to add keyboardShouldPersistTaps = always.

     <ScrollView
                keyboardShouldPersistTaps="always"

Keywords

FAQs

Package last updated on 31 Aug 2020

Did you know?

Socket

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.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc