skipperlla / rn-swiper-list Goto Github PK

View Code? Open in Web Editor NEW

110.0 110.0 10.0 29.29 MB

⚡ Lightning fast and customizable tinder-like swiper for React Native

Home Page: https://www.npmjs.com/package/rn-swiper-list

License: MIT License

JavaScript 11.67% TypeScript 88.33%

ios javascript react react-native react-native-card react-native-deck-card react-native-tinder-card

rn-swiper-list's Introduction

Tech Stack

rn-swiper-list's People

Contributors

Stargazers

Watchers

Forkers

omercandemir joehoel kdong007 belmosoft marlonaec

rn-swiper-list's Issues

How can I slow down or control the swipe animation when programmatically swiping using swipeLeft or swipeRight?

BTW great library, thanks for making it!

expose userConfig for useImperativeHandle methods

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,
};

Loop back to beginning of items

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

Support tap events on SwiperItem

Hi, thanks for your work. Is it possible to support tap events for children elements, for example, show multiple images?!

The card item still appears after swiping down

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.

Screen.Recording.2023-11-04.at.7.55.04.PM.mov

Capturing events from children

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?

exposing a ref to the used PanGestureHandler (to use that ref in children's simultaneousHandlers)
adding a new prop to set simultaneousHandlers of the used PanGestureHandler

@Skipperlla WDYT?

Swipe Issue

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.

Demo indication of swipe gesture

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?

Fetching data when swipe deck is empty

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.