Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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; 
like image 644
sushil bansal Avatar asked May 15 '17 20:05

sushil bansal


People also ask

How do I disable scroll view indicator in React Native?

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.

How do I change the scrollbar color in React Native?

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.


2 Answers

Just add

showsHorizontalScrollIndicator={false} 
like image 138
Kawatare267 Avatar answered Oct 10 '22 18:10

Kawatare267


disable vertical and horizontal scroll indicator

<ScrollView   showsVerticalScrollIndicator={false}   showsHorizontalScrollIndicator={false}  /> 
like image 29
Muhammad Numan Avatar answered Oct 10 '22 18:10

Muhammad Numan