webraptor/react-native-deck-swiper

tinder like react-native deck swiper

react-native-deck-swiper's Issues

Stack is not animating after swipe the first two cards

Hey @webraptor thank you for your effort trying to keep this library alive.
I found a weird bug where the stack stops animating (zooming the next cards) after swipe the first two cards.
Take a look to this video:
https://user-images.githubusercontent.com/10704258/132953264-65a11e59-19c2-4334-badb-e1a15bc662d7.mp4

animateCardOpacity Sometimes makes the card stay partially transparent

When I have animateCardOpacity set, I sometimes see this:

And then after I swipe that card, I see something like this for the next card:

I feel I have a fairly standard implementation of Swiper:

<Swiper
            style={{
              justifyContent: "flex-start",
              alignItems: "center",
              alignSelf: "center",
              flex: 1,
            }}
            backgroundColor={"#ecf0f1"}
            ref={this.swiper}
            onSwiped={(cardIndex) => this.onSwiped("general", cardIndex)}
            onSwipedLeft={(cardIndex) => this.onSwiped("left", cardIndex)}
            onSwipedRight={(cardIndex) => this.onSwiped("right", cardIndex)}
            cards={this.state.chars}
            cardIndex={this.state.cardIndex}
            cardVerticalMargin={20}
            disableTopSwipe={true}
            disableBottomSwipe={true}
            renderCard={this.renderCard}
            onSwipedAll={this.onSwipedAllCards}
            stackSize={3}
            stackSeparation={15}
            constainerStyle={{ height: 0 }}
            style={{ height: 0 }}
            cardStyle={{ height: 0 }}
            useViewOverflow={false}
            childrenOnTop={true}
            //allSwipedCheck={true}
            overlayLabels={{
              left: {
                element: <TriangleCornerTopRight />,
                style: {
                  label: {
                    backgroundColor: "black",
                    borderColor: "black",
                    color: "white",
                    borderWidth: 1,
                  },
                  wrapper: {
                    //flexDirection: 'column',
                    alignItems: "center",
                    justifyContent: "center",
                    marginTop: 30,
                    marginLeft: 145,
                  },
                },
              },
              right: {
                element: <TriangleCornerTopLeft />,
                style: {
                  label: {
                    backgroundColor: "black",
                    borderColor: "black",
                    color: "white",
                    borderWidth: 1,
                  },
                  wrapper: {
                    //flexDirection: 'column',
                    alignItems: "center",
                    justifyContent: "center",
                    marginTop: 30,
                    marginLeft: -145,
                  },
                },
              },
            }}
            animateOverlayLabelsOpacity
            animateCardOpacity
            swipeBackCard
          ></Swiper>

When I disable this property, no issues, the card stays completely opaque. That's an acceptable fix for me for now, but it would be nice to have working opacity animations.

[Help] Looking for help on inverting Vertical Swiping, Invert Animated.Value Y Axis.

Hey! Amazing package, it's been more than helpful for my current project

I've been trying to invert the Vertical Swiping feature on the Swiper.

I found that the swipe direction gets handled here so I'm pretty much trying to find out how to invert it value.

  createAnimatedEvent = () => {
    const { horizontalSwipe, verticalSwipe } = this.props
    const { x, y } = this.state.pan

    const dx = horizontalSwipe ? x : new Animated.Value(0)
    const dy = verticalSwipe ? y : new Animated.Value(0)
 
    return { dx, dy }
  }

If anyone has any knowledge on this it would be a lifesaver!!!

Empty cards still tries to render ( From Previous Repo still issue )

Card Index initializes with the maximum Card Index equal to the initial size of the cards Array. And if any element is deleted from cards Array or updated, it iterates over the same range of card indices, hence it will return undefined for items no longer present in Cards Array.

feature request: swipe back into position

Similar to how youtube's minimized video can pop back into position if you click on it, it'd be good if onSwipeUp could bring the previous card back from out of screen and slide back into the top of the deck.

React native deck swiper swiping two cards at a time

I'm using react-native-deck-swiper (latest version). What I noticed that with every swipe, two cards are swiping despite only one item getting removed from the array. Can anyone tell me why this issue happening? Below is the ParentComponent and ChildComponent I've added:

Parent Component:

function ParentComponent() {
    const [Items, setItems] = useState([
        {
            id: 454,
            name: 'John Smith',
        },
        {
            id: 564,
            name: 'Alex Clarke',
        },
        {
            id: 432,
            name: 'Mathew Hayden',
        },
      {
        id: 4122,
        name: 'Dan Barker',
    },
    {
        id: 4320,
        name: 'Colin Barker',
    },
    ]);

    const handleClick = (index) => {
        Items.splice(index, 1);        
        setItems(Items);
    };
    return <ChildComponent Items={Items} handleClick={handleClick} />;
}

Child Component:

export default function ChildComponent({ Items, handleClick }) {
    const renderCard = card => {
        return (
            <View
                style={{
                    backgroundColor: '#FFF',
                    borderRadius: 5,
                    height: 250,
                    padding: 50,
                    marginLeft: 25,
                    marginRight: 25,
                    borderWidth: 1,
                    borderColor: '#CCC',
                }}
            >
                <Text>{card.name}</Text>
            </View>
        );
    };

    return (
        <Swiper
            useViewOverflow={Platform.OS === 'ios'}
            cards={Items}
            onSwipedLeft={cardIndex => handleClick(cardIndex)}
            onSwipedRight={cardIndex => handleClick(cardIndex)}
            verticalSwipe={false}
            showSecondCard={true}
            stackSize={Items.length}
            stackSeparation={-22}
            animateCardOpacity={true}
            backgroundColor={'white'}
            containerStyle={styles.swiper}
            renderCard={card => {
                return renderCard(card);
            }}
        />
    );
}

