React-native-google-places-autocomplete: Divide details description into multi line

[abdelfattah10]

Need to divide text into multiple lines

[Adr1ann]

Hi! Any solution here?

[enguerranws]

This component can't do it right now, as it uses a <Text> component to render the description (https://github.com/FaridSafi/react-native-google-places-autocomplete/blob/master/GooglePlacesAutocomplete.js#L555).

A good solution would be a PR that modify that checks if rowData is a string, and uses a Text, or something else, and uses a View component.

EDIT:
I was wrong. I was preparing a PR that would handle this, but well, reading the code, I've seen an interesting prop: renderRow, which is not documented.

You can use it to override the default description wrapper.

E.g.:

function renderDescription(rowData) {
    const title = rowData.structured_formatting.main_text;
    const address = rowData.structured_formatting.secondary_text;
    return (
      <View>
        <Text style={styles.rowTitle}>
          {title}
        </Text>
        <Text style={styles.rowAddress}>
          {address}
        </Text>
      </View>

    );
  }
...

<GooglePlacesAutocomplete
...
renderRow={rowData => {
              return (
                <View>
                  {renderDescription(rowData)}
                </View>
              )
            }}
/>

It will uses this.props.renderRow instead of the default one (which renders a component). In this case, renderDescription prop is no longer used.

Perhaps we should add some doc about renderRow?

[luisbarrientosf]

We need this prop in documentation

[bell-steven]

Hey, this is something I was trying to find myself for a while. Would either of you like to put in a PR to help other find this?

[enguerranws]

That could be added to the doc quickly, but I'm not sure I have all the information about renderRow signature.

[bell-steven]

This would involve seeing what rowData passes to the renderRow and renderDescription functions. There can probably be a few different scenarios, depending on the api used to search etc. I just joined as a maintainer here, so I honestly am not entirely sure what it does either.

There are currently 45 😱 props available on this component, so it's no surprise that you found one that isn't documented.