React Native: How to disable scrolling in ListView?

In React Native, disabling scrolling in ListView (or its modern alternatives such as FlatList or ScrollView) can be achieved by setting the scrollEnabled property of the component to false. This property determines whether the component is scrollable.

Example

Assume you are using FlatList to display data but wish to prevent users from scrolling the list. Here's how:

jsx
import React from 'react';
import { FlatList, Text, View } from 'react-native';

const dataList = [
  { key: '1', text: 'Item 1' },
  { key: '2', text: 'Item 2' },
  { key: '3', text: 'Item 3' },
  // More items...
];

const MyComponent = () => {
  return (
    <FlatList
      data={dataList}
      renderItem={({ item }) => <Text>{item.text}</Text>}
      scrollEnabled={false}
    />
  );
};

export default MyComponent;

In this example, scrollEnabled={false} is used to disable scrolling. This ensures that FlatList does not respond to scroll events while displaying data, so users cannot swipe to browse the list.

This method also applies to ScrollView and other components that support scrolling. For developers migrating from ListView to FlatList or ScrollView, it provides a straightforward replacement solution.