Quantcast
Channel: Active questions tagged react-native+ios - Stack Overflow
Viewing all articles
Browse latest Browse all 16552

Scroll area too small with SectionList React Native

$
0
0

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.

GIF

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.


Viewing all articles
Browse latest Browse all 16552

Trending Articles