'Hide scrollbar in FlatList (React Native) in Android

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;

react-native react-native-flatlist

Solution 1:^[1]

disable vertical and horizontal scroll indicator

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

Solution 2:^[2]

Just add

showsHorizontalScrollIndicator={false}

Solution 3:^[3]

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

showsVerticalScrollIndicator={false}

Solution 4:^[4]

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

Solution 5:^[5]

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}

Solution 6:^[6]

Hide vertical scroll bar

showsVerticalScrollIndicator={false}

Hide horizontal scroll bar

showsHorizontalScrollIndicator={false}

(Add theses props in your FlatList component.)

Solution 7:^[7]

<ScrollView showsVerticalScrollIndicator ={false}/>

Solution 8:^[8]

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

Solution 9:^[9]

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

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1
Solution 2	Kawatare267
Solution 3	ilibilibom
Solution 4	gmj
Solution 5	Atif Mukhtiar
Solution 6	Gimnath
Solution 7	wahyu setiawan
Solution 8	Rahman Haroon
Solution 9	MUKESH BUWADE

'Hide scrollbar in FlatList (React Native) in Android

Solution 1:[1]

Solution 2:[2]

Solution 3:[3]

Solution 4:[4]

Solution 5:[5]

Solution 6:[6]

Solution 7:[7]

Solution 8:[8]

Solution 9:[9]