FlatList inside ScrollView doesn't scroll

Question

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

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

and when I try to scroll a FlatList, it doesn't scroll but the ScrollView scrolls. How do I fix this issue ?

Full Source Code

import { Component, default as React } from 'react'; import { FlatList, ScrollView, Text } from 'react-native';  export  class LabScreen extends Component<{}> {   render() {     return (       <ScrollView>         {this.renderFlatList('red')}         {this.renderFlatList('green')}         {this.renderFlatList('purple')}         {this.renderFlatList('pink')}       </ScrollView>     );   }    getRandomData = () => {     return new Array(100).fill('').map((item, index) => {       return { title: 'Title ' + (index + 1) };     });   };    renderFlatList(color: string) {     return (       <FlatList         data={this.getRandomData()}         backgroundColor={color}         maxHeight={200}         marginBottom={50}         keyExtractor={(item, index) => index.toString()}         renderItem={({ item }) => <Text>{item.title}</Text>}       />     );   } } 

snack.expo link

Answer 1

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