在 FlatList 中仅禁用水平滚动

Question

How can I disable only horizontal scrolling on my FlatList? Putting it to false doesnt work. I want to be able to scroll it vertically but not horizontally.

<FlatList
              data={data.me.friends.nodes}
              //horizontal={false}
              //scrollEnabled={false}
              renderItem={({ item }) => (
                <FriendItem friend={item} originatorId={data.me.id}/>
              )}
              keyExtractor={(item) => item.id.toString()}
              ListEmptyComponent={NoFriendsContainer}
            />

FriendItem's return. FriendItem is the renderItem which is being used in the FlatList:

  return (
    <View style={styles.item}>
      <TouchableOpacity
        onPress={() =>
          navigation.navigate('FriendDetails')
        }>
        <Thumbnail
          style={styles.thumbnail}
          source={{
            uri:
              'https://cdn4.iconfinder.com/person-512.png',
          }}></Thumbnail>
      </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>
  );
};

Styles:

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',
  },
});

Edit:

When there are 4 items, it seems to be okay but as soon as another item is added to the list, the last item is disturbed and is overlapped with the footer? of the app.

It should actually be behind it so that we can scroll down and see the next items.

Answer 1

horizontal parameter is not related to horizontal scroll.

https://reactnative.dev/docs/flatlist#horizontal

If true, renders items next to each other horizontally instead of stacked vertically.

Your 'scroll issue' is your FriendItem , the issue is the width: moderateScale(360) .

If you want your item be full width, with margin, you can just remove it.

Example with moderateScale(360)

Example removing width

 item: {
      backgroundColor: "white",
      borderRadius: moderateScale(20),
      padding: moderateScale(20),
      marginVertical: moderateScale(8),
      marginHorizontal: 16,
      height: moderateScale(110),
      justifyContent: "space-between",
      flexDirection: "row",
    }

Hope it helps you. Regards,