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

Create the getItemLayout prop for a SectionList with React Native.

• 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

1npm install react-native-get-item-layout-section-list

Usage

Basic

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

1import getItemLayout from 'react-native-get-item-layout-section-list';
2
3const ITEM_HEIGHT = 60;
4const SECTION_HEADER_HEIGHT = 40;
5
6const buildGetItemLayout = getItemLayout({
7  getItemHeight: ITEM_HEIGHT,
8  getSectionHeaderHeight: SECTION_HEADER_HEIGHT,
9});
10
11<SectionList
12  getItemLayout={buildGetItemLayout} 
13  keyExtractor={(item, index) => item + index} 
14  renderItem={({item}) => (
15    <View style={styles.item}>
16      <Text style={styles.title}>{item}</Text>
17    </View>
18  )} 
19  renderSectionHeader={({section: {title}}) => (
20    <Text style={styles.header}>{title}</Text>
21  )} 
22  sections={DATA}
23/>

Advanced

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

1import getItemLayout from 'react-native-get-item-layout-section-list';
2
3const SECTION_HEADER_HEIGHT = 40;
4
5const buildGetItemLayout = getItemLayout({
6  getItemHeight: (_item, sectionIndex, _itemIndex) => {
7    // Return a different height for even and odd items
8    return sectionIndex % 2 === 0 ? 60 : 40;
9  },
10  getSectionHeaderHeight: SECTION_HEADER_HEIGHT,
11});
12
13<SectionList
14  getItemLayout={buildGetItemLayout}
15  keyExtractor={(item, index) => item + index}
16  renderItem={({item}) => (
17    <View style={styles.item}>
18      <Text style={styles.title}>{item}</Text>
19    </View>
20  )}
21  renderSectionHeader={({section: {title}}) => (
22    <Text style={styles.header}>{title}</Text>
23  )}
24  sections={DATA}
25/>

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:

1cd example
2npm install && pod install
3npm 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.