https://github.com/usmansbk/sectionlist-get-item-layout

React-Native SectionList getItemLayout helper
https://github.com/usmansbk/sectionlist-get-item-layout

react-native sectionlist

Last synced: about 1 year ago
JSON representation

React-Native SectionList getItemLayout helper

• Host: GitHub
• URL: https://github.com/usmansbk/sectionlist-get-item-layout
• Owner: usmansbk
• License: mit
• Created: 2019-06-03T04:41:00.000Z (about 7 years ago)
• Default Branch: master
• Last Pushed: 2019-10-13T10:07:31.000Z (over 6 years ago)
• Last Synced: 2025-04-20T00:45:06.830Z (about 1 year ago)
• Topics: react-native, sectionlist
• Language: JavaScript
• Homepage: https://www.npmjs.com/package/sectionlist-get-itemlayout
• Size: 84 KB
• Stars: 9
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
# React Native SectionList getItemLayout

This package provides a function that helps you construct the `getItemLayout` function for your `SectionList`s. It's interface is based on [react-native-section-list-get-item-layout](https://medium.com/@jsoendermann/sectionlist-and-getitemlayout-2293b0b916fb). It's meant to be used like this:

```javascript

import sectionListGetItemLayout from 'sectionlist-get-item-layout';

class MyComponent extends React.Component {

  _getItemLayout = sectionListGetItemLayout({

      // The height of the row with rowData at the given sectionIndex and rowIndex

      getItemHeight: (rowData, sectionIndex, rowIndex) => sectionIndex === 0 ? 100 : 50,

      // These five properties are optional

      getSeparatorHeight: () => 1, // The height of your separators between items

      getSectionHeaderHeight: () => 20, // The height of your section headers

      getSectionFooterHeight: () => 10, // The height of your section footers

      listHeaderHeight: 40, // The height of your header

      listFooterHeight: 20, // The height of your footer

    });

  render() {

    return (

      

    )

  }

}

```