JSPM

react-native-section-list-get-item-layout

2.2.3
    • ESM via JSPM
    • ES Module Entrypoint
    • Export Map
    • Keywords
    • License
    • Repository URL
    • TypeScript Types
    • README
    • Created
    • Published
    • Downloads 22573
    • Score
      100M100P100Q146794F
    • License Apache-2.0

    This package simplifies constructing the getItemLayout prop for react native SectionLists.

    Package Exports

    • react-native-section-list-get-item-layout

    This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-native-section-list-get-item-layout) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

    Readme

    React Native SectionList getItemLayout

    This package provides a function that helps you construct the getItemLayout function for your SectionLists. For an explanation of why this exists, see this post. It's meant to be used like this:

    import sectionListGetItemLayout from 'react-native-section-list-get-item-layout'
    
    class MyComponent extends React.Component {
      constructor(props) {
        super(props)
    
        this.getItemLayout = sectionListGetItemLayout({
          // The height of the row with rowData at the given sectionIndex and rowIndex
          getItemHeight: (rowData, sectionIndex, rowIndex) => sectionIndex === 0 ? 100 : 50,
    
          // These four properties are optional
          getSeparatorHeight: () => 1 / PixelRatio.get(), // The height of your separators
          getSectionHeaderHeight: () => 20, // The height of your section headers
          getSectionFooterHeight: () => 10, // The height of your section footers
          listHeaderHeight: 40, // The height of your list header
        })
      }
    
      render() {
        return (
          <SectionList
            {...otherStuff}
            getItemLayout={this.getItemLayout}
          />
        )
      }
    }