How to enable or disable scrolling on FlatList with React Native?

Sometimes, we want to enable or disable scrolling on FlatList with React Native.

In this article, we’ll look at how to enable or disable scrolling on FlatList with React Native.

How to enable or disable scrolling on FlatList with React Native?

To enable or disable scrolling on FlatList with React Native, we can set the scrollEnabled prop.

For instance, we write:

import * as React from 'react';
import { FlatList, Text, View, Dimensions } from 'react-native';
import Constants from 'expo-constants';
import { Card } from 'react-native-paper';

const flatListItems = Array(200)
  .fill()
  .map((_, i) => ({ title: i, id: i }));

const Item = ({ title }) => (
  <View
    style={{
      backgroundColor: '#f9c2ff',
      padding: 20,
      marginVertical: 8,
      marginHorizontal: 16,
    }}>
    <Text>{title}</Text>
  </View>
);

export default function App() {
  const renderItem = ({ item }) => <Item title={item.title} />;
  const keyExtractor = (item) => item.id;

  return (
    <View>
      <FlatList
        scrollEnabled={false}
        style={{ height: 300 }}
        data={flatListItems}
        renderItem={renderItem}
        keyExtractor={keyExtractor}
      />
    </View>
  );
}

to set the scrollEnabled prop to false to disable scrolling on the FlatList.

Conclusion

To enable or disable scrolling on FlatList with React Native, we can set the scrollEnabled prop.