source - Ocultar barra de desplazamiento en FlatList(React Native) en Android

react-native-snap-carousel example

Question

Estoy tratando de usar FlatList (React-native) en mi aplicación. Lo estoy usando horizontalmente y puedo ver la barra de desplazamiento. Hay una opción en ScrollView para ocultar la barra de desplazamiento pero no en FlatList. ¿Alguien ha podido ocultarlo de otra manera? Intenté usar la solución del contenedor principal y secundario ( Ocultar barra de desplazamiento, pero aún así pude desplazarme ) pero no funcionó.

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 1

Solo agrega

showsHorizontalScrollIndicator={false}

Answer 2

intente hacer esto para agregar ListView horizontal (horizontal = {verdadero}) mencionado abajo y si solo desea ocultar la barra de desplazamiento solo agregue (muestraHorizontalScrollIndicador = {falso})

<ListView showsHorizontalScrollIndicator={false}
horizontal={true}

/>