FlatList moves/drags in all directions

When I click on my FlatList I can drag and move it in all directions (up/down/right left). Although the list appears to be vertical (maybe because of the styling), the scroll bar still appears horizontally. How can I disable this dragging?

This is how I am using the FlatList:

<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}            />

This is from the FriendItem's return

  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 for FriendItem:

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

I also tried removing the TouchableOpacity but it made no difference.