React Native ListView Insets

Question

I am having trouble aligning my list view with the navbar.

I have tried work with with the insets, it has worked for iOS but for android the problem still remains.

I would have thought that the insets for the Listview(iOS) would be automatically set. automaticallyAdjustContentInsets={true} does not work in this case. I hard coded in the insets.

It also appears that the listView is running a bit slow for iOS.

The problem with Android is that the listView does not appear to be inset correctly.

My suspicion is that react native flux router does not take into account the content, below the navbar.

I am using React-native-router-flux for navigation which renders a navbar.

"react-native-router-flux": "^3.30.0", "react-native": "^0.28.0",

 ```
    /// Render function for app container.
        render() {
            return (<Router>
                            <Scene key="root">
                               <Scene key="Home" component={Home} title="Home" initial={true} navigationBarStyle={{backgroundColor:'transparent'}}></Scene>
                            </Scene>
                    </Router>);
        }


    ```

    ```javascript
    //listview render

    import React from 'react';
    import { Text, View, ListView} from 'react-native';

    import ApiClient from '../../networking/apiClient' 


    import { Actions } from 'react-native-router-flux'

    class Home extends React.Component {

        constructor(props){
                super(props)

            let apiClient = new ApiClient()
            let username = '0853795'
            let password = 'waosuchpassword123'

            apiClient.login(username,password).then((json) => {
                console.log(JSON.stringify(json))
              return apiClient.retrieveBalanceInformation()
            }).then((json) => {
                console.log(JSON.stringify(json))
              return apiClient.retrieveTransactionInformation()
            }).then((json) =>{
                console.log(JSON.stringify(json))
            }).catch((error) =>{
              console.log(error)
            })

            this.ds = new ListView.DataSource(
                {
                    rowHasChanged: this.rowHasChanged,
                    sectionHeaderHasChanged:this.sectionHeaderHasChanged,
                    getSectionHeaderData:this.getSectionHeaderData,
                    getRowData:this.getRowData,
                });


            this.data = 
                {
                    'section1':
                    [
                        {
                            firstName:'Michael',
                            lastName:'Chung',
                        },
                        {
                            firstName:'Angelica',
                            lastName:'Ramos',
                        },
                        {
                            firstName:'Michael',
                            lastName:'Chung',
                        },
                        {
                            firstName:'Angelica',
                            lastName:'Ramos',
                        },
                        {
                            firstName:'Michael',
                            lastName:'Chung',
                        },
                        {
                            firstName:'Angelica',
                            lastName:'Ramos',
                        },
                        {
                            firstName:'Michael',
                            lastName:'Chung',
                        },
                        {
                            firstName:'Angelica',
                            lastName:'Ramos',
                        },
                        {
                            firstName:'Michael',
                            lastName:'Chung',
                        },
                        {
                            firstName:'Angelica',
                            lastName:'Ramos',
                        },
                        {
                            firstName:'Michael',
                            lastName:'Chung',
                        },
                        {
                            firstName:'Angelica',
                            lastName:'Ramos',
                        },
                        {
                            firstName:'Michael',
                            lastName:'Chung',
                        },
                        {
                            firstName:'Angelica',
                            lastName:'Ramos',
                        },
                        {
                            firstName:'Michael',
                            lastName:'Chung',
                        },
                        {
                            firstName:'Angelica',
                            lastName:'Ramos',
                        }
                    ],
                    'section2':[
                        {
                            firstName:'Andrew',
                            lastName:'Chung',
                        },
                        {
                            firstName:'Lilian',
                            lastName:'Ramos',
                        },
                        {
                            firstName:'Michael',
                            lastName:'Chung',
                        },
                        {
                            firstName:'Angelica',
                            lastName:'Ramos',
                        },
                        {
                            firstName:'Michael',
                            lastName:'Chung',
                        },
                        {
                            firstName:'Angelica',
                            lastName:'Ramos',
                        },
                        {
                            firstName:'Michael',
                            lastName:'Chung',
                        },
                        {
                            firstName:'Angelica',
                            lastName:'Ramos',
                        },
                        {
                            firstName:'Michael',
                            lastName:'Chung',
                        },
                        {
                            firstName:'Angelica',
                            lastName:'Ramos',
                        },
                        {
                            firstName:'Michael',
                            lastName:'Chung',
                        },
                        {
                            firstName:'Angelica',
                            lastName:'Ramos',
                        },
                        {
                            firstName:'Michael',
                            lastName:'Chung',
                        },
                        {
                            firstName:'Angelica',
                            lastName:'Ramos',
                        },
                        {
                            firstName:'Michael',
                            lastName:'Chung',
                        },
                        {
                            firstName:'Angelica',
                            lastName:'Ramos',
                        },
                        {
                            firstName:'Michael',
                            lastName:'Chung',
                        },
                        {
                            firstName:'Angelica',
                            lastName:'Ramos',
                        }
                    ]
                }


        }

        componentDidMount = () =>{
            // make network request with action
        }

        getSectionHeaderData = (dataBlob, sectionID) =>{
            return dataBlob[sectionID]
        }

        sectionHeaderHasChanged = (s1, s2) => {
            return s1 !== s2
        }

        getRowData = (dataBlob, sectionID, rowID) => {
            return dataBlob[sectionID][rowID]
        }

        rowHasChanged = (r1, r2) => {
            return r1 !== r2
        }

        renderRow = (rowData,sectionID, rowID, highlightRow) => {

            return (<View key={rowID}>
                    <Text> {`RowID:  ${rowID}`} </Text>
                    <Text> {`FirstName: ${rowData.firstName}`} </Text>
                    <Text> {`LastName: ${rowData.lastName}`} </Text>
                </View>
            );
        }

        renderSectionHeader = (sectionData, sectionID) => {
            return(<View key={sectionID}> 
                    <Text> {`SectionID: ${sectionID}`} </Text> 
                </View>
            );
        }

        renderSeparator = (sectionID, rowID, adjacentRowHighlighted) => {
            return (<View key={sectionID + rowID}height={1} backgroundColor={'#0000001e'}/>
            );
        }

        renderFooter = () => {
            return (<View height={80} alignSelf={'stretch'} backgroundColor={'#0000001e'}/>
            );
        }

        render= () => {
            return (<ListView
                initialListSize={100}
                    dataSource={this.ds.cloneWithRowsAndSections(this.data)} 
                    renderRow={this.renderRow}
                    renderSectionHeader={this.renderSectionHeader}
                    renderSeparator={this.renderSeparator}
                    // Offset the content then set the insets to ensure that the bars are in the correct position.
                    contentOffset={{x: 0, y: -64}}
                    contentInset={{top: 64, bottom: 49}}
                    automaticallyAdjustContentInsets={true}
                    />);
        }
    }

    export default Home;

    /**

    **/

```

Answer 1

As agent_hunt said contentInset is ios specific, to achieve 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
  }