Expo Google places autocomplete - listView not clicable

Question

I am trying to use the GooglePlacesAutocomplete, but once I make the address query, for example: "São C" and the "listView" return something like: "São Caetano, São Paulo ...", but when I try to select one option it seems like the list is not visible, because and the selection do not affect the item list.

this is the code I am using:

import * as React from 'react';
import { Platform, StyleSheet, Text, View } from 'react-native';
import { GooglePlacesAutocomplete } from 'react-native-google-places-autocomplete';
import { colors, device, fonts } from '../constants';

// icons
import SvgTruck from './icons/Svg.Truck';

//const { onLocationSelected } = this.props

// constants
const GOOGLE_MAPS_APIKEY = '[API KEY]'

const WhereTo = () => (
  <View style={styles.container}>
    <View style={styles.containerBanner}>
      <Text style={styles.bannerText}>15% off, up to $6.00</Text>
      <Text style={styles.bannerMuted}>3 days</Text>
    </View>
    <View style={styles.containerInput} >
      <View style={styles.containerSquare}>
        <View style={styles.square} />
      </View>
      <GooglePlacesAutocomplete
        styles={{
          textInputContainer: {
            flex: 1,
            backgroundColor: 'transparent',
            height: 54,
            marginHorizontal: 20,
            borderTopWidth: 0,
            borderBottomWidth:0
          },
          textInput: {
            height: 45,
            left:0,
            margin: 0,
            borderRadius: 0,
            paddingTop: 0,
            paddingBottom: 0,
            paddingLeft: 0,
            paddingRight: 0,
            padding: 0,
            marginTop: 0,
            marginLeft: 0,
            marginRight: 0,
            fontSize:18
          },
          listView: {
            position:'absolute',
            marginTop: 50
          },
          description: {
            fontSize:16
          },
          row: {
            padding: 18,
            height:58
          }
        }}
        placeholder="Para onde?"
        onPress={(data, details) => {
          // 'details' is provided when fetchDetails = true
          console.log(data, details);
      }}
        query={{
          key: GOOGLE_MAPS_APIKEY,
          language: 'pt',
          components: "country:br"
        }}
        textInputProps={{
          autoCapitalize: "none",
          autoCorrect: false
        }}
        fetchDetails
        enablePoweredByContainer={false}
      />
      <View style={styles.containerIcon}>
        <SvgTruck />
      </View>
    </View>
  </View>
);

const styles = StyleSheet.create({
  container: {
    top: Platform.select({ ios: 60, android: 40 }),
    alignSelf: 'center',
    position: 'absolute',
    shadowColor: colors.black,
    shadowOffset: { height: 2, width: 0 },
    shadowOpacity: 0.2,
    shadowRadius: 8,
    top: device.iPhoneX ? 144 : 120,
    width: device.width - 40
  },
  containerBanner: {
    backgroundColor: colors.green,
    borderTopLeftRadius: 4,
    borderTopRightRadius: 4,
    flexDirection: 'row',
    justifyContent: 'space-between',
    paddingHorizontal: 16,
    paddingVertical: 8
  },
  bannerText: {
    color: colors.white,
    fontFamily: fonts.uberMedium,
    fontSize: 12
  },
  bannerMuted: {
    color: colors.mint,
    fontFamily: fonts.uberMedium,
    fontSize: 12
  },
  containerInput: {
    alignItems: 'center',
    backgroundColor: colors.white,
    flexDirection: 'row',
    height: 48
  },
  containerSquare: {
    alignItems: 'center',
    flex: 0.15
  },
  square: {
    backgroundColor: colors.black,
    height: 8,
    width: 8
  },
  containerIcon: {
    alignItems: 'center',
    borderLeftColor: colors.greyMercury,
    borderLeftWidth: 1,
    flex: 0.2
  }
});

export default WhereTo;

Can anyone trying to help me to solve it?

Answer 1

I recreated the Expo project and now it works, I could not found the root cause, but once that other project was made by other person and Expo make it easy to do and configure, it was fast enoght to create.

export default function AskForDriver () {
  const [location, setLocation] = useState("");
  const [errorMsg, setErrorMsg] = useState("");

  useEffect(() => {
    (async () => {
      let { status } = await Location.requestPermissionsAsync();
      if (status !== 'granted') {
        setErrorMsg('Permission to access location was denied');
      }

      let location = await Location.getCurrentPositionAsync({});
      setLocation(location);
    })();
  }, []);

  let text = 'Waiting..';
  if (errorMsg) {
    text = errorMsg;
  } else if (location) {
    text = JSON.stringify(location);

    console.log('location - latitude: ', location.coords.latitude)
    console.log('location - longitude: ', location.coords.longitude)
  }

    return (
      <View style={styles.container}>
        <View style={styles.mainHeader}>
          <Text style={styles.fontHeader}>Incluir flatlist com promoções e mensagens de incentivos</Text>
        </View>
        <View style={styles.searchHeader}>
          <GooglePlacesAutocomplete
            currentLocation
            //styles={styles.placesautocomplete}
            styles={{
              textInputContainer: {
                backgroundColor: 'grey',
              },
              placesautocomplete: {
                flex:1,
              },
              textInput: {
                height: 38,
                color: '#5d5d5d',
                fontSize: 16,
              },
              predefinedPlacesDescription: {
                color: '#1faadb',
              },
            }}
            placeholder='Search'
            onPress={(data, details = null) => {
              // 'details' is provided when fetchDetails = true
              console.log(data, details);
            }}
            
            query={{
              key: 'YOUR API KEY',
              language: 'pt',
              components: 'country:br',
            }}
          />
        
        </View>
        
        <MapView
          style={styles.mapStyle}
          showsMyLocationButton
          initialRegion={{
            latitude: 37.78825,
            longitude: -122.4324,
            latitudeDelta: 0.0922,
            longitudeDelta: 0.0421,
          }}
        >
        </MapView>     
        
        {//<Text>{text}</Text>
        }
        
      </View>
    );
  }

  const styles = StyleSheet.create({
    container: {
      flex: 1,
      position: 'absolute',
      alignContent:'center',
      margin:0
    },
    mainHeader: {
      backgroundColor: '#10002b',
      padding:10,
    },
    fontHeader: {
      color: '#e0aaff',
      fontSize: 15,
      
    },
    searchHeader: {
      borderColor: '#333',
      borderWidth:5,
    },
    mapStyle: {
      flex:1,
      width: Dimensions.get('window').width,
      height: Dimensions.get('window').height,
    },
    
  });