Uncaught Error: Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function but got: object about react-native-google-places-autocomplete HOT 14 CLOSED

// module1.js
export const foo = () => {
  console.log('foo');
};
export const bar = () => {
  console.log('bar');
};

// module2.js

// option 1
import module1 from 'module1';
module1.foo() // prints 'foo';

// option2
import { foo } from 'module1';
foo() // prints 'foo';

// module1.js
export default const foo = () => {
  console.log('foo');
};

// module2.js
import foo from 'module1';

foo(); // prints 'foo'

'use strict';

var React = require('react-native');

import Dimensions from 'Dimensions';

import { eventEmitter } from '../utils/EventEmitter';
import {GOOGLE_GEO_APIKEY} from "../config/constants";
import {GooglePlacesAutocomplete} from 'react-native-google-places-autocomplete';

import I18n from 'react-native-i18n';

var {height, width} = Dimensions.get('window');
var pinX = (width/2) - 22.5;
var MapView = require('react-native-maps');
var {
    InteractionManager,
    AsyncStorage,
    TextInput,
    Image,
    StyleSheet,
    Text,
    TouchableOpacity,
    View,
    ListView,
} = React;

export class SecuritySignupLocationMap extends React.Component {

    constructor() {
        super();
        this.state = Store.getState();
        this.state.region = null;
        this.onListTap.bind(this);

        this.pinY = 0;
    }

    componentWillMount() {
        this.locationSelectedEvent = eventEmitter.addListener('locationSelectedEvent', this.save.bind(this));
        this.locationSelectedEventSignup = eventEmitter.addListener('locationSelectedEventSignup', this.saveSignup.bind(this));

        if (this.props.type == "signup") {
            this.pinY = (height/2) - 67.5;
        }else{
            this.pinY = (height/2) - 107.5;
        }
    }

    componentDidMount() {
        InteractionManager.runAfterInteractions(() => {
            this.setState({
                region: {
                    latitude: this.props.latitude,
                    longitude: this.props.longitude,
                    latitudeDelta: 0.005,
                    longitudeDelta: 0.0041
                }
            });
        });
    }

    componentWillUnmount() {
        this.locationSelectedEvent.remove();
        this.locationSelectedEventSignup.remove();
    }

    onRegionChangeComplete(region) {
        this.setState({
            region: region
        });
    }

    save() {
        var location = {
            latitude: this.state.region.latitude,
            longitude: this.state.region.longitude
        }
        Actions.fetchAddressForLocation(location);
        NavActions.back();
    }

    saveSignup() {
        var location = {
            latitude: this.state.region.latitude,
            longitude: this.state.region.longitude
        }
        Actions.fetchAddressForLocation(location);
        Actions.back();

    }

    onListTap(location) {
        var longitude = location.geometry.location.lng;
        var latitude = location.geometry.location.lat;

        var region = {
            latitude: latitude,
            longitude: longitude,
            latitudeDelta: this.state.region.latitudeDelta,
            longitudeDelta: this.state.region.longitudeDelta
        };

        this.refs.map.animateToRegion(region);
        this.state.region = region;
    }

    render() {
        if (this.state.region) {
            return (
              <View ref='view'>
                <MapView
                ref='map'
                    style={styles.map}
                    initialRegion={{
                    latitude: this.state.region.latitude,
                    longitude: this.state.region.longitude,
                    latitudeDelta: this.state.region.latitudeDelta,
                    longitudeDelta: this.state.region.longitudeDelta
                }}
                region={this.state.region}
                onRegionChangeComplete={this.onRegionChangeComplete.bind(this)}>

                </MapView>
                <Image
                    style={[styles.icon, {top: this.pinY}]}
                    source={require('../images/mapPinIcon.png')}
                />
                <GooglePlacesAutocomplete
                    placeholder={I18n.t('search')}
                    minLength={2} // minimum length of text to search
                    autoFocus={false}
                    fetchDetails={true}
                    onPress={(data, details = null) => { // 'details' is provided when fetchDetails = true
                      this.onListTap(details);
                    }}
                    getDefaultValue={() => {
                      return this.props.text; // text input default value
                    }}
                    query={{
                      // available options: https://developers.google.com/places/web-service/autocomplete
                      key: GOOGLE_GEO_APIKEY,
                      language: 'es', // language of the results
                     // types: '(cities)', // default: 'geocode'
                    }}
                    styles={{
                      description: {
                        fontWeight: 'bold',
                      },
                      predefinedPlacesDescription: {
                        color: '#1faadb',
                      },
                      container: {
                        flex:1,
                        position:'absolute',
                        top:0,
                        left:0,
                        right:0,
                      },
                      textInput: {
                        flex:1,
                        flexDirection: 'row',
                        textAlign:'left',
                        paddingLeft:10,
                        paddingRight:10,
                        marginTop:10,
                        marginLeft:10,
                        marginRight: 10,
                        height:40,
                        // borderWidth:1,
                        // borderColor:'transparent',
                        backgroundColor:'white',
                        opacity:0.9,
                      },
                      textInputContainer:{
                        backgroundColor: 'transparent',
                        borderTopWidth: 0,
                        borderBottomWidth: 0
                      },
                      separator:{
                        height: 0
                      },
                      listView: {
                        backgroundColor:'white',
                        opacity:0.9,
                        marginLeft: 10,
                        marginRight: 10,
                      }
                    }}
                    currentLocation={true} // Will add a 'Current location' button at the top of the predefined places list
                    currentLocationLabel="Current location"
                    nearbyPlacesAPI='GooglePlacesSearch' // Which API to use: GoogleReverseGeocoding or GooglePlacesSearch
                    GoogleReverseGeocodingQuery={{
                      // available options for GoogleReverseGeocoding API : https://developers.google.com/maps/documentation/geocoding/intro
                    }}
                    GooglePlacesSearchQuery={{
                      // available options for GooglePlacesSearch API : https://developers.google.com/places/web-service/search
                      rankby: 'distance',
                    }}
                    filterReverseGeocodingByTypes={['locality', 'administrative_area_level_3']} // filter the reverse geocoding results by types - ['locality', 'administrative_area_level_3'] if you want to display only cities
                    enablePoweredByContainer={false}
                  />
              </View>
            );
        }else{
            return(<Text>{I18n.t('loading')}</Text>);
        }
    }
}