https://github.com/damonbauer/react-native-get-item-layout-section-list
Create the getItemLayout prop for a SectionList with React Native
https://github.com/damonbauer/react-native-get-item-layout-section-list
getitemlayout react-native sectionlist
Last synced: 11 months ago
JSON representation
Create the getItemLayout prop for a SectionList with React Native
- Host: GitHub
- URL: https://github.com/damonbauer/react-native-get-item-layout-section-list
- Owner: damonbauer
- License: mit
- Created: 2024-03-16T09:27:28.000Z (over 2 years ago)
- Default Branch: master
- Last Pushed: 2025-07-30T20:51:55.000Z (11 months ago)
- Last Synced: 2025-07-30T22:59:03.518Z (11 months ago)
- Topics: getitemlayout, react-native, sectionlist
- Language: TypeScript
- Homepage:
- Size: 1.22 MB
- Stars: 16
- Watchers: 2
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Codeowners: .github/CODEOWNERS
Awesome Lists containing this project
README
# react-native-get-item-layout-section-list
Create the `getItemLayout` prop for a `SectionList` with React Native.
[](https://www.npmjs.com/package/react-native-get-item-layout-section-list)
[](https://www.npmjs.com/package/react-native-get-item-layout-section-list)
* [Motivation](#motivation)
* [Installation](#installation)
* [Usage](#usage)
* [Basic](#basic)
* [Advanced](#advanced)
* [Examples](#examples)
* [Contributing](#contributing)
* [Releasing](#releasing)
* [License](#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
### Basic
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,
});
item + index}
renderItem={({item}) => (
{item}
)}
renderSectionHeader={({section: {title}}) => (
{title}
)}
sections={DATA}
/>
```
### Advanced
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,
});
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](CONTRIBUTING.md) to learn how to contribute to the repository and the development workflow.
## Releasing
See the [releasing guide](RELEASING.md) to learn how to release new versions.
## License
This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.