React Native Listview leaving space

Question

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 L

Answer 1

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}
>

Answer 2

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

Answer 3

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.