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

Create the getItemLayout prop for a SectionList with React Native.

!GitHub License

* Motivation
* Installation
* Usage
* Basic
* Advanced
* Examples
* Contributing
* Releasing
* License

Motivation

The getItemLayout prop in a SectionList is an optimization prop that improves performance of the list by helping it to quickly calculate the size and position of its items.

When you provide the getItemLayout prop, React Native can:

* Jump directly to any list item without sequentially rendering all previous items.
* Maintain scroll position accurately during layout changes or content updates.
* Reduce the need for dynamic measurement as users scroll, leading to smoother experiences.
* Access other props, such as initialScrollIndex and scrollToLocation

The getItemLayout prop is not trivial to implement for a SectionList. This library provides a simple way to create the getItemLayout prop for a SectionList with fixed or dynamic heights.

Installation

``sh
npm install react-native-get-item-layout-section-list
`

Usage

$3


This example shows how to use the getItemLayout prop with fixed heights.

`tsx
import getItemLayout from 'react-native-get-item-layout-section-list';

const ITEM_HEIGHT = 60;
const SECTION_HEADER_HEIGHT = 40;

const buildGetItemLayout = getItemLayout({
getItemHeight: ITEM_HEIGHT,
getSectionHeaderHeight: SECTION_HEADER_HEIGHT,
});

getItemLayout={buildGetItemLayout}
keyExtractor={(item, index) => item + index}
renderItem={({item}) => (

{item}

)}
renderSectionHeader={({section: {title}}) => (
{title}
)}
sections={DATA}
/>
`

$3


This example shows how to use the getItemLayout prop with dynamic heights.

`tsx
import getItemLayout from 'react-native-get-item-layout-section-list';

const SECTION_HEADER_HEIGHT = 40;

const buildGetItemLayout = getItemLayout({
getItemHeight: (_item, sectionIndex, _itemIndex) => {
// Return a different height for even and odd items
return sectionIndex % 2 === 0 ? 60 : 40;
},
getSectionHeaderHeight: SECTION_HEADER_HEIGHT,
});

getItemLayout={buildGetItemLayout}
keyExtractor={(item, index) => item + index}
renderItem={({item}) => (

{item}

)}
renderSectionHeader={({section: {title}}) => (
{title}
)}
sections={DATA}
/>
``

Examples


There are fully functional examples in the exmaple directory.

If you'd like to actually run the examples, clone the repository and run the following commands:

`sh
cd example
npm install && pod install
npm run ios
``

Contributing

See the contributing guide to learn how to contribute to the repository and the development workflow.

Releasing

See the releasing guide to learn how to release new versions.

License

This project is licensed under the MIT License - see the LICENSE file for details.