Last Updated on December 14, 2020.
By default, the behavior of flatlist component of react native is to scroll. But, in some unusual situations, you may want to disable scrolling in react native flatlist. This blog post goes through how to disable scrolling in Flatlist.
As you know, Flatlist inherits props of ScrollView component. Hence you can use the prop scrollEnabled for this purpose. The default value of scrollEnabled prop is true. When it is set false the scroll doesn’t happen while touching. You can get more information about it here.
In the following react native example, I get data from free jsonplaceholder api and show data through flatlist. I have two buttons at the top- one for disabling the scroll whereas the other one is for enabling the scroll.
Class based Component
import React, { Component } from 'react';
import { View, Timport React, {Component} from 'react';
import {View, Text, StyleSheet, FlatList, Button} from 'react-native';
class MyClass extends Component {
constructor(props) {
super(props);
this.state = {
data: '',
scroll: true,
};
}
componentDidMount() {
fetch('https://jsonplaceholder.typicode.com/posts')
.then((response) => response.json())
.then((json) =>
this.setState({
data: json,
}),
);
}
render() {
return (
<View style={styles.container}>
<View style={styles.buttonView}>
<Button
onPress={() => this.setState({scroll: false})}
title="Disable Scrolling"
color="#841584"
/>
<Button
onPress={() => this.setState({scroll: true})}
title="Enable Scrolling"
color="#841584"
/>
</View>
<FlatList
keyExtractor={(item) => item.id.toString()}
data={this.state.data}
scrollEnabled={this.state.scroll}
renderItem={({item}) => <Text>{item.title}</Text>}
/>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: 'white',
},
buttonView: {
flexDirection: 'row',
},
});
export default MyClass;
Function based component
import React, {useState, useEffect} from 'react';
import {View, Text, StyleSheet, FlatList, Button} from 'react-native';
const App = () => {
const [data, setData] = useState('');
const [scroll, setScroll] = useState(true);
useEffect(() => {
fetch('https://jsonplaceholder.typicode.com/posts')
.then((response) => response.json())
.then((json) => setData(json));
}, []);
return (
<View style={styles.container}>
<View style={styles.buttonView}>
<Button
onPress={() => setScroll(false)}
title="Disable Scrolling"
color="#841584"
/>
<Button
onPress={() => setScroll(true)}
title="Enable Scrolling"
color="#841584"
/>
</View>
<FlatList
keyExtractor={(item) => item.id.toString()}
data={data}
scrollEnabled={scroll}
renderItem={({item}) => <Text>{item.title}</Text>}
/>
</View>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: 'white',
},
buttonView: {
flexDirection: 'row',
},
});
export default App;

That’s how you disable and enable scroll on Flatlist.