1

I am wanting to create a FlatList inside of the ScrollView Component but I kept getting the error "VirtualizedLists should never be nested inside plain ScrollViews with the same orientation because it can break windowing and other functionality - use another VirtualizedList-backed container instead." This led me to this article. I was able to alter my code to the point below, but I am not sure how to alter the this.refs.myList.scrollProperties.offset to fit my code. Is this the best way to try and go about putting a FlatList inside a ScrollView or is there a better way?

const [enableScrollViewScroll, setEnableScrollViewScroll] = useState(true);

return (
  <View 
    onStartShouldSetResponderCapture={() => {
      setEnableScrollViewScroll(true);
    }}>
    <ScrollView 
      scrollEnabled={enableScrollViewScroll}>
      <Component/>
      <View
        onStartShouldSetResponderCapture={() => {
          setEnableScrollViewScroll(false);
          if (this.refs.myList.scrollProperties.offset === 0 && enableScrollViewScroll === false) {
            setEnableScrollViewScroll(true);
          }
        }}>
        <FlatList 
          data={myData}
          renderItem={({item}) => (
            <Text style = {{
              borderWidth: 1,
              marginTop: 5,
              borderRadius: 3,
              paddingLeft: 3,
            }}> 
              {item.content}
            </Text>
          )}/>
      </View>
    </ScrollView>
  </View>
);
ErikT
  • 11
  • 1
  • 2

1 Answers1

1

I was having a very similar issue until I came across an almost complete solution in a very helpful comment on one of the GitHub issues for the react-native project: https://github.com/facebook/react-native/issues/1966#issuecomment-285130701.

The issue is that the parent component is the only one registering the scroll event. The solution is to contextually decide which component should actually be handling that event based on the location of the press.

You'll need to slightly modify your structure to:

<View>
<ScrollView>
    <View>
        <FlatList/>
    </View>
    <View>
        <FlatList/>
    </View>
    <View>
        <FlatList/>
    </View>
    <View>
        <FlatList/>
    </View>
</ScrollView>
</View>

OR:

We can use the built-in nestedscrollenabled prop for the children FlatList/ScrollView components.

<FlatList nestedScrollEnabled />

This is only required for Android (Nested scrolling is supported by default on iOS).

  • credit from here: https://stackoverflow.com/questions/51098599/flatlist-inside-scrollview-doesnt-scroll –  Jun 25 '21 at 03:55