I am facing an issue with my ListView component and a Google Maps searchbox component. I want to display a list directly below the searchbox, but there seems to be some padding at the top of the list or bottom of the searchbox causing a gap between the two elements.
Removing the searchbox temporarily resolves the gap issue, but it reappears upon reloading the page:
Check out this quick gif showcasing the bug
Below is the code snippet for this particular view:
import React from 'react'
var Swipeout = require('react-native-swipeout')
var {GooglePlacesAutocomplete} = require('react-native-google-places-autocomplete');
import {
Text,
View,
StyleSheet,
Image,
TouchableHighlight,
Linking,
AsyncStorage,
ListView
} from 'react-native'
var styles = StyleSheet.create({
container: {
backgroundColor: '#003D40',
flex: 1,
marginTop: 65
},
buttonText: {
fontSize: 18,
color: '#111',
alignSelf: 'center'
},
button: {
height: 45,
flexDirection: 'row',
backgroundColor: 'white',
borderColor: 'white',
borderWidth: 1,
borderRadius: 8,
marginBottom: 10,
marginTop: 10,
alignSelf: 'stretch',
justifyContent: 'center',
margin: 15,
marginBottom: 30,
},
favorite: {
color: 'white',
fontSize: 15
},
listContainer: {
}
})
const dataSource = new ListView.DataSource({ rowHasChanged:(r1, r2) => r1.guid != r2.guid })
class EditFavorites extends React.Component {
constructor(props) {
super(props);
var array = ["1", "2", "3"]
this.state = {
dataSource: dataSource.cloneWithRows(array),
}
}
renderRow(rowData, sectionID, rowID) {
let _ = this
var swipeoutBtns = [
{
text: 'Delete',
onPress: function() {
_.setState({
choppingBlock: rowData
});}
}
]
console.log("rowData", rowData)
return (
<Swipeout
right={swipeoutBtns}
>
<View>
<TouchableHighlight
underlayColor='#dddddd'
style={{height:44}}
>
<View>
<Text
style={{fontSize: 20, color: '#000000', padding: 15, paddingTop: 10}}
numberOfLines={1}>{rowData}</Text>
</View>
</TouchableHighlight>
</View>
</Swipeout>
)
}
render() {
// storage.remove({
// key: 'favorites'
// });
if(this.state.favorites == []) {
listArray = array
} else {
listArray = this.state.favorites
}
return (
<View style={styles.container}>
<ListView dataSource={this.state.dataSource} renderRow={this.renderRow.bind(this)} enableEmptySections={true} style={styles.listContainer} />
</View>
)
}
}
module.exports = EditFavorites