How to hide the scrollbar in a FlatList with React Native in Android?

Sometimes, we want to hide the scrollbar in a FlatList with React Native in Android.

In this article, we’ll look at how to hide the scrollbar in a FlatList with React Native in Android.

How to hide the scrollbar in a FlatList with React Native in Android?

To hide the scrollbar in a FlatList with React Native in Android, we can set the showsVerticalScrollIndicator and showsHorizontalScrollIndicator props to false.

For instance, we write:

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

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

const Item = ({ title }) => (
  <View>
    <Text>{title}</Text>
  </View>
);

const App = () => {
  const renderItem = ({ item }) => <Item title={item.title} />;

  return (
    <View>
      <FlatList
        style={{ height: '200px' }}
        showsVerticalScrollIndicator={false}
        showsHorizontalScrollIndicator={false}
        data={DATA}
        renderItem={renderItem}
        keyExtractor={(item) => item.id}
      />
    </View>
  );
};
export default App;

to add a FlatList with the showsVerticalScrollIndicator and showsHorizontalScrollIndicator props set to false to hide the vertical and horizontal scrollbar respectively.

Conclusion

To hide the scrollbar in a FlatList with React Native in Android, we can set the showsVerticalScrollIndicator and showsHorizontalScrollIndicator props to false.