I am using a FlatList in my code like this:
<View style={styles.listHolder}> {data && (<FlatList data={data.me.friends.nodes} horizontal={false} scrollEnabled renderItem={({ item }) => (<FriendItem friend={item} originatorId={data.me.id}/> )} keyExtractor={(item) => item.id.toString()} ListEmptyComponent={NoFriendsContainer} /> )} {error && <ErrorContainer />}</View> listHolder: { width: '100%', alignItems: 'center', },Each of the FriendItem looks somewhat like this:
return (<View style={styles.item}><TouchableOpacity onPress={() => navigation.navigate('FriendDetails', { firstName: friend.firstName, rating: friend.rating, numberOfFriends: friend.friendsOfFriends?.totalCount, //onDeleteFriend: onDeleteFriend, vehicles: friend.vehicles, }) }><Thumbnail style={styles.thumbnail} source={{ uri:'https://cdn4.iconfinder.com/data/icons/avatars-xmas-giveaway/128/afro_woman_female_person-512.png', }} /></TouchableOpacity><View style={styles.nameContainer}><Text style={styles.userName}>{userName}</Text></View><View style={styles.deleteButtonContainer}><Button rounded style={styles.deleteButton} onPress={() => onDeleteFriend(originatorId, friend.id)}><Icon name="trash-o" size={moderateScale(20)} color="black" /></Button></View></View> );};export const styles = StyleSheet.create({ item: { backgroundColor: 'white', borderRadius: moderateScale(20), padding: moderateScale(20), marginVertical: moderateScale(8), marginHorizontal: 16, height: moderateScale(110), width: moderateScale(360), justifyContent: 'space-between', flexDirection: 'row', }, userName: { paddingRight: 55, paddingLeft: 10, paddingTop: 20, }, deleteButton: { backgroundColor: '#31C283', width: moderateScale(45), justifyContent: 'center', }, deleteButtonContainer: { paddingTop: 12, marginRight: 2, }, thumbnail: { height: 85, width: 85, marginLeft: 2, paddingRight: 0, position: 'relative', }, nameContainer: { flexDirection: 'row', },});Now the problem is that the FlatList is rendered vertically but its scroll bar is shown horizontally (which shouldn't happen). Additionally, I can move it in any direction right now. This should also not happen. I must fix it as it is. How can I do so? I am not sure if this is a styling issue or something in the FlatList component.
