Hide scrollbar in FlatList (React Native) in Android

sushil bansal picture sushil bansal · May 15, 2017 · Viewed 64.4k times · Source

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;

Answer

Kawatare267 picture Kawatare267 · May 16, 2017

Just add

showsHorizontalScrollIndicator={false}