CODEWITHSUNDEEP
react-native
Lucky
Lucky

Reputation: 29

react-native-google-places-autocomplete unable to resolve module `path/custom/left-icon`

I'm unable to use react native autocomplete npm package and i have been getting this error "react-native-google-places-autocomplete unable to resolve module path/custom/left-icon " I'm using react Native V0.44.0 what am i doing wrong?

simulator error

import React from 'react';
import { View, Image } from 'react-native';
import { GooglePlacesAutocomplete } from 'react-native-google-places-autocomplete';

const homePlace = { description: 'Home', geometry: { location: { lat: 48.8152937, lng: 2.4597668 } }};
const workPlace = { description: 'Work', geometry: { location: { lat: 48.8496818, lng: 2.2940881 } }};

const GooglePlacesInput = () => {
  return (
    <GooglePlacesAutocomplete
      placeholder='Search'
      minLength={2} 
      autoFocus={false}
      returnKeyType={'search'}
      listViewDisplayed='auto'    
      fetchDetails={true}
      renderDescription={(row) => row.description} 
      onPress={(data, details = null) => { 
        console.log(data);
        console.log(details);
      }}
      getDefaultValue={() => {
        return ''; 
      }}
      query={{

        key: 'YOUR API KEY',
        language: 'en', 
        types: '(cities)' 
      }}
      styles={{
        description: {
          fontWeight: 'bold'
        },
        predefinedPlacesDescription: {
          color: '#1faadb'
        }
      }}

      currentLocation={true} 
      currentLocationLabel="Current location"
      nearbyPlacesAPI='GooglePlacesSearch' 
      GoogleReverseGeocodingQuery={{

      }}
      GooglePlacesSearchQuery={{

        rankby: 'distance',
        types: 'food'
      }}

      filterReverseGeocodingByTypes={['locality', 'administrative_area_level_3']} 
      predefinedPlaces={[homePlace, workPlace]}

      debounce={200} 
      renderLeftButton={() => <Image source={require('path/custom/left-icon')} />}
      renderRightButton={() => <Text>Custom text after the inputg</Text>}
    />
  );
}

Upvotes: 3

Views: 1979

Answers (2)

jungleMan
jungleMan

Reputation: 888

Just take out the line 

 renderLeftButton={() => <Image source={require('path/custom/left-icon')} />}

Or replace it with a text or your own image. You should replace that path with your own text or image or you should take it out completely if you do not need it.

Try this for example: 

renderLeftButton={() => <Text> Left Button or Left Icon </Text>}

Upvotes: 2

Akshay More
Akshay More

Reputation: 436

for those not using yarn run npm start -- --reset-cache if it shows error "moduler cannot listen to port 8081" try killing all the processes listening/using that port. For mac get the process id by running sudo lson -i :8081 then kill each process kill -9 pid.

Upvotes: 0

Related Questions