Vertical scrolling inside the vertical scrolling in steps - React Native

Question

I need to create the following interface:

There is a parent SectionList in which there are various sections of elements
One of these sections contains a vertical FlatList.

I want SectionList to scroll vertically strictly by sections (e.g. via scrollToLocation), while vertical FlatList should scroll freely within itself and be independent of SectionList scrolling

Below is a schematic of how this should look visually.

Maybe you need to use neither SectionList nor FlatList to solve this problem, this is my vision of how it can be implemented. Who has any ideas how to solve this problem?

UPDATE:

I created an example of my code in Snack. The problems I can't solve yet:

How to make the SectionList scroll strictly by section.
As you can see, there is 1 common scroll on SectionList and FlatList and that is not what I need. The scrolling of both lists should be independent (if I scroll FlatList, the parent SectionList should not move). I tried using nestedScrollEnabled, but this option does nothing (or I'm using it wrong).

RodSar · Answer 1 · 2022-03-23T14:47:58.437

0

I think that your approach will work, the only problem you might face is the inner scrollable component not scrolling on android but you can fix it by adding nestedScrollEnabled prop to the scrollable view (in the parent, although I might be mistaken, in that case you'll have to add it to the child)

Edit:

          else {
            return (
              <View style={{ padding: SPACING, backgroundColor: COLORS[item] }}>
                <ScrollView
                  nestedScrollEnabled={true}
                  style={{ ...styles.flatlist, height: 100 }}>
                  {COUNT.map((item) => (
                    <View key={item}>
                      <Text>{item}</Text>
                    </View>
                  ))}
                </ScrollView>
              </View>
            );
          }

https://snack.expo.dev/@rodsar/952354 here is a working example, FlatList didn't seem to work for me in this case and i haven't investigated the causes, but ScrollView did work.

edited Mar 23 '22 at 14:47

answered Mar 23 '22 at 13:20

RodSar

1,211
1
4
14

See the update to my question, I added the example code to Snack. So far I'm having trouble separating scrollable lists, maybe you can help. – Slam Mar 23 '22 at 13:58
I updated my answer, please try it out and mark it as solved if it helped you, as for scrollToLocation there are many approaches online that you can try to implement first. – RodSar Mar 23 '22 at 14:47
Cool, I get your approach, but there is one problem. When scrolling `ScrollView`, when scrolling comes to the end this event goes to the parent `SectionList`. Even if I set `scrollEnabled={false}` option in `SectionList`, because `ScrollView` scrolls and the event propagates to the parent `SectionList` will still scroll. I hope I explained the point clearly :) – Slam Mar 23 '22 at 15:09
I think that's for the better, so that the user can continue scrolling down once they hit the end of the section, but you can override this behavior by disabling section scroll when the user is scrolling on the scroll view and then enable it again when the drag ends, but sadly I don't have the time for it now :( – RodSar Mar 23 '22 at 15:14

score 0 · Answer 2 · answered Mar 25 '22 at 20:25

0

Nesting of scrollable doesn’t work as expected when in the same direction.

I will suggest you FlatList from react-native-gesture-handler

snack

import { FlatList } from 'react-native-gesture-handler'

ref: react-native-gesture-handler/FlatList

answered Mar 25 '22 at 20:25

FnH

587
4
5

That's not exactly what I need. This, unfortunately, does not fully resolve the issue – Slam Mar 26 '22 at 22:18
Can you explain what doesn't work with my solution – FnH Apr 01 '22 at 15:16

score 0 · Answer 3 · answered Oct 12 '22 at 15:32

I had a similar issue using RN 0.66, react-native-gesture-handler v2. Ended up using the <GestureHandlerRootView style={{flex: 1}}> wrapping the App as described here:

https://docs.swmansion.com/react-native-gesture-handler/docs/installation/

and the FlatList and ScrollView exported by RNGH

import { FlatList, ScrollView } from 'react-native-gesture-handler';

<SectionList
        contentContainerStyle={styles.sectionListContainer}
        showsVerticalScrollIndicator={false}
        SectionSeparatorComponent={SeparatorItem}
        sections={mySections}
        keyExtractor={(item) => item.id}
        renderItem={renderFlatlist}. // <-- using RNGH FlatList in that function
        renderScrollComponent={(props) => <ScrollView {...props} />} // <--using RNGH ScrollView here
        renderSectionHeader={({ section: { title } }) => (
          <Title>{title}</Title>
        )}
        stickySectionHeadersEnabled={false}
 />

Vertical scrolling inside the vertical scrolling in steps - React Native

3 Answers3