Video Link
https://i.stack.imgur.com/v5S00.gif

Last two cards in stack don't animate

When swiping a card a slight zoom in animation of the next card is executed. However this does not happen on the last two cards of the stack.

Does anyone know how to solve this issue?

Thank you!

setting VerticalSwipe = false causes an issue

<> <View style={styles.container}> <Swiper cards={['DO', 'MORE', 'OF', 'WHAT', 'MAKES', 'YOU', 'HAPPY']} renderCard={(card) => { return ( <View style={styles.card}> <Text style={styles.text}>{card}</Text> </View> ); }} onSwiped={(cardIndex) => { console.log(cardIndex); }} onSwipedAll={() => { console.log('onSwipedAll'); }} cardIndex={0} verticalSwipe={false} backgroundColor={'#4FD0E9'} stackSize={3}> <Button onPress={() => { console.log('oulala'); }} title="Press me"> You can press me </Button> </Swiper> </View> </>

following error is occurred when setting verticalSwipe={false}.

"Invariant Violation: Bad mapping of type number for key dy, event value must map to AnimatedValue"

By the way, thank you for your decision to keep taking care of this repo.

Multiple cards gets released on a single swipe

I have a stack size of 2, while swiping the card left/right, 2 cards get release from the list.
Like I have a list of 10 cards whose id are as 1,2,3,4...10.
Now when I am showing them 2 cards gets displayed (id =>1,2) now when i am swiping the card the next cards that should be shown will be of(id => 2,3), but what's happening is.... That it trashes both the cards simultaneously and shows new cards having (id => 3,4).
How I can manage this ?
Please suggest.
I am attaching my code below.

<Swiper
    cards={userListingData}
    renderCard={(card, index) => this.renderCard(card, index)}
    keyExtractor={(card, index) => card.userID.toString()}
    disableTopSwipe={true}
    disableBottomSwipe={true}
    onSwipedLeft={(index,card) => this.onSwiped('left',index,card)}
    onSwipedRight={(index,card) => this.onSwiped('right',index,card)}
    cardIndex={this.state.cardIndex}
    animateOverlayLabelsOpacity={false}
    animateCardOpacity={false}
    backgroundColor={COLORS.WHITE}
    cardHorizontalMargin={22}
    cardVerticalMargin={0}
    useViewOverflow={Platform.OS === 'ios'}
    ref={(swiper) => { this.swiper = swiper }}
    stackSize={2}
    swipeBack
    showSecondCard={true}
    stackSeparation={0}
    stackScale={0}
    swipeBackCard={false}
  />

Cards not rendering straight

When the Swiper renders the cards they are coming out weird, sometimes it works but most the time it doesn't. You cant swipe it either.

I noticed it does it when you open the app, then once you refresh the app with Ctrl+R it fixes itself. Its rendering the first card as the swipeBackCard then its rendering the other cards with rotation, and out of order indexes.

Any ideas whats going on and is there a fix?

Swipe does not work for android device. Same code work for IOS

  <Swiper
    cards={data}
    ref={(swiper) => {
      swipeRef.current = swiper;
    }}
    renderCard={renderHomeCard}
    onTapCard={_onTabCard}
    // no sure swipe is working on android or not, if not, check this place
    // this is a fix from https://github.com/alexbrillant/react-native-deck-swiper/issues/218
    // useViewOverflow={Platform.OS === "ios"}
    style={styles.swiperContainer}
    cardHorizontalMargin={0}
    cardIndex={0}
    backgroundColor="white"
    stackSize={1}
    onSwipedAll={onSwipedAllCards}
    swipeBackCard={true}
    animateOverlayLabelsOpacity
    disableBottomSwipe={true}
    onSwipedLeft={(index) => handleOnSwipeCard("left", index)}
    onSwipedRight={(index) => handleOnSwipeCard("right", index)}
    onSwipedTop={(index) => handleOnSwipeCard("top", index)}

/>

Code sample is above. Could you please help?

Prop to tell Swiper to stay on same card after swipe action

It would be great to have a prop for the Swiper to tell it that it shall stay on the same card (no skip forward in the deck) after a certain Swipe action. For example 4 props named, stayOnSameCardAfterSwipeTop, stayOnSameCardAfterSwipeLeft, stayOnSameCardAfterSwipeRight, stayOnSameCardAfterSwipeBottom.

Love your work! Many thanks!!! :)

onSwiping TypeScript definition is wrong

In index.d.ts, onSwiping is defined as:

onSwiping?: () => void;

I think it should be?

onSwiping?: (x: number, y: number) => void;

Doesn't Work With react-native-web

Thanks for taking over and updating this package. Please include this PR that should allow this package to be used with react-native-web projects: alexbrillant#263

Push new items to the stack without re render

Hello, I have a big deck so I need to download the files in batch.
What I'm downing is to download the first ten items and then after 5 swipes I start to download the other 5 an so one and pushing it to cardsData, the problem is that I can't add new data without break the app.

Is there a property like extraData in flat list that we can use?

Thanks

Add a verticalStackSeparation and horizontalStackSeparation

Hi guys ! Thanks for keeping this updated ;)

