Open Csutkas opened 2 years ago
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.
<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, },
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",
@FaridSafi
Feel free to submit a PR
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
Additional context
The bug is here:
style should be contentContainerStyle
Please fix it.
react-native": "^0.65.2", "react-native-google-places-autocomplete": "^2.4.1",