FaridSafi / react-native-google-places-autocomplete

Customizable Google Places autocomplete component for iOS and Android React-Native apps
MIT License
2.01k stars 853 forks source link

_getFlatList() function <FlatList> component uses wrong parameter name #792

Open Csutkas opened 2 years ago

Csutkas commented 2 years ago

Describe the bug

The listView style's borderRadius doesn't work on Android device, because the GooglePlacesAutocomplete.js uses wrong parameter name in the _getFlatList() function's component. It has style parameter instead of contentContainerStyle.

Reproduction

 <GooglePlacesAutocomplete
  placeholder={}
  onPress={}
  query={}
  textInputProps={}
  fetchDetails={true}
  enablePoweredByContainer={false}
  styles={styles(colors)}
  isRowScrollable={false}            
  renderRow={(rowData, index) => {
    const title = rowData.structured_formatting.main_text;
    const address = rowData.structured_formatting.secondary_text;

    return (
      <View style={styles(index).containerResultRow}>
        <Text style={styles.textResultTitle}>{title}</Text>
        <Text style={styles.textResultDescription}>
          {address}
        </Text>
      </View>
    );
  }}
/>
container: {
      flex: 0,
    },
    textInputContainer: {
      flexDirection: 'row',
      height: 46,
    },
    textInput: {
      flex: 1,
      height: 46,
      color: colors.text,
      borderRadius: 16,
      borderWidth: 1,
      borderColor: 'red
      backgroundColor: 'gray
      fontSize: 18,
      paddingHorizontal: 15,
    },
    listView: {
      borderRadius: 16,
      overflow: 'hidden',
      marginTop: 12,
    },
    row: {
      backgroundColor: 'transparent',
      paddingVertical: 0,
      paddingHorizontal: 0,
    },
    separator: {
      height: 0,
    },

    containerResultRow: {
      flex: 1,
      height: 55,
      justifyContent: 'center',
      paddingHorizontal: 15,
      backgroundColor:
        rowIndex && (rowIndex + 1) % 2 === 0
          ? 'blue'
          : 'green',
    },
    textResultTitle: {
      fontSize: 15,
    },
    textResultDescription: {
      fontSize: 10,
      marginTop: 2,
    },

Additional context

The bug is here:

const _getFlatList = () => {
    const keyGenerator = () => Math.random().toString(36).substr(2, 10);

    if (
      supportedPlatform() &&
      (stateText !== '' ||
        props.predefinedPlaces.length > 0 ||
        props.currentLocation === true) &&
      listViewDisplayed === true
    ) {
      return (
        <FlatList
          nativeID="result-list-id"
          scrollEnabled={!props.disableScroll}
          style={[
            props.suppressDefaultStyles ? {} : defaultStyles.listView,
            props.styles.listView,
          ]}
          data={dataSource}
          keyExtractor={keyGenerator}
          extraData={[dataSource, props]}
          ItemSeparatorComponent={_renderSeparator}
          renderItem={({item, index}) => _renderRow(item, index)}
          ListEmptyComponent={
            stateText.length > props.minLength && props.listEmptyComponent
          }
          ListHeaderComponent={
            props.renderHeaderComponent &&
            props.renderHeaderComponent(stateText)
          }
          ListFooterComponent={_renderPoweredLogo}
          {...props}
        />
      );
    }

style should be contentContainerStyle

Please fix it.

react-native": "^0.65.2", "react-native-google-places-autocomplete": "^2.4.1",

Csutkas commented 2 years ago

@FaridSafi

bell-steven commented 2 years ago

Feel free to submit a PR