Vertical scrolling inside the vertical scrolling in steps - React Native

Question

I need to create the following interface:

1. There is a parent SectionList in which there are various sections of elements
2. 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:

1. How to make the SectionList scroll strictly by section.
2. 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).

Answer 1

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.

Answer 2

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