I wanted to use stackSeparation, but Horizontally. I don't think this is possible actually ? It would be great to be able to precise either horizontal or vertical separation, so that we can even see cards in diagonal maybe, if we use both of them at the same time ^^

Thanks !

Arnaud

use methods like swipeBack or etc in a functional component

I know this is not an issue but rather a request for insight about how things work in this component.

I made a swiper component and I pass the config and the data via props. now, how can I use the ref of the parent to initiate children's swipe methods? because my Buttons live outside of the component
parent.js

      <Swipe
        data={matchData}
        ref={swipeRef}
        infinite={true}
        stackScale={5}
        onSwiping={(e) => console.log(e)}
        onSwiped={(matchIndex) => {
          console.log(matchIndex);
        }}
        onSwipedAll={() => {
          console.log("onSwipedAll");
        }}
        stackSize={3}
        leftOverLayTitle="NOPE"
        rightOverLayTitle="LIKE"
      />
      <MatchHeading
        onCoinPress={() => navigation.navigate("BuyCoinScreen")}
        coinAmount={24}
      />

      <View style={styles.buttonsWrap}>
        <ButtonMatch
          color={Colors.lightGray}
          icon={Images.declineIcon}
          // onPress={() => Alert.alert("Swiped left!")}
          onPress={notifDrop}
        />
        <ButtonMatch
          color={Colors.greenSuperLike}
          icon={Images.starIcon}
          onPress={() => Alert.alert("super like")}
        />
        <ButtonMatch
          color={Colors.pinkLove}
          icon={Images.loveIcon}
          onPress={() => Alert.alert("Swiped right!")}
        />
      </View>

and the actual component

<Swiper
      cards={data}
      infinite={infinite}
      keyExtractor={(data) => data?.id?.toString()}
      renderCard={(item) => {
        return (
          <MatchInfo
            pic={item?.pic}
            name={item?.name}
            age={item?.age}
            description={item?.description}
            distance={item?.distance}
            metric={item?.metric}
          />
        );
      }}
      stackScale={stackScale}
      onSwiping={onSwiping}
      onSwiped={onSwiped}
      onSwipedAll={onSwipedAll}
      backgroundColor={Colors.transparent}
      marginTop={isIos ? hp(5.5) : null}
      cardIndex={0}
      stackSize={stackSize}
      disableTopSwipe
      disableBottomSwipe
      animateOverlayLabelsOpacity
      animateCardOpacity
      overlayLabels={{
        left: {
          title: leftOverLayTitle,
          style: {
            label: {
              ...Fonts.h1,
              color: Colors.white,
              top: hp(30),
            },
            wrapper: styles.leftWrapper,
          },
        },
        right: {
          title: rightOverLayTitle,
          style: {
            label: {
              ...Fonts.h1,
              color: Colors.white,
              top: hp(30),
            },
            wrapper: styles.rightWrapper,
          },
        },
      }}
    />
  );
};

Animated: `useNativeDriver` was not specified. This is a required option and must be explicitly set to `true` or `false`

Hey,

The swiper appears to be working and doesn't crash the app in development, but, every time a swipe is executed, this warning pops up.

Animated: `useNativeDriver` was not specified. This is a required option and must be explicitly set to `true` or `false`
* [native code]:null in __expoConsoleLog
- node_modules/react-native/Libraries/LogBox/LogBox.js:36:4 in console.warn
- node_modules/expo/build/environment/muteWarnings.fx.js:18:4 in warn
- node_modules/react-native/Libraries/Animated/src/NativeAnimatedHelper.js:281:4 in shouldUseNativeDriver
- node_modules/react-native/Libraries/Animated/src/animations/TimingAnimation.js:73:49 in constructor
- node_modules/react-native/Libraries/Animated/src/AnimatedImplementation.js:210:26 in start
- node_modules/react-native/Libraries/Animated/src/AnimatedImplementation.js:217:13 in start
- node_modules/react-native/Libraries/Animated/src/AnimatedImplementation.js:383:10 in animations.forEach$argument_0
* [native code]:null in forEach
- node_modules/react-native/Libraries/Animated/src/AnimatedImplementation.js:365:6 in result.start
- node_modules/react-native-deck-swiper/Swiper.js:419:6 in swipeCard
* http://127.0.0.1:19001/node_modules/expo/AppEntry.bundle?platform=ios&dev=true&minify=false&hot=false:454826:25 in <unknown>
- node_modules/react-native/Libraries/Interaction/PanResponder.js:572:12 in clearInteractionHandle
- node_modules/react-native/Libraries/Interaction/PanResponder.js:490:30 in panHandlers.onResponderRelease
- node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-dev.js:286:4 in invokeGuardedCallbackImpl
- node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-dev.js:497:2 in invokeGuardedCallback
- node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-dev.js:521:2 in invokeGuardedCallbackAndCatchFirstError
- node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-dev.js:683:41 in executeDispatch
- node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-dev.js:707:19 in executeDispatchesInOrder
- node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-dev.js:872:28 in executeDispatchesAndRelease
* [native code]:null in forEach
- node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-dev.js:851:4 in forEachAccumulated
- node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-dev.js:897:20 in runEventsInBatch
- node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-dev.js:1069:18 in runExtractedPluginEventsInBatch
- node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-dev.js:2835:35 in batchedUpdates$argument_0
- node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-dev.js:20569:13 in batchedUpdates$1
- node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-dev.js:2731:29 in batchedUpdates
- node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-dev.js:2834:16 in _receiveRootNodeIDEvent
- node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-dev.js:2911:27 in receiveTouches
- node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:425:19 in __callFunction
- node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:112:6 in __guard$argument_0
- node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:373:10 in __guard
- node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:111:4 in callFunctionReturnFlushedQueue
* [native code]:null in callFunctionReturnFlushedQueue

