Issue with Expo Google Places Autocomplete: ListView not clickable

I am currently encountering an issue with the GooglePlacesAutocomplete feature. When I input the address query, such as "São C," the 'listView' returns options like "São Caetano, São Paulo ...", however, when I attempt to select an option from the list, it seems that the selection does not affect the item list visibly.

Below is the code snippet I am working with:

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 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  
        // Rest of the code remains the same...
    
);

const styles = StyleSheet.create({
  // CSS styles remain the same for consistency...
});

export default WhereTo;

Is there anyone who can assist me in resolving this issue?

Answer №1

After recreating the Expo project, it started working smoothly. Although I couldn't pinpoint the exact root cause of the issue, I must admit that this project was initially created by someone else. Expo made the process of creation and configuration incredibly fast and straightforward.

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}>Include flatlist with promotions and motivation messages</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,
    },
    
  });

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Remove the presence of a black square when selecting elements using CSS

Update: After some investigation, I discovered that the mysterious black square is actually a part of the scroll bar. By adding the following code snippet: select::-webkit-scrollbar { display: none; } The square no longer appears. Initially, my se ...

Using @font-face to include several files for different font-weight variations

I have a collection of font files that I want to assign to specific font weights. @font-face { font-family: "custom-font"; src: url("font300.eot"); src: url("font300.eot?#iefix") format("embedded-opentype"), url("font300.woff2") format ...

Troubleshooting Variances in CSS Layouts on Different Devices

I have been wrestling with a challenging question regarding CSS layouts, and I believe it's time to seek advice from those who may be more knowledgeable in this area. Let's discuss why my current layout is presenting such a headache. Take a look ...

Utilize flexbox to keep a paragraph element centered even when the text wraps, without directly centering the

Before this gets down-voted into oblivion, let me mention that I have thoroughly searched through numerous similar questions on SO. However, none of them provided a solution to my specific issue. I am using flexbox to align <p> tags both horizontall ...

Exploring the World of Html

I'm struggling with an HTML problem related to a web programming class I'm taking. The assignment involves creating a video game using HTML and JavaScript, where an image moves randomly on the screen and the player must click on it as many times ...

Tips for ensuring long text wraps to the next line when it exceeds the width of the browser window

I'm struggling with CSS styles and properties. I want the text to wrap to the next line instead of overflowing off the browser screen. I've illustrated what's currently happening versus what I actually need. https://i.stack.imgur.com/mPGt8 ...

Showing content in a single line causes it to drop down to the next

Check out my code snippet here: http://jsfiddle.net/spadez/aeR7y/23/ I'm curious about how I can make my header list align on the same line as the header, without dropping down. Here's the CSS code I have for the list: #header li { display: ...

Attribution of image in footer

The image above the footer is not displaying properly. Screenshot: Image appears below the footer https://i.stack.imgur.com/RvSqI.png Source Code .footer-area { background-position: center; position: relative; z-index: 5; } .footer-area::before { ...

Increased Z-index on an unfamiliar site

I'm in the process of enhancing the Moodle platform at my school with a userscript, and I want to create a sleek UI for it. One feature I want to add is a progress bar that stays fixed at the top of the browser viewport so that it remains visible as ...

Boost Page Text Size Using CSS

Possible Duplicate: Allowing users to adjust font size on a webpage My goal is to create webpages where users can click an image to increase the font size of all content. Is this achievable? If so, how would I go about implementing it? I am aware that ...

Image missing aria-label attribute

I am facing an issue with getting the aria-label to display on my image. Despite checking my code, I cannot figure out why it is not working. Any ideas on what might be missing? Here is the code from my NextJS app: The svg in my public folder. <?xml v ...

What is the reason behind the change in size and shape of the text when using "overflow: hidden"?

Check out this interactive demo using the provided HTML and CSS: You can view the demo by clicking on this link. /*CSS*/ .header { margin: 0px; padding: 0px; width: 100%; } .headertable { padding: 0px; margin: 0px; width: 100%; border-sp ...

Ways to eliminate unnecessary spacing in CSS text-stroke

I am trying to achieve a text-stroke effect with transparent text over an image. However, I am facing an issue where the text-stroke also displays lines within the text itself. I am using the Montserrat font from Google Fonts. Can anyone provide assistance ...

Tips for positioning a div element at the center in ASP.NET

I have written the following code snippet: <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Main.aspx.cs" Inherits="Main" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transit ...

Is there a way to modify the form's style to show "none" without submitting the form?

Clicking the Close button will submit the form to Lcar.php. The goal is to hide the CSS and remain on the current page after clicking the button. The issue of the form being submitted to Lcar.php when the Close button is clicked arises despite the fact t ...

What are some techniques I can use to ensure my image grid is responsive in html/css?

If you want to check out the website, you can visit . The main goal is to create an image grid for a portfolio. It appears really nice on a 1080p screen, but anything below that seems messy and unorganized. Any assistance or suggestions on how to improve ...

`CSS Toggle Smooth Transition Effect`

I am working on creating 2 CSS toggle buttons that currently have a fade in and out effect when clicked. I would like them to have a sliding animation from right to left instead. Below is the HTML, CSS, and a link to a fiddle containing my code. Thank yo ...

The Twitter widget is not staying in sync with the rest of the page when scrolling on

Twitter provides a widget that is widely used by many people. Below is the code provided by Twitter: <script src="http://widgets.twimg.com/j/2/widget.js"></script> <script> new TWTR.Widget({ version: 2, type: 'profile', ...

CSS Flexbox - Choose all elements that appear at the start of a new line (Wrap)

Is there a CSS selector that can prevent content insertion on new lines when using the wrap feature in CSS-Flexbox? I am utilizing CSS-Flexbox for a layout with the wrap option, but I do not know the number of lines beforehand. I need a solution where the ...

Including the HTML Doctype to center child elements within the <td> tags specifically for Internet Explorer

This issue seems to be isolated to Internet Explorer. I have conducted tests using IE7, IE8, and IE9. Interestingly, when I remove the html doctype, the td tags are aligned to the left. However, upon adding any standard HTML4 or 5 tags, the text and input ...