How to get an event when the headers become stciky in SectionList?

user_2479865 0
Viewed 69

I want to change the styles of the headers when they stick on the top of the SectionList. So I want some event that will let me know that the header are now sticking so as to change its style.

              <SectionList
                sections={this.state.list}
                keyExtractor={(item, index) => item.id + index}
                renderItem={({ item, index }) =>
                  <CustomItem
                    title={item.name}
                    description={item.appDescription}
                  >
                  </ExpandableItem>}
                renderSectionHeader={({ section: { title, id } }) => (
                  this.state.list.length > 1 ? <View style={styles.sectionHeader} >
                    <Text style={styles.sectionHeaderTitle}>{title}</Text>
                  </View> : null
                )}
                ListHeaderComponent={() => {
                  return (<View style={{ paddingTop: 20 }} />);
                }}
            stickySectionHeadersEnabled={true}
            removeClippedSubviews={true}
              />```
react-native-sectionlist react-redux react-native reactjs
1 Answers

Use Animated Section list by

const AnimatedSectionList = Animated.createAnimatedComponent(SectionList);

then capture its offset like

const offset = new Animated.Value(0);

and use it in onScroll event.

Now on offset specific value change header styling using interpolate I am adding a little example below using your code which changes height with scroll

<SectionList
            sections={this.state.list}
            keyExtractor={(item, index) => item.id + index}
onScroll={Animated.event(
        [
          {
            nativeEvent: { contentOffset: { y: offset } },
          },
        ],
        {
          useNativeDriver: true,
        }
      )}
            renderItem={({ item, index }) =>
              <CustomItem
                title={item.name}
                description={item.appDescription}
              >
              </ExpandableItem>}
            renderSectionHeader={({ section: { title, id } }) => (
              this.state.list.length > 1 ? <View style={styles.sectionHeader} >
                <Text style={styles.sectionHeaderTitle}>{title}</Text>
              </View> : null
            )}
            ListHeaderComponent={() => {
              return (<View style={{ paddingTop: 20, height: offset.interpolate({
        inputRange: [0, 30],
        outputRange: [30, 0],
      }) }} />);
            }}
        stickySectionHeadersEnabled={true}
        removeClippedSubviews={true}
          />
user_68904140
Related