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;

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

285

Just add

showsHorizontalScrollIndicator={false}

answered May 16 '17 at 03:41

Kawatare267

4,168
3
16
16

12

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

@sushilbansal because this prop inherits from ScrollView, not necesary to re-documentate.... – user2976753 Oct 10 '18 at 01:30
Thx, works with both `FlatList` and `ScrollView` – Evgen Filatov Mar 01 '23 at 15:40

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

176

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

23,222
6
63
80

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

32

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

showsVerticalScrollIndicator={false}

answered Jan 28 '20 at 15:31

ilibilibom

497
4
9

Honey · Answer 4 · 2023-02-05T23:18:13.417

23

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}
  ...
/>

edited Feb 05 '23 at 23:18

answered Jan 22 '21 at 09:07

Honey

2,208
11
21

score 8 · Answer 5 · edited Aug 06 '22 at 03:12

8

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} />

edited Aug 06 '22 at 03:12

Olcay Ertaş

5,987
8
76
112

answered Jun 01 '17 at 11:06

Atif Mukhtiar

1,186
9
11

score 1 · Answer 6 · answered Aug 06 '22 at 03:14

1

On my case using Animated version of the Flatlist fixed the problem:

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

answered Aug 06 '22 at 03:14

Olcay Ertaş

5,987
8
76
112

score 1 · Answer 7 · answered Jun 16 '23 at 09:20

1

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

Just add this code

answered Jun 16 '23 at 09:20

Md Mahir

81
5

Hide scrollbar in FlatList (React Native) in Android

7 Answers7