Hello Friends 👋,

Welcome to Infinitbility.

Sometimes, we need to disable users scrolling content and you are also searching for how to enable or disable scrolling of react native flatlist then you are in right place.

Today, we are going to do how to enable or disable flatlist scroll programatically.

Basically, we will create a state isScrollEnabled and use in flatlist scrollEnabled props.

React Native FlatList provide scrollEnabled props to handle scrolling of flatlist and we will pass our isScrollEnabled state value on it means when change isScrollEnabled true it will allow user to scroll and vice versa.

Let try with example.

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

const DATA = [
  {
    id: 'bd7acbea-c1b1-46c2-aed5-3ad53abb28ba',
    title: 'First Item',
  },
  {
    id: '3ac68afc-c605-48d3-a4f8-fbd91aa97f63',
    title: 'Second Item',
  },
  {
    id: '58694a0f-3da1-471f-bd96-145571e29d72',
    title: 'Third Item',
  },
  {
    id: '58694a0f-3da1-471f-bd96-145571e29d72',
    title: 'Four Item',
  },
  {
    id: '58694a0f-3da1-471f-bd96-145571e29d72',
    title: 'Five Item',
  },
  {
    id: '58694a0f-3da1-471f-bd96-145571e29d72',
    title: 'Six Item',
  },
  {
    id: '58694a0f-3da1-471f-bd96-145571e29d72',
    title: 'Seven Item',
  },
  {
    id: '58694a0f-3da1-471f-bd96-145571e29d72',
    title: 'Eight Item',
  },
  {
    id: '58694a0f-3da1-471f-bd96-145571e29d72',
    title: 'Nine Item',
  },
  {
    id: '58694a0f-3da1-471f-bd96-145571e29d72',
    title: 'Ten Item',
  },
];

const Item = ({ title }) => (
  <View style={styles.item}>
    <Text style={styles.title}>{title}</Text>
  </View>
);

const App = () => {
  const [isScrollEnabled, setIsScrollEnabled] = useState(false);
  const renderItem = ({ item }) => (
    <Item title={item.title} />
  );

  useEffect(() => {
    setTimeout(() => {
      setIsScrollEnabled(true);
    }, 3000);
  }, []);

  return (
    <SafeAreaView style={styles.container}>
      <FlatList
        data={DATA}
        scrollEnabled={isScrollEnabled}
        renderItem={renderItem}
        keyExtractor={item => item.id}
      />
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    marginTop: StatusBar.currentHeight || 0,
  },
  item: {
    backgroundColor: '#f9c2ff',
    padding: 20,
    marginVertical: 8,
    marginHorizontal: 16,
  },
  title: {
    fontSize: 32,
  },
});

export default App;

Try it yourself

In above example, we have allow user to scroll after three Seconds of rendering.

Thanks for reading…