FlatList inside ScrollView doesn't scroll

Question

I\'ve 4 FlatLists with maxHeight set to 200 inside a ScrollView.

Answer 1

Try to set the FlatList as nested

nestedScrollEnabled={true}

Answer 2

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).

Answer 3

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>

The only thing I had to change from the GitHub comment was to use this._myScroll.contentOffset instead of this.refs.myList.scrollProperties.offset.

I've modified your fully working example in a way that allows scrolling of the inner FlatLists.

import { Component, default as React } from 'react';
import { View, FlatList, ScrollView, Text } from 'react-native';

export default class LabScreen extends Component<{}> {
  constructor(props) {
    super(props);
    this.state = {enableScrollViewScroll: true};
  }

  render() {
    return (
      <View
      onStartShouldSetResponderCapture={() => {
          this.setState({ enableScrollViewScroll: true });
      }}>
      <ScrollView
      scrollEnabled={this.state.enableScrollViewScroll}
      ref={myScroll => (this._myScroll = myScroll)}>
        {this.renderFlatList('red')}
        {this.renderFlatList('green')}
        {this.renderFlatList('purple')}
        {this.renderFlatList('pink')}
      </ScrollView>
      </View>
    );
  }

  getRandomData = () => {
    return new Array(100).fill('').map((item, index) => {
      return { title: 'Title ' + (index + 1) };
    });
  };

  renderFlatList(color: string) {
    return (
      <View
        onStartShouldSetResponderCapture={() => {
          this.setState({ enableScrollViewScroll: false });
          if (this._myScroll.contentOffset === 0
            && this.state.enableScrollViewScroll === false) {
            this.setState({ enableScrollViewScroll: true });
          }
        }}>
      <FlatList
        data={this.getRandomData()}
        backgroundColor={color}
        maxHeight={200}
        marginBottom={50}
        keyExtractor={(item, index) => index.toString()}
        renderItem={({ item }) => <Text>{item.title}</Text>}
      />
      </View>
    );
  }
}

Hopefully you find this useful!