Navigate back to the homepage

How to enable or disable scroll in flatlist react native?

Infinitbility
React Native
January 4th, 2022 · 1 min read
How to enable or disable scroll in flatlist react native?

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.

1import React, { useState, useEffect } from 'react';
2import { SafeAreaView, View, FlatList, StyleSheet, Text, StatusBar } from 'react-native';
3
4const DATA = [
5 {
6 id: 'bd7acbea-c1b1-46c2-aed5-3ad53abb28ba',
7 title: 'First Item',
8 },
9 {
10 id: '3ac68afc-c605-48d3-a4f8-fbd91aa97f63',
11 title: 'Second Item',
12 },
13 {
14 id: '58694a0f-3da1-471f-bd96-145571e29d72',
15 title: 'Third Item',
16 },
17 {
18 id: '58694a0f-3da1-471f-bd96-145571e29d72',
19 title: 'Four Item',
20 },
21 {
22 id: '58694a0f-3da1-471f-bd96-145571e29d72',
23 title: 'Five Item',
24 },
25 {
26 id: '58694a0f-3da1-471f-bd96-145571e29d72',
27 title: 'Six Item',
28 },
29 {
30 id: '58694a0f-3da1-471f-bd96-145571e29d72',
31 title: 'Seven Item',
32 },
33 {
34 id: '58694a0f-3da1-471f-bd96-145571e29d72',
35 title: 'Eight Item',
36 },
37 {
38 id: '58694a0f-3da1-471f-bd96-145571e29d72',
39 title: 'Nine Item',
40 },
41 {
42 id: '58694a0f-3da1-471f-bd96-145571e29d72',
43 title: 'Ten Item',
44 },
45];
46
47const Item = ({ title }) => (
48 <View style={styles.item}>
49 <Text style={styles.title}>{title}</Text>
50 </View>
51);
52
53const App = () => {
54 const [isScrollEnabled, setIsScrollEnabled] = useState(false);
55 const renderItem = ({ item }) => (
56 <Item title={item.title} />
57 );
58
59 useEffect(() => {
60 setTimeout(() => {
61 setIsScrollEnabled(true);
62 }, 3000);
63 }, []);
64
65 return (
66 <SafeAreaView style={styles.container}>
67 <FlatList
68 data={DATA}
69 scrollEnabled={isScrollEnabled}
70 renderItem={renderItem}
71 keyExtractor={item => item.id}
72 />
73 </SafeAreaView>
74 );
75}
76
77const styles = StyleSheet.create({
78 container: {
79 flex: 1,
80 marginTop: StatusBar.currentHeight || 0,
81 },
82 item: {
83 backgroundColor: '#f9c2ff',
84 padding: 20,
85 marginVertical: 8,
86 marginHorizontal: 16,
87 },
88 title: {
89 fontSize: 32,
90 },
91});
92
93export default App;
  • Try it yourself

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

Thanks for reading…

Follow me on Twitter

Join our email list and get notified about new content

No worries, I respect your privacy and I will never abuse your email.

Every week, on Tuesday, you will receive a list of free tutorials I made during the week (I write one every day) and news on other training products I create.

Looking For React Native Tutorial?

we are trying to create the best Tutorial for react native developers.

When you want a daily updates about React Native Tutorial or infinitbility update subscribe to our newsletter.

Read React Native Tutorial

Request New Tutorial or Article on mail [email protected]

Guide book

Guidebook: The Javascript Monorepo

Tutorials

Categories

More articles from Infinitbility

How to disable button after one click in react native?

How to disable button after one click in react native?

React Native, Disable button after one click on it example.

January 3rd, 2022 · 1 min read
How to set current date in datepicker in react native?

How to set current date in datepicker in react native?

React Native, Set current date in react-native-datepicker example.

January 2nd, 2022 · 1 min read
© 2020–2022 Infinitbility
About
Link to $https://medium.com/infinitbilityLink to $https://www.facebook.com/InfinitbilityLink to $https://github.com/infinitbilityLink to $https://twitter.com/infinitbilityLink to $https://www.buymeacoffee.com/infinitbilityLink to $mailto:[email protected]