README
react-native-dynamic-deck-swiper
Overview
This is a React Native component for creating a Tinder-like deck swiper where you can specify the next card based on the user's swipe direction and the previous cards, instead of needing to initialize the component with the whole deck upfront.
Example use case
Imagine you want to build an interactive card swiping game, like Reigns on iOS. Maybe the user has to navigate a maze using left and right swipes. In this case, you can't specify the full, linear deck of cards because the next card shown depends on which direction the user swiped. Using this component you would pass a function into the getNextCardData prop that returns the data for the next card based on which direction the user swiped.
See below for a code example.
Installation
npm install react-native-dynamic-deck-swiper --save
Prior Work
The code for this component is adapted from the tutorial created by Unsure Programmer (Varun Nath).
If you're looking for a more fully featured deck swiper, or if you don't need to set the next card dynamically, check out the great component from alexbrilliant, react-native-deck-swiper, which inspired the name and props of this component.
Preview
Props
See component propTypes in the source code for additional usage info.
Card props
Props | type | description | required | default |
---|---|---|---|---|
getNextCardData | func({first, left, right, previousCards}) | return value is passed to render prop as cardData for the next card | required | |
children | func(cardData) | render prop to render the card based on the data | required | |
preventVerticalDragging | bool | enable/disable horizontal swiping | true |
Swipe animation props
Props | type | description | default |
---|---|---|---|
horizontalThreshold | number | horizontal swipe threshold | width / 4 |
verticalThreshold | number | vertical swipe threshold | height / 4 |
disableSwipeUp | bool | prevent upward swipes | true |
disableSwipeDown | bool | prevent downward swipes | true |
disableSwipeLeft | bool | prevent swipes to the left | false |
disableSwipeDown | bool | prevent swipes to the right | false |
Event callbacks
Props | type | description | Signature |
---|---|---|---|
onEndReached | 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 and direction | (cardData, {left, right}) => {} |
onSwipeAborted | func | function to be called when a card is released before reaching the threshold | () => {} |
onSwipedUp | func | function to be called when a card is swiped up. it receives the swiped card index | (cardData) => {} |
onSwipedDown | func | function to be called when a card is swiped down. it receives the swiped card index | (cardData) => {} |
onSwipedLeft | func | function to be called when a card is swiped left. it receives the swiped card index | (cardData) => {} |
onSwipedRight | func | function to be called when a card is swiped right. it receives the swiped card index | (cardData) => {} |
onDragging | func | function to be called while a card is being moved. it receives X and Y positions | (x, y) => {} |
onDragStart | func | function to be called when drag start | |
onDragEnd | func | function to be called when drag end |
Usage example
import Swiper from 'react-native-dynamic-deck-swiper';
function MyDynamicSwiper() {
return (
<View style={styles.container}>
<Swiper
getNextCardData={({ first, left, right, previousCards }) => {
if (previousCards.length >= 10) {
// End of deck
return null;
}
if (first) {
return 'This is the first card. This is card #1.';
} else if (left) {
return `You swiped to the left. This is card #${previousCards.length +
1}.`;
} else if (right) {
return `You swiped to the right. This is card #${previousCards.length +
1}.`;
}
}}
>
{(card) =>
card === null ? (
<View style={styles.card}>
<Text style={styles.text}>This is the end of the deck, pal.</Text>
</View>
) : (
<View style={styles.card}>
<Text style={styles.text}>{card}</Text>
</View>
)
}
</Swiper>
</View>
);
}
Runnable demo inside the example Folder
Stylesheet example
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#F5FCFF'
},
card: {
flex: 1,
borderRadius: 4,
borderWidth: 2,
borderColor: '#E8E8E8',
justifyContent: 'center',
backgroundColor: 'turquoise',
marginTop: 60,
marginBottom: 60,
marginLeft: 30,
marginRight: 30,
borderRadius: 30,
padding: 10
},
text: {
textAlign: 'center',
fontSize: 50,
backgroundColor: 'transparent'
}
});
Development
Running the example Expo app
cd example/
npm install
npm start
You can change the example code by editing App.js
For specific usage info, see the Expo CLI docs.
Updating the Swiper component
- Make edits to the code in the src/ directory.
- From the root project directory, above example/, run
npm pack
. - In the example/ directory, run
npm install ../react-native-dynamic-deck-swiper-X.Y.Z.tgz
whereX.Y.Z
is the current version of the file. This should update package-lock.json. - Then run
npm start
.
Don't forget to bump project and example versions in package.json whenever you submit a PR.