Swipe & Tap on Card doesn't work on Android, but works on iOS

Hello,

Thank you for this library - works great on iOS and doesn't have the visual problems like react-native-snap-carousel library on Android.

However, the card doesn't respond to both Tap & Swipe on Android, but works fine on iOS. I did check out a similar issue and used the fix suggested, but it didn't help.

Following is my code:

<Swiper
                ref={swiper => {
                    swiperRef = swiper
                }}
                onSwipedLeft={() => onSwiped('left')}
                onSwipedRight={() => onSwiped('right')}
                onSwipedTop={() => onSwiped('top')}
                onSwipedBottom={() => onSwiped('bottom')}
                onTapCard={(cardIndex) => onTapCard(cardIndex)}
                cards={candidateExploreFullTimeData}
                cardIndex={cardIndex}
                cardVerticalMargin={64}
                renderCard={renderCandidate}
                onSwipedAll={onSwipedAllCards}
                stackSize={3}
                stackSeparation={20}
                pointerEvents={"auto"}
                containerStyle={{ height: 0, marginTop: 44, marginLeft: -22 }}
                useViewOverflow={Platform.OS === 'ios'}
                animateOverlayLabelsOpacity
                animateCardOpacity
                swipeBackCard
            />

I'm using below version of react & Expo:

"react": "16.13.1",
"react-native": "https://github.com/expo/react-native/archive/sdk-40.0.1.tar.gz",
"expo": "40.0.0",

@webraptor would you kindly assist with this one?

It is not rendering the second card

Please help. After updating from 1.6.7 it is not showing second card.

I am using this code

<Swiper
ref={swiper => {
this.swiper = swiper;
}}
cardStyle={this.getCardStyle}
inputRotationRange={[0, 0, 0]}
outputRotationRange={["0deg", "0deg", "0deg"]}
infinite={true}
onSwipedLeft={this._onSwipedRight}
onSwipedRight={this._onSwipedLeft}
cards={this.state.feeds}
renderCard={this._renderCard}
onSwipedTop={this._onSwiped}
onSwipedBottom={this._onSwipedBottom}
horizontalSwipe={this.state.horizontalSwipe}
verticalSwipe={(this.state.feeds.length >= 1 || this.state.verticalSwipe )?true:false}
goBackToPreviousCardOnSwipeBottom={true}
onSwipedAll={this._onSwipedAll}
cardIndex={this.state.currentIndex}
backgroundColor={'#fff'}
keyExtractor={item => item.n_id}
cardVerticalMargin={0}
marginBottom={0}
horizontalThreshold={width/2}
cardHorizontalMargin={0}
onTapCard={this._ontapcard}
/>

and in _onSwiped function I am changing the value of currentIndex (cardIndex). Please help. After I swipe it is just showing blank screen.

Swipe back to previous card with a custom animation

This is something listed as being possible in the documentation but there's no example given showing how to do it and everything I have tried doesn't seem to work. The previous card shows up when I enable one of the goBackToPreviousCardOnSwipe properties but it just reappears in place without an animation. Is there a way to do this that I'm missing?

Fails with react-native-view-overflow could not be found

Hi,

I am trying to use this library with React Native 0.63.2, after installing and restarting metro bundler, I get the following error:

error: Error: Unable to resolve module `react-native-view-overflow` 
from `node_modules/react-native-deck-swiper/Swiper.js`: react-native-view-overflow 
could not be found within the project.

I was thinking to install react-native-view-overflow, but they have mentioned that the RN > 0.57+ this functionality is natively supported by React Native. Read it here: https://github.com/entria/react-native-view-overflow#react-native-version-notice

React Native Version Notice
This library will be useful for React Native versions below v0.57. For v0.57 and beyond, React Native supports Android overflow natively from this commit.

Please tell me what to do? Should I install react-native-view-overflow?

Thanks

elevation will break overlays

When I give my cards elevation to add a nice shadow, overlays will stop showing completely. Shadow properties for iOS work fine.

renderCard={() => {
  return (
    <View style={{ flex: 1, elevation: 5 }}>
      {/* content */}
    </View>
  );
}}

undo card swipe need help

is there any way to undo card swipe

Events dragStart and dragEnd are documented but do not exist.

dragStart	func	function to be called when drag start
dragEnd	func	function to be called when drag end

From the read me docs however these are missing within the component itself.

Have these been removed or deprecated in which case please update the docs, if not any they're missing and need to be put back in?

Thanks

Animated: useNativeDriver

Hello,
I updated expo from 36 to 39 and i had this error :

WARN Animated: "useNativeDriver" was not specified. This is a required option and must be explicitly set to "true" or "false"

I searched on Google i found this issues :
GeekyAnts/NativeBase#3109

So i updated Swiper.js and added "useNativeDriver:false" to Animated.timing, Animated.spring and Animated.event.

https://pastebin.com/Hxipk7Ez

It seems to be working well !

how to upload array cards

when I download data from the Swiper server, sees only the first data, other data that is downloaded it does not see

Cards drift off to one side after swipe when loading next

Once in a while
[UPDATE] :::Only happens when swiping fast, ie. putting down the finger on the screen before the rendering of the next card is complete.:::

