FlatList with onLongPress callback - react-native

I have a Flatlist that I would like to empty when the user long presses it.
The problem is that surrounding the Flatlist with a TouchableOpacity prevents scrolling.
I also cannot surround each item with a Touchable opacity because it's a list with columns and an uneven number of items. This means that at the bottom of the list, there is a leftover area with no items rendered.
This leftover area should still react to the long press (as it is where most users will try to long press).
How can I achieve that?

Related

React-Native: How to take control of flatList scroll using a gesture responder?

What I am trying to accomplish:
I have a horizontal flatlist (with pagination: true) and I would like to animate the scrolling depending on where on the y axis the user started swiping from.
If the scrolling started from the upper half of the flatlist then its border would animate to a certain color, otherwise it would switch to a different color, and depending on the scroll start position I would call a different function when the next index when the next index is scrolled to.
My question:
So is it possible to use a gesture responder (from react-native-gesture-handler) to handle the scrolling instead of relying on the built in responder of flatList?
for example: calling scrollToOffset repeatedly from inside my gesture responder or set a "current scroll position" prop with an animated value and pass it to the flatList component? no matter what I try I get bombarded with obscure error messages so I was wondering if it is even possible.

React Native (Flatlist)

Is there any way to set when the flatlist should become scrollable, I don't want my list items to get all the way to the bottom of the screen. I want it to start scrolling at a certain point in the array.

How to get textInput component's selection and number of lines at the same time in React native?

It is possible to get the selection position using onSelectionChange method.
It is also possible to use onLayout method to get the height of TextInput component, which can be used to calculate number of lines.
However, how can I get the selection and number of lines at the same time?
What I am trying to create here is a TextInput component inside a ScrollView. Users would like the ScrollView to scroll to end only when selection end equals the number of lines. However, these two events got shot quite randomly.

How can i click components behind modal when modal is opening in react native

I want to do this layout:
Currently I do the layout by this way:
menu is belong to the below part and i marginTop: -30 for it to above the image
FlatList is absolute view and have zIndex bigger than Menu. FlatList have dynamic data and each item of FlatList have textInput to search data ( look at this pic )
I have tried 2 ways:
First way:
I used for the list filtered data, it is limited by the Flatlist area so that my filtered list cannot display fully, just 2 rows visible, the rest of filtered data is invisible. I have tried increase the height of the Flatlist and now I can see the filtered list fully but I cannot click the menu button because menu is overived by the Flatlist,
Second way
I use Modal and tried with this library: react-native-modal-dropdown, I can reach my expertation UI but because it use Modal so when Modal is appearing, my textInput in Item is loss focus, so that I cannot continually input to TextInput until I close the Modal.
Do you guys have any solution for it? Thanks in advance
The modal component use the native Modal, you won't be able to interact with elements outside it while it is still visible.
I am not sure to understand why you cannot use View to display the results, but maybe you could try with FlatList ?

React Native Flatlist inside ScrollView

I am trying to develop a profile screen which has the persons profile pic, name, etc in the header as well as tabs that determines which data gets displayed in the FlatList below. I want the header component to be scrollable with the FlatList so that the header does not take up screen space while scrolling the FlatList. Also, the header's tabs will change the data that gets render in the list. I have tried two approaches but neither one has worked. Including the header and flatlist inside of a scrollview causes the flatlist to continually call onEndReach until all of the data is returned, but I also read that this is not recommended. The second approach was setting the ListHeaderComponent on the flatlist to the header component, but every time a tab is change the entire screen reloads. I am looking to have the header scrollable as if it were part of the flatlist, and only the flatlist re-render when a tab is pressed. Similar to what Instagram has with their profile screen. Any help with this issue would be much appreciated.