I am currently trying to use a <SectionList>
inside a classic <View>
, all my datas are formatted, the list displays correctly and my item's actions are working.
The issue is that when I am on the top of my SectionList, the area available to trigger the scroll is actually really small ( roughly 100 pixels from the top of the list ). However, once i scroll down a bit from that area, the whole list becomes scrollable and works as intended until I scroll back to the top.
My parent View has flex: 1
as well as my SectionList
Environment
Working environment : MacOS Sierra 10.13.3
Expo version : 23.0
React Native version : 0.50
React : 16.0
Using an IPhone 8 simulation
There's no issue on Android
Steps to Reproduce
Classic creation of a SectionList inside of a View
Expected Behavior
The scroll must be triggered from everywhere in the SectionList
Actual Behavior
When the SectionList is at the top, the scroll only triggers inside a small area ( around 100px from the top of the list )
The code of my SectionList :
<View style={{ flex: 1 }}><SectionList style={styles.openSectionList} // flex: 1 scrollEnabled stickySectionHeadersEnabled sections={this.sections} keyExtractor={item => item["@id"]} removeClippedSubviews renderSectionHeader={({ section }) => (<TouchableHighlight onPress={() => this.onSectionHeaderPressRef(section.index)} activeOpacity={0.65} underlayColor="rgba(0, 0, 0, 0.2)" style={styles.sectionHeader}><View style={styles.categoryContentContainer}><View style={styles.firstPartContent}><Text style={styles.categoryHeaderText}> {section.title === "Autres" ? "Mes produits" : section.title}{""}</Text> {section.nbItems - section.nbItemsSelected === 0 ? (<CheckBox label="" checked checkboxStyle={styles.checkbox} checkboxContainer={styles.checkboxContainer} /> ) : (<Text style={[ styles.categoryHeaderText, { color: Colors.contrastColor }, ]}> ({section.nbItems - section.nbItemsSelected})</Text> )}</View><Image source={require("../../../assets/common/chevron.png")} style={ section.index === this.state.currentCategoryOpen ? styles.categoryChevronOpen : styles.categoryChevronClosed } /></View></TouchableHighlight> )} renderItem={({ item }) => this.state.currentCategoryOpen === item.categoryIndex ? (<ShoppingListProduct key={item["@id"]} ingredient={item} updateIngredient={this.updateIngredientListRef} onLongPress={this.itemLongPressedRef} /> ) : null} /></View>
A GIF of the actual behavior ( I'm trying to scroll everytime the cursor is moving ) where we can see that the scroll only triggers when I am above a certain height.
Any help would be appreciated as I don't know if that's a bug and/or me implementing the component wrong.
Thank you by advance.