react-native-places-input v1.1.7

React Native Places Input

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

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

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

Common issues

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

     <ScrollView
                keyboardShouldPersistTaps="always"