Hide scrollbar in FlatList (React Native) in Android

Question

I am trying to use FlatList (React-native) in my app. I am using it horizontally and can see the scrollbar. There is an option in ScrollView to hide the scrollbar but not in FlatList. Has anyone been able to hide it some other way. I tried using the solution of parent & child container (Hide scroll bar, but still being able to scroll) but did not work.

import React, { Component } from 'react';
import { Text, View, FlatList, StyleSheet, ScrollView } from 'react-native';
import { Card, Button } from 'react-native-elements';

const data = [
    { id: 1, title: 'title 1', details: 'details 1 details 1 details 1' },
    { id: 2, title: 'title 2', details: 'details 2 details 2 details 2 details 2 details 2 details 2' },
    { id: 3, title: 'title 3', details: 'details 3 details 3' },
    { id: 4, title: 'title 4 title 4', details: 'details 4' },
];
class CategoryRow extends Component {

    _keyExtractor = (item, index) => item.id;

    _renderItem = (item) => {
        return (
            <Card style={styles.cardContainer}>
                <Text>{item.title}</Text>   
                <Text>{item.details}</Text> 
            </Card>
        );
    }

    render() {
        return (
            <View style={{ flex: 1, overflow:'hidden' }}>
                <View style={{ overflow:'hidden' }}>
                    <Text>Category 1</Text>
                    <FlatList
                        horizontal
                        data={data}
                        renderItem={({ item }) => this._renderItem(item)}
                        keyExtractor={this._keyExtractor}

                    />
                </View>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    cardContainer: {
        width: 140,
        height: 150,
        borderWidth: 0.5,
        borderColor: 'grey',
        overflow: 'scroll',
    },
})

export default CategoryRow;

try `showsHorizontalScrollIndicator={false}` – Ray May 15 '17 at 22:08 — Ray, May 15 '17 at 22:08
for vertical try: showsVerticalScrollIndicator={false} – maheshsgr Jul 19 '18 at 14:42 — maheshsgr, Jul 19 '18 at 14:42

score 239 · Answer 1 · answered May 16 '17 at 03:41

239

Just add

showsHorizontalScrollIndicator={false}

answered May 16 '17 at 03:41

Kawatare267

3,628
2
15
16

10

It worked but it is not mentioned in the official document as the prop for FlatList. – sushil bansal May 16 '17 at 08:24
9

@sushilbansal because this prop inherits from ScrollView, not necesary to re-documentate.... – user2976753 Oct 10 '18 at 01:30
@user2976753 is there anything for SafeAreaView! – Alauddin Ahmed Oct 18 '19 at 14:47

Muhammad Numan · Accepted Answer · 2021-01-24T18:01:39.517

126

disable vertical and horizontal scroll indicator

<ScrollView
  showsVerticalScrollIndicator={false}
  showsHorizontalScrollIndicator={false}
 />

edited Jan 24 '21 at 18:01

answered May 13 '20 at 06:57

Muhammad Numan

17,689
4
42
65

Thanx a lot, it was really fast solution! – jE Droid Jun 01 '22 at 08:15

score 28 · Answer 3 · answered Jan 28 '20 at 15:31

28

If you are trying to hide the vertical scrollbar use this:

showsVerticalScrollIndicator={false}

answered Jan 28 '20 at 15:31

ilibilibom

458
4
9

score 14 · Answer 4 · answered Jan 22 '21 at 09:07

FlatList is inherited from VirtualizedList.
VirtualizedList is inherited from ScrollView.
So you can use ScrollView props to hide scrollBar indicators in FlatList.

<FlatList
  ...
  showsVerticalScrollIndicator ={false}
  showsHorizontalScrollIndicator={false}
  ...
/>

score 7 · Answer 5 · answered Jun 01 '17 at 11:06

try this to make ListView horizontal add (horizontal={true}) mentioned below and if you just want to hide the scrollbar just add (showsHorizontalScrollIndicator={false})

<ListView showsHorizontalScrollIndicator={false}
                      horizontal={true}

/>

score 4 · Answer 6 · answered Jul 22 '20 at 03:31

4

Hide vertical scroll bar

showsVerticalScrollIndicator={false}

Hide horizontal scroll bar

showsHorizontalScrollIndicator={false}

(Add theses props in your FlatList component.)

answered Jul 22 '20 at 03:31

Gimnath

518
5
11

score 2 · Answer 7 · answered Oct 20 '20 at 13:02

2

<ScrollView showsVerticalScrollIndicator ={false}/>

answered Oct 20 '20 at 13:02

wahyu setiawan

55
1
5

score 1 · Answer 8 · answered Jun 28 '21 at 08:25

1

In both FlatList and ScrollView you can add showsHorizontalScrollIndicator={false} prop

answered Jun 28 '21 at 08:25

Rahman Haroon

858
2
9
27

score 0 · Answer 9 · answered Apr 18 '22 at 07:57

Flatlist also provides showsHorizontalScrollIndicator and showsVerticalScrollIndicator props to handle scroll indicator. try this example:

<FlatList
                    showsHorizontalScrollIndicator={false}
                    showsVerticalScrollIndicator
                    horizontal
                    data={data}
                    renderItem={({ item }) => this._renderItem(item)}
                    keyExtractor={this._keyExtractor}
                />

Hide scrollbar in FlatList (React Native) in Android

9 Answers9