SectionList Header is imposing over ItemList in IOS

Question

[![

<View>
                        <SectionList
                            style={seasonsStyles.sectionListStyle}
                            renderItem={({ item, index, section }) => section.index === this.state.expandedRowId ? <TouchableOpacity
                                onPress={() => this.getEpisodeScenes(section.season_id, item.episode_id)}
                                style={seasonsStyles.itemStyle}><Text style={seasonsStyles.episodeNameStyle}>{item.episode_name}</Text>
                                <View style={commonStyles.horizontalEndStyle}><Text style={seasonsStyles.seasonCountStyle}>{item.scene_count} Scenes</Text></View>
                            </TouchableOpacity> : null}
                            renderSectionHeader={({ section: { data, season_number, index } }) => (
                                <TouchableOpacity
                                    onPress={() => this.setState({ expandedRowId: this.state.expandedRowId === index ? null : index })}
                                    style={seasonsStyles.sectionHeaderStyle}>
                                    <View style={seasonsStyles.roundContainerStyle}>
                                        <Text style={seasonsStyles.seasonTitleStyle}>S{season_number}</Text>
                                    </View>
                                    <View style={seasonsStyles.episodeInfoContainerStyle}>
                                        <Text style={seasonsStyles.seasonNumberStyle}>Season {season_number}</Text>
                                        <Text style={seasonsStyles.episeodeNumberStyle}>{data.length} Episodes</Text>
                                        <View style={seasonsStyles.directionIconStyle}>
                                            <Icon name={this.state.expandedRowId === index ? 'chevron-up' : 'chevron-down'} size={20} color={Colors.black} />
                                        </View>
                                    </View>
                                </TouchableOpacity>
                            )}
                            sections={this.props.homeReducer.seasons}
                            keyExtractor={(item, index) => item + index}
                            ItemSeparatorComponent={() => {
                                return <View style={seasonsStyles.separatorStyle} />
                            }}
                        />
                    </View>

]2]2In SectionList my header is being overlapped by Section ItemList, it is happening in IOS only. Can someone help me pls? This behaviour is happening while scrolling otherwise things are fine

Answer 1

Could you try using stickySectionHeadersEnabled prop?

stickySectionHeadersEnabled={false}

Description of stickySectionHeadersEnabled in VS Code since there is no explanation on react site

I develop on a windows machine and only have access to an Android emulator, so I cannot confirm firsthand that this works, unfortunately. Just wanted to give you what I think is a good lead. This is my first answer here, so I apologize if anything is unclear or wrong.