Installations
npm install react-native-deck-swiperDeveloper Guide
BETA
Typescript
No
Module System
CommonJS
Node Version
18.16.1
NPM Version
7.21.1
Score
54.8
Supply Chain
56
Quality
67.8
Maintenance
50
Vulnerability
93.4
License
Releases
11
Contributors
1
Unable to fetch Contributors
Languages
4
JavaScript
Objective-C
Starlark
Java
JavaScript (83.18%)
Objective-C (9.83%)
Starlark (3.85%)
Java (3.13%)
Developer
webraptor
Download Statistics
Total Downloads
920,301
Last Day
948
Last Week
5,415
Last Month
24,623
Last Year
248,567
GitHub Statistics
146 Stars
362 Commits
84 Forks
4 Watching
6 Branches
1 Contributors
Maintainers
1
Package Meta Information
Latest Version
2.0.17
Package Id
react-native-deck-swiper@2.0.17
Unpacked Size
2.21 MB
Size
1.72 MB
File Count
14
NPM Version
7.21.1
Node Version
18.16.1
Publised On
26 Feb 2024
Total Downloads
Cumulative downloads
Total Downloads
920,301
Last day
-19.5%
948
Compared to previous day
Last week
-23.9%
5,415
Compared to previous week
Last month
16.6%
24,623
Compared to previous month
Last year
18.8%
248,567
Compared to previous year
Daily Downloads
Weekly Downloads
Monthly Downloads
Yearly Downloads
Dependencies
1
Peer Dependencies
2
Dev Dependencies
18
Versions
react-native-deck-swiper
Installation
yarn add react-native-deck-swiper
OR
npm install react-native-deck-swiper --save
Versions info
Version 2.0.0-beta is technically version 1.7.2 of the package. However, npm recommended that due to the change in ownership the version be bumped.
| react-native-deck-swiper | react-native | description |
|---|---|---|
| <= 2.0.3-beta | <= 0.56.x | should install react-native-view-overflow and set useViewOverflow true |
| >= 2.0.4 | => 0.57.x | no longer requires react-native-view-overflow; useViewOverflow removed |
Issues
Before submitting a new issue please check if it hasn't already been reported yet. With respect to bugfixes and further developments, please check the To Do board.
Overview
- Rotation animation
- Opacity animation
- Zoom animation
- Overlay labels
- Show next card while swiping
- Swipe event callbacks
- Trigger swipe animations programmatically
- Jump to a card index
- Swipe to previous card
- Underlaying cards offset
- Never-ending, animated deck when infinite property is true
- Swipe back to previous card with a custom animation
Preview
Props
Card props
| Props | type | description | required | default |
|---|---|---|---|---|
| cards | array | array of data for the cards to be rendered | required | |
| renderCard | func(cardData, cardIndex) | function to render the card based on the data | required | |
| keyExtractor | func(cardData) | function to get the card's react key | null | |
| cardIndex | number | cardIndex to start with | 0 | |
| infinite | bool | keep swiping indefinitely | false | |
| horizontalSwipe | bool | enable/disable horizontal swiping | true | |
| verticalSwipe | bool | enable/disable vertical swiping | true | |
| showSecondCard | bool | enable/disable second card while swiping | true | |
| stackSize | number | number of underlaying cards to show (showSecondCard must be enabled) | 1 |
Event callbacks
| Props | type | description | default |
|---|---|---|---|
| onSwipedAll | func | function to be called when all cards have been swiped | |
| onSwiped | func | function to be called when a card is swiped. it receives the swiped card index | |
| onSwipedAborted | func | function to be called when a card is released before reaching the threshold | |
| onSwipedLeft | func | function to be called when a card is swiped left. it receives the swiped card index | |
| onSwipedRight | func | function to be called when a card is swiped right. it receives the swiped card index | |
| onSwipedTop | func | function to be called when a card is swiped top. it receives the swiped card index | |
| onSwipedBottom | func | function to be called when a card is swiped bottom. it receives the swiped card index | |
| onSwiping | func | function to be called when a card is being moved. it receives X and Y positions | |
| dragStart | func | function to be called when drag start | |
| dragEnd | func | function to be called when drag end | |
| onTapCard | func | function to be called when tapping a card. it receives the tapped card index | |
| onTapCardDeadZone | number | maximum amount of movement before a tap is no longer recognized as a tap | 5 |
Swipe animation props
| Props | type | description | default |
|---|---|---|---|
| verticalThreshold | number | vertical swipe threshold | height / 5 |
| horizontalThreshold | number | horizontal swipe threshold | width / 4 |
| swipeAnimationDuration | number | duration of the swipe animation | 350 |
| disableBottomSwipe | bool | disable bottom swipe | false |
| disableLeftSwipe | bool | disable left swipe | false |
| disableRightSwipe | bool | disable right swipe | false |
| disableTopSwipe | bool | disable top swipe | false |
Stack props
| Props | type | description | default |
|---|---|---|---|
| stackSeparation | number | vertical separation between underlaying cards | 10 |
| stackScale | number | percentage to reduce the size of each underlaying card | 3 |
| stackAnimationFriction | number | spring animation friction (bounciness) | 7 |
| stackAnimationTension | number | spring animation tension (speed) | 40 |
Rotation animation props
| Props | type | description | default |
|---|---|---|---|
| inputRotationRange | array | x values range for the rotation output | [-width / 2, 0, width / 2] |
| outputRotationRange | array | rotation values for the x values in inputRotationRange | ["-10deg", "0deg", "10deg"] |
Opacity animation props
| Props | type | description | default |
|---|---|---|---|
| animateCardOpacity | bool | animate card opacity | false |
| inputCardOpacityRangeX | array | pan x card opacity input range | [-width / 2, -width / 3, 0, width / 3, width / 2] |
| outputCardOpacityRangeX | array | opacity values for the values in inputCardOpacityRangeX | [0.8, 1, 1, 1, 0.8] |
| inputCardOpacityRangeY | array | pan y card opacity input range | [-height / 2, -height / 3, 0, height / 3, height / 2] |
| outputCardOpacityRangeY | array | opacity values for the values in inputCardOpacityRangeY | [0.8, 1, 1, 1, 0.8] |
| animateOverlayLabelsOpacity | bool | animate card overlay labels opacity | false |
| inputOverlayLabelsOpacityRangeX | array | pan x overlay labels opacity input range | [-width / 3, -width / 4, 0, width / 4, width / 3] |
| outputOverlayLabelsOpacityRangeX | array | opacity values for the values in inputOverlayLabelsOpacityRangeX | [1, 0, 0, 0, 1] |
| inputOverlayLabelsOpacityRangeY | array | pan x overlay labels opacity input range | [-height / 4, -height / 5, 0, height / 5, height / 4] |
| outputOverlayLabelsOpacityRangeY | array | opacity values for the values in inputOverlayLabelsOpacityRangeY | [1, 0, 0, 0, 1] |
| overlayOpacityVerticalThreshold | number | vertical threshold for overlay label | height / 5 |
| overlayOpacityHorizontalThreshold | number | horizontal threshold for overlay label | width / 4 |
2 steps of inputOverlayLabelsOpacityRangeX and inputOverlayLabelsOpacityRangeY should match horizontalThreshold and verticalThreshold, respectively.
Swipe overlay labels
| Props | type | description | default |
|---|---|---|---|
| overlayLabels | object | swipe labels title and style | null, see below for format |
| overlayLabelStyle | object | swipe labels style | null, see below for format |
| overlayLabelWrapperStyle | object | overlay label wrapper style | see below for default |
overlayLabelStyle
1{ 2 fontSize: 45, 3 fontWeight: 'bold', 4 borderRadius: 10, 5 padding: 10, 6 overflow: 'hidden' 7}
overlayLabelWrapperStyle default props:
1{ 2 position: 'absolute', 3 backgroundColor: 'transparent', 4 zIndex: 2, 5 flex: 1, 6 width: '100%', 7 height: '100%' 8}
overlayLabels default props :
1{ 2 bottom: { 3 element: <Text>BLEAH</Text> /* Optional */ 4 title: 'BLEAH', 5 style: { 6 label: { 7 backgroundColor: 'black', 8 borderColor: 'black', 9 color: 'white', 10 borderWidth: 1 11 }, 12 wrapper: { 13 flexDirection: 'column', 14 alignItems: 'center', 15 justifyContent: 'center' 16 } 17 } 18 }, 19 left: { 20 element: <Text>NOPE</Text> /* Optional */ 21 title: 'NOPE', 22 style: { 23 label: { 24 backgroundColor: 'black', 25 borderColor: 'black', 26 color: 'white', 27 borderWidth: 1 28 }, 29 wrapper: { 30 flexDirection: 'column', 31 alignItems: 'flex-end', 32 justifyContent: 'flex-start', 33 marginTop: 30, 34 marginLeft: -30 35 } 36 } 37 }, 38 right: { 39 element: <Text>LIKE</Text> /* Optional */ 40 title: 'LIKE', 41 style: { 42 label: { 43 backgroundColor: 'black', 44 borderColor: 'black', 45 color: 'white', 46 borderWidth: 1 47 }, 48 wrapper: { 49 flexDirection: 'column', 50 alignItems: 'flex-start', 51 justifyContent: 'flex-start', 52 marginTop: 30, 53 marginLeft: 30 54 } 55 } 56 }, 57 top: { 58 element: <Text>SUPER</Text> /* Optional */ 59 title: 'SUPER LIKE', 60 style: { 61 label: { 62 backgroundColor: 'black', 63 borderColor: 'black', 64 color: 'white', 65 borderWidth: 1 66 }, 67 wrapper: { 68 flexDirection: 'column', 69 alignItems: 'center', 70 justifyContent: 'center' 71 } 72 } 73 } 74}
Swipe back to previous card props
Make sure you set showSecondCard={false} for smoother and proper transitions while going back to previous card.
| Props | type | description | default |
|---|---|---|---|
| goBackToPreviousCardOnSwipeLeft | bool | previous card is rendered on left swipe | false |
| goBackToPreviousCardOnSwipeRight | bool | previous card is rendered on right swipe | false |
| goBackToPreviousCardOnSwipeTop | bool | previous card is rendered on top swipe | false |
| goBackToPreviousCardOnSwipeBottom | bool | previous card is rendered on bottom swipe | false |
Style props
| Props | type | description | default |
|---|---|---|---|
| backgroundColor | string | background color for the view containing the cards | '#4FD0E9' |
| marginTop | number | marginTop for the swiper container | 0 |
| marginBottom | number | marginBottom for the swiper container | 0 |
| cardVerticalMargin | number | card vertical margin | 60 |
| cardHorizontalMargin | number | card horizontal margin | 20 |
| childrenOnTop | bool | render children on top or not | false |
| cardStyle | node | override swipable card style | {} |
| containerStyle | node | overrides for the containing | {} |
| pointerEvents | string | pointerEvents prop for the containing | 'auto' |
| useViewOverflow | bool | use ViewOverflow instead of View for the Swiper component | true |
Swipe back method info
Method
| Name | type | description |
|---|---|---|
| swipeBack | callback | swipe back into deck last swiped card. stacksize should be 2 cards or more |
Props
| Props | type | description | default |
|---|---|---|---|
| previousCardDefaultPositionX | number | Animation start position oX when card swipes back into deck | -width |
| previousCardDefaultPositionY | number | Animation start position oY when card swipes back into deck | -height |
| stackAnimationFriction | number | spring animation friction (bounciness) | 7 |
| stackAnimationTension | number | spring animation tension (speed) | 40 |
| stackAnimationTension | number | spring animation tension (speed) | 40 |
| swipeBackCard | bool | renders swipe back card, in order to animate it | false |
Methods
To trigger imperative animations, you can use a reference to the Swiper component.
| Name | arguments | description |
|---|---|---|
| swipeLeft | mustDecrementCardIndex = false | swipe left to the next card |
| swipeRight | mustDecrementCardIndex = false | swipe right to the next card |
| swipeTop | mustDecrementCardIndex = false | swipe top to the next card |
| swipeBottom | mustDecrementCardIndex = false | swipe bottom to the next card |
| jumpToCardIndex | cardIndex | set the current card index |
Usage example
1render () { 2 <View style={styles.container}> 3 <Swiper 4 cards={['DO', 'MORE', 'OF', 'WHAT', 'MAKES', 'YOU', 'HAPPY']} 5 renderCard={(card) => { 6 return ( 7 <View style={styles.card}> 8 <Text style={styles.text}>{card}</Text> 9 </View> 10 ) 11 }} 12 onSwiped={(cardIndex) => {console.log(cardIndex)}} 13 onSwipedAll={() => {console.log('onSwipedAll')}} 14 cardIndex={0} 15 backgroundColor={'#4FD0E9'} 16 stackSize= {3}> 17 <Button 18 onPress={() => {console.log('oulala')}} 19 title="Press me"> 20 You can press me 21 </Button> 22 </Swiper> 23 </View> 24}
Demo inside the Example Folder
Stylesheet example
1const styles = StyleSheet.create({ 2 container: { 3 flex: 1, 4 backgroundColor: "#F5FCFF" 5 }, 6 card: { 7 flex: 1, 8 borderRadius: 4, 9 borderWidth: 2, 10 borderColor: "#E8E8E8", 11 justifyContent: "center", 12 backgroundColor: "white" 13 }, 14 text: { 15 textAlign: "center", 16 fontSize: 50, 17 backgroundColor: "transparent" 18 } 19});
Updating props on card content? (dynamic card content)
Card properties may change, including on already swiped cards, which would yield no effects to users as the cards would no longer be displayed [based on initial issue].
A possible fix for the situation is setting the cardIndex on the parent component whenever deck re-renders are needed.
const { cardIndex } = this.props;
return (<Swiper
ref={swiper => {
this.swiper = swiper;
}}
{...customSwiperProps}
cardIndex={cardIndex}
/>)
Passing along the cardIndex to the swiper will allow external changes on the property, thus triggering a re-render of the deck of cards. All onSwipe callbacks return the cardIndex that can be used to push the updated cardIndex to app state (redux or something else).
By making sure that external changes on the cardIndex match those the swiper performs (increment on swipes, decrement on swipeBack) one can ensure no re-renders occur when not needed.
Development
If you've encountered issues while running the example app located in the example folder, try the following steps:
If you're using yarn
- rm -rf node_modules && rm yarn.lock
- yarn cache clean
- yarn
- react-native run-ios
- react-native run-android
If you're using npm
- rm -rf node_modules && rm package-lock.json
- npm cache clean --force
- npm install
- react-native run-ios
- react-native run-android
If bundler doesn't automatically start Simply run yarn start or npm start in the Example folder.
Don't forget to bump project and example versions in package.json whenever you submit a PR.
No vulnerabilities found.
Reason
license file detected
Details
- Info: project has a license file: LICENSE:0
- Info: FSF or OSI recognized license: ISC License: LICENSE:0
Reason
binaries present in source code
Details
- Warn: binary detected: example/android/gradle/wrapper/gradle-wrapper.jar:1
Reason
Found 15/30 approved changesets -- score normalized to 5
Reason
0 commit(s) and 1 issue activity found in the last 90 days -- score normalized to 0
Reason
no effort to earn an OpenSSF best practices badge detected
Reason
security policy file not detected
Details
- Warn: no security policy file detected
- Warn: no security file to analyze
- Warn: no security file to analyze
- Warn: no security file to analyze
Reason
project is not fuzzed
Details
- Warn: no fuzzer integrations found
Reason
branch protection not enabled on development/release branches
Details
- Warn: branch protection not enabled for branch 'master'
Reason
SAST tool is not run on all commits -- score normalized to 0
Details
- Warn: 0 commits out of 17 are checked with a SAST tool
Reason
100 existing vulnerabilities detected
Details
- Warn: Project is vulnerable to: GHSA-v88g-cgmw-v5xw
- Warn: Project is vulnerable to: GHSA-93q8-gq69-wqmw
- Warn: Project is vulnerable to: GHSA-fwr7-v2mv-hh25
- Warn: Project is vulnerable to: GHSA-67hx-6x53-jw92
- Warn: Project is vulnerable to: GHSA-j4mr-9xw3-c9jx
- Warn: Project is vulnerable to: GHSA-7p89-p6hx-q4fw
- Warn: Project is vulnerable to: GHSA-qwcr-r2fm-qrc7
- Warn: Project is vulnerable to: GHSA-cwfw-4gq5-mrqx
- Warn: Project is vulnerable to: GHSA-g95f-p29q-9xw4
- Warn: Project is vulnerable to: GHSA-grv7-fg5c-xmjg
- Warn: Project is vulnerable to: GHSA-pxg6-pf52-xh8x
- Warn: Project is vulnerable to: GHSA-3xgq-45jj-v275
- Warn: Project is vulnerable to: GHSA-9vvw-cc9w-f27h
- Warn: Project is vulnerable to: GHSA-gxpj-cx7g-858c
- Warn: Project is vulnerable to: GHSA-w573-4hg7-7wgq
- Warn: Project is vulnerable to: GHSA-9qj9-36jm-prpv
- Warn: Project is vulnerable to: GHSA-q42p-pg8m-cqh6
- Warn: Project is vulnerable to: GHSA-w457-6q6x-cgp9
- Warn: Project is vulnerable to: GHSA-62gr-4qp9-h98f
- Warn: Project is vulnerable to: GHSA-f52g-6jhx-586p
- Warn: Project is vulnerable to: GHSA-2cf5-4w76-r9qv
- Warn: Project is vulnerable to: GHSA-3cqr-58rm-57f8
- Warn: Project is vulnerable to: GHSA-g9r4-xpmj-mj65
- Warn: Project is vulnerable to: GHSA-q2c6-c6pm-g3gh
- Warn: Project is vulnerable to: GHSA-765h-qjxv-5f44
- Warn: Project is vulnerable to: GHSA-f2jv-r9rf-7988
- Warn: Project is vulnerable to: GHSA-43f8-2h32-f4cj
- Warn: Project is vulnerable to: GHSA-2pr6-76vf-7546
- Warn: Project is vulnerable to: GHSA-8j8c-7jfh-h6hx
- Warn: Project is vulnerable to: GHSA-896r-f27r-55mw
- Warn: Project is vulnerable to: GHSA-9c47-m6qq-7p4h
- Warn: Project is vulnerable to: GHSA-6c8f-qphg-qjgp
- Warn: Project is vulnerable to: GHSA-jf85-cpcp-j695
- Warn: Project is vulnerable to: GHSA-fvqr-27wr-82fm
- Warn: Project is vulnerable to: GHSA-4xc9-xhrj-v574
- Warn: Project is vulnerable to: GHSA-x5rq-j2xg-h7qm
- Warn: Project is vulnerable to: GHSA-p6mc-m468-83gw
- Warn: Project is vulnerable to: GHSA-29mw-wpgm-hmr9
- Warn: Project is vulnerable to: GHSA-35jh-r3h4-6jhm
- Warn: Project is vulnerable to: GHSA-f9cm-qmx5-m98h
- Warn: Project is vulnerable to: GHSA-7wpw-2hjm-89gp
- Warn: Project is vulnerable to: GHSA-952p-6rrq-rcjv
- Warn: Project is vulnerable to: GHSA-wrvr-8mpx-r7pp
- Warn: Project is vulnerable to: GHSA-f8q6-p94x-37v3
- Warn: Project is vulnerable to: GHSA-vh95-rmgr-6w4m
- Warn: Project is vulnerable to: GHSA-xvch-5gv4-984h
- Warn: Project is vulnerable to: GHSA-fhjf-83wg-r2j9
- Warn: Project is vulnerable to: GHSA-gwg9-rgvj-4h5j
- Warn: Project is vulnerable to: GHSA-w9mr-4mfr-499f
- Warn: Project is vulnerable to: GHSA-7mc5-chhp-fmc3
- Warn: Project is vulnerable to: GHSA-r683-j2x4-v87g
- Warn: Project is vulnerable to: GHSA-5fw9-fq32-wv5p
- Warn: Project is vulnerable to: GHSA-hj48-42vr-x3v9
- Warn: Project is vulnerable to: GHSA-4cpg-3vgw-4877
- Warn: Project is vulnerable to: GHSA-gqgv-6jq5-jjj9
- Warn: Project is vulnerable to: GHSA-hrpp-h998-j3pp
- Warn: Project is vulnerable to: GHSA-rxrc-rgv4-jpvx
- Warn: Project is vulnerable to: GHSA-p8p7-x288-28g6
- Warn: Project is vulnerable to: GHSA-c2qf-rxjj-qqgw
- Warn: Project is vulnerable to: GHSA-m6fv-jmcg-4jfg
- Warn: Project is vulnerable to: GHSA-cm22-4g7w-348p
- Warn: Project is vulnerable to: GHSA-4g88-fppr-53pp
- Warn: Project is vulnerable to: GHSA-4jqc-8m5r-9rpr
- Warn: Project is vulnerable to: GHSA-g4rg-993r-mgx7
- Warn: Project is vulnerable to: GHSA-gff7-g5r8-mg8m
- Warn: Project is vulnerable to: GHSA-jgrx-mgxx-jf9v
- Warn: Project is vulnerable to: GHSA-72xf-g2v4-qvf3
- Warn: Project is vulnerable to: GHSA-662x-fhqg-9p8v
- Warn: Project is vulnerable to: GHSA-394c-5j6w-4xmx
- Warn: Project is vulnerable to: GHSA-78cj-fxph-m83p
- Warn: Project is vulnerable to: GHSA-fhg7-m89q-25r3
- Warn: Project is vulnerable to: GHSA-5v72-xg48-5rpm
- Warn: Project is vulnerable to: GHSA-3h5v-q93c-6h6q
- Warn: Project is vulnerable to: GHSA-h6q6-9hqw-rwfv
- Warn: Project is vulnerable to: GHSA-5fg8-2547-mr8q
- Warn: Project is vulnerable to: GHSA-crh6-fp67-6883
- Warn: Project is vulnerable to: GHSA-c4w7-xm78-47vh
- Warn: Project is vulnerable to: GHSA-p9pc-299p-vxgp
- Warn: Project is vulnerable to: GHSA-h6ch-v84p-w6p9
- Warn: Project is vulnerable to: GHSA-4gmj-3p3h-gm8h
- Warn: Project is vulnerable to: GHSA-qrmc-fj45-qfc2
- Warn: Project is vulnerable to: GHSA-44pw-h2cw-w3vq
- Warn: Project is vulnerable to: GHSA-jp4x-w63m-7wgm
- Warn: Project is vulnerable to: GHSA-c429-5p7v-vgjp
- Warn: Project is vulnerable to: GHSA-4hpf-3wq7-5rpr
- Warn: Project is vulnerable to: GHSA-f522-ffg8-j8r6
- Warn: Project is vulnerable to: GHSA-282f-qqgm-c34q
- Warn: Project is vulnerable to: GHSA-2m96-9w4j-wgv7
- Warn: Project is vulnerable to: GHSA-h726-x36v-rx45
- Warn: Project is vulnerable to: GHSA-7px7-7xjx-hxm8
- Warn: Project is vulnerable to: GHSA-x5pg-88wf-qq4p
- Warn: Project is vulnerable to: GHSA-5v2h-r2cx-5xgj
- Warn: Project is vulnerable to: GHSA-rrrm-qjm4-v8hf
- Warn: Project is vulnerable to: GHSA-6394-6h9h-cfjg
- Warn: Project is vulnerable to: GHSA-6g33-f262-xjp4
- Warn: Project is vulnerable to: GHSA-4rq4-32rv-6wp6
- Warn: Project is vulnerable to: GHSA-64g7-mvw6-v9qj
- Warn: Project is vulnerable to: GHSA-2m39-62fm-q8r3
- Warn: Project is vulnerable to: GHSA-mf6x-7mm4-x2g7
- Warn: Project is vulnerable to: GHSA-g7q5-pjjr-gqvp
Score
2.3
/10
Last Scanned on 2025-01-20
The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.
Learn MoreOther packages similar to react-native-deck-swiper
react-native-snap-carousel
3.9.1
Swiper/carousel component for React Native with previews, multiple layouts, parallax images, performant handling of huge numbers of items, and RTL support. Compatible with Android & iOS.
@perroudsky/react-native-deck-swiper
2.0.13
Awesome tinder like card swiper for react-native. Highly Customizable!
@coorpacademy/react-native-deck-swiper
1.5.35
Awesome tinder like card swiper for react-native. Highly Customizable!
@agungkes/react-native-deck-swiper
1.6.10
Awesome tinder like card swiper for react-native. Highly Customizable!