skipperlla / rn-swiper-list Goto Github PK
View Code? Open in Web Editor NEW⚡ Lightning fast and customizable tinder-like swiper for React Native
Home Page: https://www.npmjs.com/package/rn-swiper-list
License: MIT License
⚡ Lightning fast and customizable tinder-like swiper for React Native
Home Page: https://www.npmjs.com/package/rn-swiper-list
License: MIT License
When I have 70+ cards, it seems to slow down a lot. Is there a way to optimize it like in Flatlist so that only ~3 cards are rendered at a given time?
I want to apply Opacity like when we are swipe left/right the card then previous card should be animate with opacity.
Hello !
Thank you for the major upgrade !
I saw that using a single card on a flatList
is now possible on your readme but I don't see any example.
I think we must use SwiperCard
and use it as a item on the flatList
but this component can't be imported on my project, it seems that this element is missing an export.
Can you tell me what I need to do ?
Thanks !
It would be really nice if we could configure this (current behaviour is too fast/too snappy I think):
const userConfig = {
damping: 15,
stiffness: 120,
mass: 0.5,
overshootClamping: false,
restDisplacementThreshold: 0.001,
restSpeedThreshold: 0.001,
};
Hi, thanks for your work. Is it possible to support tap events for children elements, for example, show multiple images?!
Swiping is really hard in real device.
I want to swipe left and right when user swipe the card almost 50% or 40%. how that's possible.
rn-tinder-card
did have such functionality :)
Im trying to identify a way to cycle through all the items and then to cycle back to the beginning. Im happy to make the change and PR it in but cant quite work out where to start with it
Thanks for awesome library.
I just ran your example and run it on web npx expo start --web
.
However, the card item still appears after swiping down, and it makes the parent height change.
My like and día like (swipe right and left) buttons aremos outside the array map, How can I get the active index card to use swipe methods?
Hey, can You add prop in this functions onSwipeStart?: () => void; onSwipeEnd?: () => void; onSwipeActive?: () => void;
which side gesture is going?
Something like this? onSwipeStart?: (cardIndex, 'left' | 'right' | 'top', percentage) => void; onSwipeEnd?: (cardIndex, 'left' | 'right' | 'top', percentage) => void; onSwipeActive?: (cardIndex, 'left' | 'right' | 'top', percentage) => void;
Swipe percentage would be cool too, swiping card by half to side and callback func receive 50% etc. :D
Hi!
First of all, thank you so much for your library and amazing work behind it!
I have a question about typescript issue I get after upgrading to v2.0.2 (might be unrelated, but worth to mention). I migrated the code to Swiper and now type check fails with this error:
error TS2786: 'Swiper' cannot be used as a JSX component.
Its return type 'ReactNode' is not a valid JSX element.
Type 'undefined' is not assignable to type 'Element | null'.
140 <Swiper
~~~~~~
As I understand, since Swiper's type might be undefined, it's incompatible with expected by JSX 'Element | null' type
const Swiper: <T>(props: SwiperOptions<T> & React.RefAttributes<{
swipeRight: () => void;
swipeLeft: () => void;
swipeBack: () => void;
swipeTop: () => void;
} | undefined>) => React.ReactNode
import Swiper
My guess is changing SwiperCardRefType
to .. | null
instead of .. | undefined
should address that, but I'm not sure.
Would love to hear your thoughts and can help bringing the fix!
First of all thank you for the amazing package, This is beautiful and working fine for most options.
However I think having a callback that provides current active index will be helpful as currently I tried to manage index by saving value of index on onSwipeLeft
and onSwipeRight
but the thing is there are still scenarios like currently there is no callback for onSwipeBack
.
I also looked whether we are getting onSwipeEnd
or other methods triggered when using ref.current?.swipeBack();
but obviously as we are not using gesture it is not getting triggered. and even if it was triggered then also currently onSwipeEnd
is not returning the index.
So I think if we can have something like onChangeIndex
or similar that will be really helpful.
I can also help with the implementation and PR.
Please, can you add the amount of the swipe to the onSwipeActive event? I would like to add an animation that is played based on the swipe but at the moment I have not found any way to derive this value.
Thankyou 🙏🏻
How do we make this work in react-native-web
?
When I add FlatList
, pinar
, any images carousel
with direction horizontal inside renderCard
then swiper is too laggy.
I'm rendering 20 cards and its sometimes stuck in 10th card in SUMSUNG S23 Ultra
I want to slow down the speed of the swipe animations, how can I do this?
I have just updated to 2.0.2 as I have realized that there is a memory leak in the previous version ("rn-tinder-card": "1.6.0",), even if manually calling gc
.
However, it seems to me 2.0.2 also does have this problem. When looking at the demo mp4 in the README: it starts from 209MB and after 30 sec it has 214MB. The problematic thing is that using swipeBack
and any swipe again clearly leads to more and more memory too.
@Skipperlla
Any ideas where to start? I'd like to help with this as I need functionality provided by this lib asap. :)
Hello. I tried following the example in the repo . I used useState to store data and changed onSwipedRight and onSwipedLeft callbacks to update the state. The view gets re-rendered but it's empty
Here's my code
export default function App() {
const [data,setData] = React.useState( [
'https://images.unsplash.com/photo-1681896616404-6568bf13b022?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1335&q=80',
'https://images.unsplash.com/photo-1681871197336-0250ed2fe23d?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1287&q=80',
])
const loadData = (index) => {
if(index == 0) {
console.log("loading data")
setData([
'https://images.unsplash.com/photo-1681238091934-10fbb34b497a?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1282&q=80',
])
}
}
return (
<View style={{ flexDirection: "column", display: "flex", flex: 1, backgroundColor: "#14110f" }} >
<GestureHandlerRootView style={styles.wrapper} >
{data.map((item, index) => {
console.log(item)
return (
<View
style={styles.cardContainer}
pointerEvents="box-none"
key={index}
>
<TinderCard
cardWidth={338}
cardHeight={600}
cardStyle={styles.card}
onSwipedRight={() => {
loadData(index)
}}
onSwipedLeft={() => {
loadData(index)
}}
>
<ImageBackground source={{ uri: item }} style={styles.image} >
<View style={{ position: 'absolute',height:"100%",width:"100%", justifyContent:'flex-end', alignItems: 'center',paddingBottom:20, backgroundColor: 'rgba(0,0,0, 0.40)' }}>
<Text>Title goes here</Text>
</View>
</ImageBackground>
</TinderCard>
</View>
);
})}
</GestureHandlerRootView>
</View>
);
}
I have ommited the imports and styling as that's unrelated to the issue.
BTW great library, thanks for making it!
Hi there!
I am wondering how capturing events of children currently possibly or how to improve. Maybe possible with these steps below, but not otherwise?
PanGestureHandler
(to use that ref in children's simultaneousHandlers
)simultaneousHandlers
of the used PanGestureHandler
@Skipperlla WDYT?
Feature request
Our users don't instinctively understand that the the cards can be swiped upon app launch. Could we implement a sort of "demo" card swipe animation for the component, indicating the swipe gesture?
i tested on ios, it works fine on ios simulator
But on android the card doesn't move when i touch and drag it, the card only moves when i press the button(like the heart button)
Do you know what the problem is?
Hi there @Skipperlla !
Just wondering if you've encountered the following problem while you were migrating to v2: from Reanimated 2.14 to Reanimated 3. My issue is that after updating to Reanimated 3, if I use your lib on 1.x there is a little bit of flickering / lagging (with 10-20% chance) when I start to drag a card. The whole card jumps from the current dragged position back to a couple of millisec before and then back to the recent/valid dragged position, then continous its journey properly...
This is 100% due to the reason I updated to Reanimated 3 (to get rid of useAnimatedStyle
which caused memory leak), I made no other changes. I also tried to update react-native-gesture-handler
and mimic your recent code from v2, but this flickering / lagging is still there.
Have you run into that issue? I am just wondering how can I solve that without restructuring my codebase to be able to use v2 if that's possible.
Hi!
I have a problem with passing the updated data array when re-entering the screen where I use your list. Being on screen 1, I click on the second photo, move to screen 2 where I use your list, click the heart to change the attribute in the data array on screen 1 using Redux, go back to screen 1, and see the heart on the second photo. When I want to view this photo again, I click on it to go back to screen 2, and a Reanimated library error pops up. I suspect that the list keeps certain values that do not reset. Sometimes an error with the description appears - [Reanimated] Tried to modify key ${key}
of an object which has been already passed to a worklet. See
https://docs.swmansion.com/react-native-reanimated/docs/guides/troubleshooting#tried-to-modify-key-of-an-object-which-has-been-converted-to-a-shareable
for more details.[
]
System:
OS: macOS 14.5
CPU: (11) arm64 Apple M3 Pro
Memory: 87.22 MB / 18.00 GB
Shell:
version: "5.9"
path: /bin/zsh
Binaries:
Node:
version: 22.2.0
path: /opt/homebrew/bin/node
Yarn:
version: 1.22.22
path: /opt/homebrew/bin/yarn
npm:
version: 10.7.0
path: /opt/homebrew/bin/npm
Watchman:
version: 2024.05.06.00
path: /opt/homebrew/bin/watchman
Managers:
CocoaPods:
version: 1.15.2
path: /usr/local/bin/pod
SDKs:
iOS SDK:
Platforms:
- DriverKit 23.5
- iOS 17.5
- macOS 14.5
- tvOS 17.5
- visionOS 1.2
- watchOS 10.5
Android SDK: Not Found
IDEs:
Android Studio: 2023.3 AI-233.14808.21.2331.11709847
Xcode:
version: 15.4/15F31d
path: /usr/bin/xcodebuild
Languages:
Java:
version: 17.0.11
path: /usr/bin/javac
Ruby:
version: 2.6.10
path: /usr/bin/ruby
npmPackages:
"@react-native-community/cli": Not Found
react:
installed: 18.2.0
wanted: 18.2.0
react-native:
installed: 0.74.1
wanted: 0.74.1
react-native-macos: Not Found
npmGlobalPackages:
"react-native": Not Found
Android:
hermesEnabled: true
newArchEnabled: false
iOS:
hermesEnabled: true
newArchEnabled: false
Could it be possible to use Touchable or Pressable components inside the renderCard
method? I've tried and they seem to not receive the touch events.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.