ilansas ilansas - 3 months ago 15
iOS Question

React Native Listview leaving space

I'm trying to implement a listview in React Native. Everything was fine when I was just calling the component

Accounts
but since I put it into a NavigatorIOS the Listview is leaving some space before the first item : see here and when I scroll here.

Here is my code :

index.ios.js

var RemoteX1 = React.createClass({

render: function() {
return (
<NavigatorIOS
style={styles.container}
initialRoute={{
title: 'Accounts',
component: Accounts,
}}/>
);
}
});

var styles = StyleSheet.create({
container: {
flex: 1,
},
});


accounts.js

var people = [
{
title: "Papa",
favouriteChannels: []
},
{
title: "Maman",
favouriteChannels: []
},
{
title: "Kids",
favouriteChannels: []
},
{
title: "Invité",
favouriteChannels: []
}
];

var Accounts = React.createClass({
getInitialState: function() {
var ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
return {
dataSource: ds.cloneWithRows(people),
}
},
renderRow: function(person) {
return (
<TouchableHighlight onPress={this.onPressRow}>
<Text style={styles.account}>{person.title}</Text>
</TouchableHighlight>
);
},
render: function() {
return (
<View style={styles.container}>
<View style={styles.panel}>
<Text style={styles.icon}>&#xF0C6;</Text>
<Text style={styles.welcome}>BIENVENUE</Text>
<ListView
dataSource={this.state.dataSource}
renderRow={this.renderRow}
style={styles.listView} />
</View>
</View>
);
}
});

var styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
justifyContent: 'center'
},
panel: {
backgroundColor: '#67F072',
alignItems: 'center',
justifyContent: 'center',
paddingLeft: 50,
paddingRight: 50,
},
icon: {
color: '#67B7F0',
fontFamily: 'CanalDemiRomainG7',
fontSize: 40
},
welcome: {
color: '#67B7F0',
fontFamily: 'CanalDemiRomainG7'
},
account: {
color: '#000000',
height: 30,
alignSelf: 'center',
fontFamily: 'CanalDemiRomainG7'
},
})


Does anyone has any idea of what's going on ? Thanks

Answer

Ok so, I found the answer, I post it here for anyone who run into the same issue.

An issue has been posted on Github here . It is necessary to add to the ListView the parameter automaticallyAdjustContentInsets={false}. Problem Solved.

Comments