when swiping cards if you put down your finger on the screen again fast enough, the new card is rendered with an offset of (card center + touch position). After each new swipe the next card drifts more in the same direction on load. After 3-4 new cards the new loading position is completely off screen and there is no way to continue swiping. When the new cards begin to offset, if you swipe it in a disabled direction, it bounces back and it seems to reset the position.

This never happen if swipe methods are called programmatically on ref.

My guess is that the glitch is in the setting of new card render position after successful swipe, when putting the finger on the screen too swiftly after the swipe.

On swipe to disabled direction the card animates back to center, so there is obviously another algorithm for setting the position when swiping to disabled direction.

Only when swiping manually. Android. Not Web. Ios not tested.

Images below shows the position after swipe when new card is loaded.

Add support for tapping buttons on cards

As far as I can tell, each card only has one tap target and does not support having multiple buttons on the card that swipes that can be tapped.
@webraptor Is this understanding correct? Am I'm missing something?

Hope create a different repo instead of fork. So that others could npm directly. And also thanks for maintenance !! It really help

thanks!

TS: outputOverlayLabelsOpacityRangeX and outputOverlayLabelsOpacityRangeY have wrong number of values

https://github.com/webraptor/react-native-deck-swiper/blob/master/index.d.ts#L46

Should be 5 values according to the documentation

Upgraded RN to 0.63.2 - "Could not resolve dependency"

I upgraded my expo project which upgraded my RN version to 0.63.2

When I try to run npm install react-native-deck-swiper --save the below error is returned:

npm ERR! Found: [email protected]
npm ERR! node_modules/react-native
npm ERR!   react-native@"https://github.com/expo/react-native/archive/sdk-39.0.3.tar.gz" from the root project
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer react-native@"^0.49.1" from [email protected]

It looks like this package is requiring an older version of RN? Do you have any idea why it would be rejecting me?

My Expo Specs:

  Expo CLI 4.0.4 environment info:
    System:
      OS: macOS 11.0.1
      Shell: 5.8 - /bin/zsh
    Binaries:
      Node: 15.3.0 - /usr/local/bin/node
      Yarn: 1.22.10 - /usr/local/bin/yarn
      npm: 7.0.14 - /usr/local/bin/npm
      Watchman: 4.9.0 - /usr/local/bin/watchman
    SDKs:
      iOS SDK:
        Platforms: iOS 14.3, DriverKit 20.0, macOS 11.1, tvOS 14.3, watchOS 7.2
    IDEs:
      Android Studio: 4.1 AI-201.8743.12.41.6953283
      Xcode: 12.3/12C5020f - /usr/bin/xcodebuild
    npmPackages:
      expo: ^39.0.0 => 39.0.5 
      react: 16.13.1 => 16.13.1 
      react-dom: 16.13.1 => 16.13.1 
      react-native: https://github.com/expo/react-native/archive/sdk-39.0.3.tar.gz => 0.63.2 
      react-navigation: ^3.13.0 => 3.13.0 
    npmGlobalPackages:
      expo-cli: 4.0.4
    Expo Workflow: managed

It is not showing second card

Please help. After updating from 1.6.7 it is not showing second card.

I am using this code

<Swiper
ref={swiper => {
this.swiper = swiper;
}}
cardStyle={this.getCardStyle}
inputRotationRange={[0, 0, 0]}
outputRotationRange={["0deg", "0deg", "0deg"]}
infinite={true}
onSwipedLeft={this._onSwipedRight}
onSwipedRight={this._onSwipedLeft}
cards={this.state.feeds}
renderCard={this._renderCard}
onSwipedTop={this._onSwiped}
onSwipedBottom={this._onSwipedBottom}
horizontalSwipe={this.state.horizontalSwipe}
verticalSwipe={(this.state.feeds.length >= 1 || this.state.verticalSwipe )?true:false}
goBackToPreviousCardOnSwipeBottom={true}
onSwipedAll={this._onSwipedAll}
cardIndex={this.state.currentIndex}
backgroundColor={'#fff'}
keyExtractor={item => item.n_id}
cardVerticalMargin={0}
marginBottom={0}
horizontalThreshold={width/2}
cardHorizontalMargin={0}
onTapCard={this._ontapcard}
/>

and in _onSwiped function I am changing the value of currentIndex (cardIndex). Please help. After I swipe it is just showing blank screen.

pass swiper ref to renderCard and perform actions like swipe back swipe etc...

how to pass Swiper ref to component in renderCard i tried but getting undefined

When stackSize=1, and using swipeBackCard, the card animation is overlap together when swipe back.

Vertical scroll

Hi guys, first of all, congrats for this job, its amazing.

I am wondering if its possible to scroll vertically and swipe horizontally.
I am asking this because, when the card is too big I cannot see all the content.
And I couldn't find any way to solve this :(

thanks!

renderCard problem

I have created a component that encapsulates the swiper and its functionalities, currently I bring a list of elements from the backend and it shows them correctly, then when trying to bring a completely different list from the backend the renderCard method returns undefined.

Stack.js

  render() {
    const {cars, next, current, token, notLogged} = this.props;
    let actualIndex = 0;
    return (
      <View style={styles.container}>
        <Swiper
          key={cars.length}
          ref={(swiper) => {
            this.swiper = swiper;
          }}
          animateCardOpacity
          cards={cars}
          renderCard={(card) => {
            actualIndex = card ? card.id : actualIndex;
              return (
                <CarDetail car={card}>
                  <User user={card.user} token={token} notLogged={notLogged} />
                </CarDetail>
              );
          }}
          backgroundColor={Colors.white}
          onSwipedAll={() => next()}
          cardVerticalMargin={0}
          cardHorizontalMargin={0}
          verticalSwipe={false}
          cardIndex={current}
          stackSize={2}
          swipeAnimationDuration={700}
          swipeBackCard
          onSwiped={() => this._onFinishSwipe()}
        />
      </View>
    );
  }

