diff --git a/src/components/AddressSearch.js b/src/components/AddressSearch.js index a83534eb05c2..158e3829779b 100644 --- a/src/components/AddressSearch.js +++ b/src/components/AddressSearch.js @@ -1,5 +1,5 @@ import _ from 'underscore'; -import React, {useEffect, useRef} from 'react'; +import React, {useEffect, useState, useRef} from 'react'; import PropTypes from 'prop-types'; import {LogBox} from 'react-native'; import {GooglePlacesAutocomplete} from 'react-native-google-places-autocomplete'; @@ -35,8 +35,12 @@ const defaultProps = { containerStyles: null, }; +// Do not convert to class component! It's been tried before and presents more challenges than it's worth. +// Relevant thread: https://expensify.slack.com/archives/C03TQ48KC/p1634088400387400 +// Reference: https://github.com/FaridSafi/react-native-google-places-autocomplete/issues/609#issuecomment-886133839 const AddressSearch = (props) => { const googlePlacesRef = useRef(); + const [displayListViewBorder, setDisplayListViewBorder] = useState(false); useEffect(() => { if (!googlePlacesRef.current) { return; @@ -84,7 +88,12 @@ const AddressSearch = (props) => { fetchDetails suppressDefaultStyles enablePoweredByContainer={false} - onPress={(data, details) => saveLocationDetails(details)} + onPress={(data, details) => { + saveLocationDetails(details); + + // After we select an option, we set displayListViewBorder to false to prevent UI flickering + setDisplayListViewBorder(false); + }} query={{ key: 'AIzaSyC4axhhXtpiS-WozJEsmlL3Kg3kXucbZus', language: props.preferredLocale, @@ -107,14 +116,20 @@ const AddressSearch = (props) => { if (!_.isEmpty(googlePlacesRef.current.getAddressText()) && !isTextValid) { saveLocationDetails({}); } + + // If the text is empty, we set displayListViewBorder to false to prevent UI flickering + if (_.isEmpty(text)) { + setDisplayListViewBorder(false); + } }, }} styles={{ textInputContainer: [styles.flexColumn], listView: [ - styles.borderTopRounded, - styles.borderBottomRounded, - styles.mt1, + !displayListViewBorder && styles.googleListView, + displayListViewBorder && styles.borderTopRounded, + displayListViewBorder && styles.borderBottomRounded, + displayListViewBorder && styles.mt1, styles.overflowAuto, styles.borderLeft, styles.borderRight, @@ -127,6 +142,12 @@ const AddressSearch = (props) => { description: [styles.googleSearchText], separator: [styles.googleSearchSeparator], }} + onLayout={(event) => { + // We use the height of the element to determine if we should hide the border of the listView dropdown + // to prevent a lingering border when there are no address suggestions. + // The height of the empty element is 2px (1px height for each top and bottom borders) + setDisplayListViewBorder(event.nativeEvent.layout.height > 2); + }} /> ); }; diff --git a/src/styles/styles.js b/src/styles/styles.js index 3ab2f8965bc0..4bdc26019b56 100644 --- a/src/styles/styles.js +++ b/src/styles/styles.js @@ -2085,6 +2085,10 @@ const styles = { fontFamily: fontFamily.GTA, flex: 1, }, + + googleListView: { + transform: [{scale: 0}], + }, }; const baseCodeTagStyles = {