How to Disable Scrolling on Flatlist in React Native

By default, the behavior of the 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 the props of the ScrollView component. Hence you can use the prop scrollEnabled for this purpose. The default value of scrollEnabled prop is true. When it is set to 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 JSON placeholder 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.

Following is the typescript code for disabling FlatList scroll.

import React, {useState, useEffect} from 'react';
import {View, Text, StyleSheet, FlatList, Button} from 'react-native';

interface Data {
  id: number;
  title: string;
  body: string;
}

const App = () => {
  const [data, setData] = useState<Data[]>([]);
  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;

Following is the code for non typescript users.

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 react native FlatList.