FlatList hides on scrolling

I am using a FlatList which may have only one item or many items. However, when I only have one item, I would prefer it to be fixed somehow. Currently, if I hold it and scroll it down, it starts to hide. How can I fix this?

If I use scrollEnabled={false} then it becomes inconvenient in cases where I have multiple Items from the FlatList because then I cannot scroll the screen and see the remaining items.

<View style={styles.listHolder}>          {data && <FlatList            data={data.me.pendingUserRelationsRequestsSent.nodes}            horizontal={false}            renderItem={({ item }) => (<UserItem                user={item}                originatorId={data.me.id}              />            )}            keyExtractor={(item) => item.id.toString()}            ListEmptyComponent={NoRequestsContainer}          />            }          {error && <ErrorContainer />}</View>  listHolder: {    width: '100%',  },

UserItem.tsx

 return (<View style={styles.item}><Thumbnail          style={styles.thumbnail}          source={{            uri:'https://cdn4.iconfinder.com/afro_woman_female_person-512.png',          }}></Thumbnail><View style={styles.nameContainer}><Text style={styles.userName}>{userName}</Text></View><View style={styles.buttonContainer}><Button          rounded          style={styles.cancelButton}          onPress={() => onCancelRequest(originatorId, user.id)}><Icon name="close" 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: {    paddingTop: 20,  },  buttonContainer: {    paddingTop: 12,    marginRight: 2,    flexDirection: 'row',    justifyContent: 'space-between',  },  cancelButton: {    backgroundColor: '#e8403a',    width: moderateScale(45),    justifyContent: 'center',  },  thumbnail: {    height: 85,    width: 85,    marginLeft: 2,    paddingRight: 0,    position: 'relative',  },  nameContainer: {    flexDirection: 'row',    paddingRight: 30,  },});

Since I drag it down, a lot of space comes on its top too. That shouldn't happen either.