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.
Related
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
I'm using React native drawer navigation, when you swipe out from the left or right - it opens the drawer.
Does anyone know a way of changing the gesture start point, so that it starts slightly further into the screen?
My users are finding on curved screens it doesn't always drag out and feels un-natural to use.
I've looked through the documentation and couldn't find anything there.
Thank you!
Use edgeWidth props in react-navigation drawer.
edgeWidth-
Allows for defining how far from the edge of the content view the swipe gesture should activate.
For more details https://reactnavigation.org/docs/drawer-navigator/#edgewidth
In this fantastic video, made by William Candillon from http://start-react-native.dev he shows how to make this off-screen menu. Code can be found here: https://github.com/wcandillon/can-it-be-done-in-react-native/tree/master/the-10-min/src/Menu
My question is, would it be possible to create a function that can close the profile screen programmatically instead of the user swiping on the profile card.
Preferably, it closes with the animation, but a plan B could be to just gracefully return the state of the animation back to the starting point. A general function that can fake a swipe would be awesome.
Thanks in advance!
So I have a react-native app which is using react-native-navigation.
Whenever I click a card in my app, it pushes me the card screen.
What I want to achieve is the following: when swiping down from that screen, as you swipe down the screen gets smaller and the other one is in the background, but I haven't found anything that can help me with that, any packages? Also, I'd have to pop the current screen to have the other one the background, but if I pop it, the current screen can't stay and get smaller as i swipe down.
So basically I need to animate a component pop.
If you haven't figured it out yet, you could show the card screen as an overlay or modal and add a swipe-down gesture to the Container component of the screen and when it reaches the bottom, you could dismissOverlay or dismissModal with no animation.
I am developing my first React Native + Redux app. In my app I want to develop something similar to the friends requests slider of facebook:
There is a slider (left/right) where you can see the current content in a box and a little bit of the next and preview item. When swiping up or tap the content should be come to "full screen". Swiping left or right is disabled in full screen.
Only the current and maybe the two next and the two previous slides should be loaded but I think thanks to redux this is not a big deal.
Which components should I use for this?
A simple way to approach this might be to use a library like react-native-swiper for the swiping component and then use LayoutAnimation to animate the subview into the full screen view, taking care to remove the name in the header/etc.