GooglePlacesAutocomplete.js

/**
 * Autocomplete Input for Google Places API
 * @flow
 */
import React, {Component} from 'react';
import { Input } from 'native-base';


import {get} from '../utils/request';

class GooglePlacesAutocomplete extends Component {
    state = {
        text: this.props.value
    };

    /**
     * @returns {Promise.<*>}
     */
    async _request(data) {
        try {
            return await get('https://maps.googleapis.com/maps/api/place/autocomplete/json', data);
        } catch (e) {
            return e
        }
    }

    async _onChangeText(text) {
        const {onChangeData, onSuggestionError} = this.props;
        try {
            let response = await this._request({input: text, ...this.props.query});

            if(onChangeData){
                onChangeData(response.predictions);
            }
        } catch (e) {
            if(onSuggestionError) {
                onSuggestionError(e)
            }
        }
    }

    async _handleChangeText(text) {
        this._onChangeText(text).catch(() => {});

        const {onChangeText} = this.props;
        if (onChangeText) {
            onChangeText(text);
        }
    }

    render = () => (
        <Input {...{
            ...this.props,
            ...this.state,
            onChangeText: text => this._handleChangeText(text),
            value: this.state.text,
        }} />
    );
}

GooglePlacesAutocomplete.defaultProps = {
    query: {
        key: 'missing api key',
        language: 'en',
        types: 'geocode',
    },
    data: []
};

export default GooglePlacesAutocomplete;