How to Disable Scrolling on Flatlist in React Native

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.