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 ScrollView and FlatList default show indicator on right and bottom when use scroll view. React Native ScrollView and FlatList provide showsVerticalScrollIndicator and showsHorizontalScrollIndicator to hide or remove scroll indicator and both are true default, we have to pass as false to hidel scrollbar.
You can use indicatorStyle props of ScrollView for change color, but it supports only three color white, black or default. You can set insets of the indicator using scrollIndicatorInsets props. For more custom style you can use react-native-scroll-indicator.
Just add
showsHorizontalScrollIndicator={false}
disable vertical and horizontal scroll indicator
<ScrollView showsVerticalScrollIndicator={false} showsHorizontalScrollIndicator={false} />
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With