react-native-places-input

React Native Places Input

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

Latest changes

1.0.10

New configuration props:

• queryTypes - You may restrict results from a Place Autocomplete request to be of a certain type by passing a types parameter.

1.0.9

Fixing an issue with sometimes not getting details about selected place.

1.0.8

Fixed issue that in some cases list of places is not displayed.

New configuration props:

• requiredCharactersBeforeSearch - component wont fetch places unless string length is equal this prop. Default 2.
• requiredTimeBeforeSearch - idle time on text input before component will fetch places.

1.0.5

Remove default props for lat,lng and radius. Add queryCountries where you can pass array of countries to limit your search results.

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

Prop	Type	Default	Description
googleApiKey	PropTypes.string.isRequired,		Google API key
iconInput	PropTypes.any,		Icon added to an input
iconResult	PropTypes.any,		Icon added to results
language	PropTypes.string,	en	Language for google API call
placeHolder	PropTypes.string,	Search places...	placeholder for an input
queryTypes	PropTypes.string,		You may restrict results from a Place Autocomplete request to be of a certain type by passing a types parameter. Google docs
queryFields	PropTypes.string,	formatted_address,geometry,name	Fields requested from Google API
queryCountries	PropTypes.array		Array of country codes to limit results
resultRender	PropTypes.func,	place => place.description	Function to render results text
searchLatitude	PropTypes.number,		Lat to limit results
searchLongitude	PropTypes.number,		Lng to limit results
searchRadius	PropTypes.number,		radius to limit results
stylesContainer	PropTypes.object,	{}	Custom styles for a container
stylesInput	PropTypes.object,	{}	Custom styles for an input
stylesItem	PropTypes.object,	{}	Custom styles for an item
stylesItemText	PropTypes.object,	{}	Custom styles for an item text
stylesList	PropTypes.object,	{}	Custom styles for a list
stylesLoading	PropTypes.object,	{}	Custom styles for a loading indicator
textInputProps	PropTypes.object,	{}	Custom TextInput props
requiredCharactersBeforeSearch	PropTypes.number	2	Component wont fetch places unless string length is equal this prop
requiredTimeBeforeSearch	PropTypes.number	1000	Idle time on text input before component will fetch places
onSelect	PropTypes.func,		Function called when you select a place

Examples

Inline

    <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})} 
    />

Changelog

1.0.10

New configuration props:

• queryTypes - You may restrict results from a Place Autocomplete request to be of a certain type by passing a types parameter.