Mike Gee Mike Gee - 3 months ago 26
React JSX Question

React Native layout bug - ListView is rendering unexpectedly

I have a ListView component, and another component that has a google maps searchbox. I'd like to display a list directly under that component, but it seems that there is some padding on the top of the list or bottom of the searchbox that is causing a gap between the two elements.

I tried removing the searchbox, and was happy to see that the ListView looked like expected, with no gap between the list and the header. But when I reload the page, the gap appears again:

Click here to see a quick gif of the bug

Here is the code for this 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

Answer

You probably need to set automaticallyAdjustContentInsets={false} and then set your own contentInset to accommodate the searchbar: contentInset={{top: 44}}.