I am trying to clone TikTok comments modal (see gif below) where users should be able to scroll down to view more comments and once they scroll up and reach the top, they modal will be pulled down instead.
In my code, I enclosed the FlatList with PanGestureHandler. Currently, once the user reach the top of the comments and tried to swipe down, the modal does not move.
You can check the scroll value and on the basis of this value, you can apply the scroll down condition. Use this in FlatList and set state accordingly.
Hopefully, this will help you a lot
onMomentumScrollEnd={(event) => {
if(event.nativeEvent.contentOffset.y > 105){
setselectedbutton(2)
}else if(event.nativeEvent.contentOffset.y < 105){
setselectedbutton(1)
}
}}
you can use https://github.com/gorhom/react-native-bottom-sheet, this repo provide a BottomSheetFlatList which is exactly what you need
Related
Description:
We are creating a component similar like Instagram where we have a Posts screen and Messaging screen. When perform swipe from right to left, screen navigates from Posts screen to Messaging screen.
For swiping, we are using #react-navigation/material-top-tabs
In Messaging screen, Flatlist component is used to show conversations list where react-native-gesture-handler/Swipeable is used to show controls which are delete and mute button when user performs "right to left" swipe similar like Instagram which is working 100% fine but when trying to navigating back to post screen using left to right swipe on Flatlist then react-native-gesture-handler/Swipeable gesture executes and their "onSwipeableOpen" callback calls which should not execute so that smoothly translation should be perform from Messaging to Post Screen.
As well as there is no way to disable left to right swipe on FlatList. Is there any solution/ workaround or any suggestion to achieve this task?
Thank you in advance
you should be able to detect Left swipe and right swipe in onSwipeableOpen
//onSwipeableOpen?: (direction: 'left' | 'right') => void;
onSwipeableOpen(direction){
//check direction here
if(direction == 'left') return
//do your operations
}
And if you don't pass renderLeftActions to Swipeable then it will be disabled for Left Swipe.
Please can someone help me on how to make my react native app detect when a user swipes left or right? I already researched randomly but seem not to have a positive answer.
So any function or package that can help?
I am mapping through a list of objects and I want the user to view next object in array whenever he swipes ( just like on click ).
It works with onClick but I need it with swipes.
It depends on what you want to do, you can create a carousel using a horizontal Flatlist and use pagination to swipe elements. Please add more details
Try PanResponder from the docs here
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 ?
Now I want to create, exactly like Facebook's app do, a bar displayed above my tabNavigator. This tabs hide on scroll down and show on scroll up.
And now I'm using FlatList, but the FlatList component has ListHeaderComponent option for rendering his header who also hide when scrolling down. (because it is on top, so need to scroll to beginning to see it, not user-friendly with my very long list item )
Please help me any idea.
Flat list provide you a header and footer of it self. You have to make it manually. I found one link which is related to collapsible navbar.
https://medium.com/appandflow/react-native-collapsible-navbar-e51a049b560a
https://expo.io/#janic/collapsible-navbar this lnk has a demo. so you can check it out here
might this helpful !
I'm using Vuetify's toolbar scrolling techniques feature on a SPA that needs to scroll to the top of a container between each page transition. When I trigger this via javascript using scrollTop, the scroll works fine, but it doesn't seem to let Vuetify know that a scroll up has occurred and as a result the primary toolbar is missing. If a particular page isn't long enough to require a scroll, it becomes impossible to regain the primary toolbar.
Any suggestions on how I can scroll the user to the top of the container from javascript AND have Vuetify move the primary toolbar back into place would be much appreciated.
<v-toolbar :scroll-off-screen="true" :scroll-target="'#scrolling-techniques'">
https://codepen.io/developerplus/pen/mBbjBq
I've attached a codepen link demonstrating the issue. Once scrolled down to the bottom of the container, if the "Scroll to Top" button is clicked, i'd expect it to both take me to the top of the container, and reveal the primary menu.
I found a solution to my question. If you refer to the codepen in the question, you'll notice the example is now working. What was required was the following:
let event = new CustomEvent('scroll')
container.pageYOffset = 0
setTimeout(() => {
container.scrollTop = 0
})
container.dispatchEvent(event)