Home.js

  _renderContent = (list, apiStatus, current, token, quick) => {
    const length = list.length;
    if (length && apiStatus && apiStatus.success) {
      return (
        <Stack
          cars={list}
          next={quick ? this._fetchQuickSearchList : this._fetchListCars}
          current={current}
          token={token}
          notLogged={this._notLogged}
        />
      );
    } else if (!length && apiStatus && apiStatus.success) {
      return <Empty refresh comeback={() => this._comeback()} />;
    } else {
      return null;
    }
  };

  render() {
    const {
      apiRequest,
      showList: {carsList, firstTime},
      quickSearch: {quickSearchList},
      token,
    } = this.props;
    const apiStatus = apiRequest[requestId.SHOW_CARS];
    const {quick} = this.state;
    let current = carsList.length - 10;
    const list = carsList.length ? carsList : quickSearchList;
    return (
      <>
        {(firstTime || quick) && apiStatus && apiStatus.loading && <Loader />}
        <Search
          quickSearch={() => this._quickSearch()}
          token={token}
          notLogged={this._notLogged}
        />
        {this._renderContent(list, apiStatus, current, token, quick)}
      </>
    );
  }

Has anyone faced such a problem? Thank you!

Is it possible to swipe only in one direction at a time

Is this possible to swipe only in one direction at a time than have a moving card in all directions ? Please have a look at this video to see what I mean. Is it possible to achieve something like in the video below ?

https://drive.google.com/file/d/1O4IMwM_n5mJ38nJ-u2dagcJsfy3uiyuH/view?usp=drivesdk

Can I turn off stackSeparation and not show the underlying card until I begin swipe?

Is there some way to set stackSeparation such that you cannot see the underlying card until you begin the swipe of the top card?

Horizontal swipe or vertical swipe set to false dont work

Refer to: alexbrillant#321

TypeError: undefined is not an object (evaluating 'this._callListeners.bind')

Whenever I tried to move the cards this error is occurred.

TypeError: undefined is not an object (evaluating 'this._callListeners.bind')
Animated.Event seems not having _callListeners

I tried this with newly initiated react native project and using the example swiper code from this repo
and same error is occurred.
So I think it is Swiper issue.

{
"name": "mobile",
"version": "0.0.1",
"private": true,
"scripts": {
"android": "react-native run-android",
"ios": "react-native run-ios",
"start": "react-native start",
"test": "jest",
"lint": "eslint . --ext .js,.jsx,.ts,.tsx"
},
"dependencies": {
"@react-native-community/masked-view": "^0.1.10",
"@react-navigation/native": "^5.7.3",
"@react-navigation/stack": "^5.9.0",
"mobx": "^5.15.6",
"mobx-react": "^6.2.5",
"mobx-react-lite": "^2.0.7",
"react": "16.13.1",
"react-native": "0.63.2",
"react-native-deck-swiper": "^1.6.7",
"react-native-gesture-handler": "^1.7.0",
"react-native-reanimated": "^1.13.0",
"react-native-safe-area-context": "^3.1.4",
"react-native-screens": "^2.10.1",
"react-native-view-overflow": "^0.0.5"
},
"devDependencies": {
"@babel/core": "^7.8.4",
"@babel/plugin-proposal-class-properties": "^7.10.4",
"@babel/plugin-proposal-decorators": "^7.10.5",
"@babel/runtime": "^7.8.4",
"@react-native-community/eslint-config": "^1.1.0",
"@types/jest": "^25.2.3",
"@types/react-native": "^0.63.2",
"@types/react-test-renderer": "^16.9.2",
"@typescript-eslint/eslint-plugin": "^2.27.0",
"@typescript-eslint/parser": "^2.27.0",
"babel-jest": "^25.1.0",
"eslint": "^6.5.1",
"jest": "^25.1.0",
"metro-react-native-babel-preset": "^0.59.0",
"prettier": "^2.0.4",
"react-test-renderer": "16.13.1",
"typescript": "^3.8.3"
},
"jest": {
"preset": "react-native",
"moduleFileExtensions": [
"ts",
"tsx",
"js",
"jsx",
"json",
"node"
]
}
}

Cards gets shifted to the right if a video was played in landscape

Hello !

I have a bug on my app :

I render a deck of yellow cards, if I press on a card I go to another page (with react-native-navigation v5) where I see a video (youtube in a webview). I open it in fullscreen, and change the orientation of the device to landscape.
I then leave the video, go back to portrait mode. I go back to the swiper. Cards are now shifted to the right by almost half a screen, and I see the blue background of the swiper.

before screen :

after screen :

Here is a video : https://drive.google.com/file/d/1WXwO6JGZke_YLonKWc7aoTs7g1XVOOzD/view?usp=sharing

Any idea on how to fix ? I tried to force update my component by triggering a change of state, but since I have a ref on the swiper, it does not change anything. I also tried with the ref to call "forceUpdate" function on swiper, but nothing happens.

How to reduce the opacity of cards in background

I was wondering how, and if, it might be possible to reduce the opacity of cards that are not on top of the stack?

Doesn't work with SafeAreaView and margin 0

