react-native-google-places-autocomplete icon indicating copy to clipboard operation
react-native-google-places-autocomplete copied to clipboard

Not able to show GooglePlacesAutocomplete as a multiline component

Open alfred11235 opened this issue 2 years ago • 1 comments

I´m trying to show two lines on the text box that shows the address but I have not been able to. I have seen the "numberOfLines" property but it doesn´t work on my example.

This is the part of my code that uses the GooglePlacesAutocomplete:

  <GooglePlacesAutocomplete
    ref={autoCompleteRef}
    placeholder="Endereço"
    onPress={(data, details = null) => {
      setPlace({data, details});
      handleData(data, details);
    }}
    enablePoweredByContainer={false}
    suppressDefaultStyles
    currentLocationLabel='Current location'
    numberOfLines={2}
    styles={{
      textInput: styles.textInput,
      container: styles.autocompleteContainer,
      listView: styles.listView,
      separator: styles.separator,
    }}
    fetchDetails
    query={{
      key: 'XXXXXXXXXXX',
      language: 'pt',
      components: 'country:br',
    }}
    renderRow={(data) => <PlaceRow data={data} />}
    renderDescription={(data) => PlaceString(data)}
    predefinedPlaces={[]}
  />

. . .

  const styles = StyleSheet.create({
    textInput: {
      padding: 10,
      backgroundColor: '#eee',
      borderRadius: 10,
      marginRight: 20,
      multiline: true,
    },
     autocompleteContainer: {
        top: 0,
        left: 10,
        right: 10,
      },
    separator: {
      backgroundColor: '#efefef',
      height: 1,
    },
    listView: {
      borderRadius: 10,
      marginRight: 20,
      backgroundColor: '#ffffff',
    }
});

I saw on the documentation that multiline must be set to true, but I´m not sure what that means. I assumed that it should be set on the textInput style, but obviously I´m wrong. Any help will be deeply appreciated.

alfred11235 avatar Sep 08 '23 11:09 alfred11235