Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

313
Views
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

over 4 years ago · Santiago Trujillo
3 answers
Answer question

0

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.

over 4 years ago · Santiago Trujillo Report

0

This only happens when you have a ScrollView or ListView with TabBarIOS. You can remove the extra space at the top if you put automaticallyAdjustContentInsets={false}

However, the ScrollView will not completely be shown because the bottom portion of it will be hidden under the TabBarIOS. To fix this add contentInset={{bottom:49}} adjust the height according to your needs.

here is the code:

<ListView
  contentInset={{bottom:49}}
  automaticallyAdjustContentInsets={false}
>
over 4 years ago · Santiago Trujillo Report

0

If you're trying to achieve this in android..contentInset is iOS specific, to manage this on android you need to set the property inside of <ListView contentContainerStyle={styles.contentContainer}> </ListView>

Then in your stylesheets.create

var styles = StyleSheet.create({
  contentContainer: {
    paddingBottom: 100 
  }

* I realise that op is asking for an iOS solution, just adding the android solution for people passing and if op decides he's fed up with iOS

over 4 years ago · Santiago Trujillo Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!