So the swiper works correctly but it overflows the parents and therefore the SafeAreaView for on example iOS.

          <Swiper
            ref={swiperEl}
            cards={....}
            renderCard={(prop) => (
             <View style={styles.card}>
                dataEtcetc={....}
              />
            )}
            backgroundColor="transparent"
            stackSize={3}
            verticalSwipe={false}
            infinite={true}
            cardVerticalMargin={5}
            cardHorizontalMargin={5}
            marginBottom={0}
            swipeBackCard
          />
        </View>


  card: {
    flex: 1,
    borderRadius: 10,
    borderWidth: 1,
    borderColor: Colors.mainColor,
    backgroundColor: Colors.backgroundColor,
    overflow: 'hidden',
  },

So if having marginBottom: 0 (to have it feel the whole screen) lets the swiper cover the SafeAreaView as well and not be contained in the parent. Does anyone else have the same problem or is it just us?

Vertical scrollview now working

Hi Guys, I added <Swiper/> inside scrollview for me vertical scroll not working when scrolling on <Swiper>. Anyone help me to resolve the issue.

Thanks :)

<ScrollView>
<Swiper/>
</ScrollView>

Show overlay all along swipe transition

When overlays are activated, they should be displayed whenever a swipe transition is running, not only on pan gesture. This would avoid screen flickering when releasing finger and provide a uniform behavior for swipe animations.
An example of expected behavior can be viewed in this app : https://play.google.com/store/apps/details?id=com.lemonde.morning&hl=fr

Issues showing new cards after paginated data is returned and added to the card props list

Cross Posted

This issue is cross posted to here as I was not sure which repository is being actively maintained.

Issue

When dynamically adding elements to the Swiper card prop, the newly added properties will not appear on the screen.

Longer Description

My issue comes from the following situation: My data is paginated, so I get the first page of data initially which consists of 5 elements which loads just fine and I am able to swipe on them no problem. I begin to load page two when the user is 2 away from the end of the five, once the data is returned I concat the array returned with page 2 data on to the array of page 1 data. This is where the issue is: The first five from page 1 show perfectly fine and I am able to interact with them flawlessly but when I try to concat page two to the existing array passed into the props of the Swiper the new items dont show up.

Expectation

I would expect when I modify the array being passed into the cards prop that change is reflected in the swiper and I can interact with the newly added array elements

Video

Ignore Ugly UI, its under construction...

20210228-184243-720x1440.mp4

As you can see in the video the total property correctly updates to 10 after the second page of data is loaded in but once I reach the end of the first pages data the swiper fails to show the next 5 elements (the second page)

Related issues I have visited numerous times

alexbrillant#153, This Comment, alexbrillant#192, alexbrillant#189, and This Section in the Readme

Code

Swiper

  const [index, setIndex] = useState(0);
  const [products, setProducts] = useState<IProduct[]>([]);
...
const getProductsByTag = () => {
    axios.get('/products/list', {
      params: { tags: tags.join(','), page, size: 5 }
    }).then((res) => {
      const { products: internalProds, count } = res.data;
      setTotalSize(count);
      setProducts(products.concat(internalProds));
    }).catch((err) => {
      setError('Error getting products');
    })
  }
...
  const userLikeProduct = (product: IProduct) => {
    setIndex((index + 1) % products.length);
    transitionRef.current.animateNextTransition();

   if(products.length - 2 <= index) {
        console.log('getting more products in like product')
        setPage(page++)
        getProductsByTag();
      }
  }
...
  const renderCard = (tProduct: IProduct, tIndex: number) => {
    return <Card key={tProduct._id} index={tIndex} card={tProduct} />
  }
...
  useDidMountEffect(() => {
    getProductsByTag();
  }, [tags, page])
...
return (
....
{products.length ?
...
 <Swiper ref={swiperRef}
              cards={products}
              cardIndex={index}
              renderCard={(card, cardIndex) => {return renderCard(card, cardIndex)}}
              onSwipedRight={(num) => userLikeProduct(products[index])}
              onSwipedLeft={(num) => userDislikeProduct(products[index])}
              backgroundColor={'transparent'}
              onTapCard={() => userDislikeProduct(products[index])}
              cardVerticalMargin={0}
              cardHorizontalMargin={5}
              stackSize={stackSize}
              stackScale={3}
              stackSeparation={2}
              animateOverlayLabelsOpacity
              animateCardOpacity
              showSecondCard={true}
              disableTopSwipe
              disableBottomSwipe
              overlayLabels={{
                left: {
                  title: 'NOPE',
                  style: {
                    label: {
                      backgroundColor: colors.red,
                      borderColor: colors.red,
                      color: colors.white,
                      borderWidth: 1,
                      fontSize: 24
                    },
                    wrapper: {
                      flexDirection: 'column',
                      alignItems: 'flex-end',
                      justifyContent: 'flex-start',
                      marginTop: 20,
                      marginLeft: -20
                    }
                  }
                },
                right: {
                  title: 'LIKE',
                  style: {
                    label: {
                      backgroundColor: colors.blue,
                      borderColor: colors.blue,
                      color: colors.white,
                      borderWidth: 1,
                      fontSize: 24
                    },
                    wrapper: {
                      flexDirection: 'column',
                      alignItems: 'flex-start',
                      justifyContent: 'flex-start',
                      marginTop: 20,
                      marginLeft: 20
                    }
                  }
                }
              }}
            />
...
 :
        <View>
          <Text>Loading</Text>
        </View>
)

Package.json

{
  "main": "node_modules/expo/AppEntry.js",
  "scripts": {
    "start": "expo start",
    "android": "expo start --android",
    "ios": "expo start --ios",
    "web": "expo start --web",
    "eject": "expo eject",
    "test": "jest --watchAll"
  },
  "jest": {
    "preset": "jest-expo"
  },
  "dependencies": {
    "@cantum2/simply-lib": "^1.0.7",
    "@expo/react-native-action-sheet": "^3.8.0",
    "@expo/vector-icons": "^12.0.0",
    "@react-native-community/async-storage": "^1.12.1",
    "@react-native-community/masked-view": "0.1.10",
    "@react-navigation/bottom-tabs": "5.11.2",
    "@react-navigation/material-top-tabs": "^5.3.13",
    "@react-navigation/native": "~5.8.10",
    "@react-navigation/stack": "~5.12.8",
    "axios": "^0.21.1",
    "expo": "~40.0.0",
    "expo-asset": "~8.2.1",
    "expo-constants": "~9.3.0",
    "expo-font": "~8.4.0",
    "expo-linking": "~2.0.0",
    "expo-splash-screen": "~0.8.0",
    "expo-status-bar": "~1.0.3",
    "expo-web-browser": "~8.6.0",
    "react": "16.13.1",
    "react-dom": "16.13.1",
    "react-native": "https://github.com/expo/react-native/archive/sdk-40.0.1.tar.gz",
    "react-native-deck-swiper": "^2.0.5",
    "react-native-gesture-handler": "~1.8.0",
    "react-native-reanimated": "~1.13.0",
    "react-native-safe-area-context": "3.1.9",
    "react-native-screens": "~2.15.2",
    "react-native-tab-view": "^2.15.2",
    "react-native-web": "~0.13.12"
  },
  "devDependencies": {
    "@babel/core": "~7.9.0",
    "@types/react": "~16.9.35",
    "@types/react-native": "~0.63.2",
    "jest-expo": "~40.0.0",
    "typescript": "~4.0.0"
  },
  "private": true
}

If there is anything else you would like to see from me please feel free to let me know. Thank you.

Swiping at the side of cards not working

Anyone knows why the following is happening (code is below) on iPhone (8)? The same action on Android works fine!

WhatsApp.Video.2021-10-01.at.14.56.27.mp4

Code:

import React, {useRef, useState} from "react";
import {ImageBackground, StyleSheet} from "react-native";
import CustomView from "../components/custom_view/CustomView";
import Swiper from 'react-native-deck-swiper';
import data from "../assets/data/demo";
import {useTheme} from "react-native-paper";
import {DataT} from "../types";


const ScreenRootSwipe = () => {
    const theme = useTheme();

    const [swipeDirection, setSwipeDirection] = useState('')
    const [cardIndex, setCardIndex] = useState<number>(0)

    return (
        <CustomView
            style={styles.container}
        >
            <Swiper
                cards={data}
                renderCard={(card) => {
                    return (
                        <CustomView style={styles.card}>
                            <ImageBackground
                                source={card.image}
                                resizeMode="cover"
                                style={styles.imageBackgroundContainer}
                                imageStyle={styles.imageBackground}
                            >

                            </ImageBackground>
                        </CustomView>
                    )
                }}
                stackAnimationFriction={0}
                onSwiped={(cardIndex) => {console.log(cardIndex)}}
                onSwipedAll={() => console.log('Swiped all')}
                backgroundColor={theme.colors.background}
                cardIndex={0}
                stackSize={2}
                stackSeparation={1}
                marginTop={0}
                marginBottom={0}
                cardStyle={{
                    top: 10,
                    left: 10,
                    bottom: 10,
                    right: 10,
                    width: 'auto',
                    height: 'auto'
                }}
                // verticalSwipe={false}
                onTapCard={() => console.log('onTap')}
                overlayLabels={{
                    left: {
                        title: 'NO',
                        style: {
                            label: {
                                borderColor: theme.colors.error,
                                color: theme.colors.error,
                                borderWidth: 2
                            },
                            wrapper: {
                                flexDirection: 'column',
                                alignItems: 'flex-end',
                                justifyContent: 'flex-start',
                                marginTop: 30,
                                marginLeft: -30,
                                textAlign: 'center'
                            }
                        }
                    },
                    right: {
                        title: 'YES',
                        style: {
                            label: {
                                borderColor: theme.colors.success,
                                color: theme.colors.success,
                                borderWidth: 2,
                            },
                            wrapper: {
                                flexDirection: 'column',
                                alignItems: 'flex-start',
                                justifyContent: 'flex-start',
                                marginTop: 30,
                                marginLeft: 30
                            }
                        }
                    },
                }}
            />
        </CustomView>
    )
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
    },
    statsWrapper: {

    },
    imageBackgroundContainer: {
        flex: 1,
        justifyContent: "center",
    },
    imageBackground: {
        borderRadius: 6
    },
    card: {
        flex: 1,
    },
    text: {
        justifyContent: 'flex-end',
        fontSize: 20,
        backgroundColor: "transparent"
    }
});

export default ScreenRootSwipe

Card re-rendering after swipeBack

When a card is rendered and then swiped away, it seems to be unloaded and requires a re-render if you swipe it back into position. I thought setting swipeBackCard to true took care of this. Am I missing something?

Add support for react-native 0.62

Is it possible for someone to please add the required updates to make it work with rn0.62?

(@webraptor, I know you are already working on it)🥳