react-native-cards-swipe
v1.2.1
Published
Powerful RN Card Swiper
Downloads
1,320
Readme
react-native-cards-swipe
Powerful React Native Card Stack Swiper
Preview
Installation
- Install the react-native-cards-swipe package.
npm install react-native-cards-swipe
- Then you'll need to install react-native-reanimated version >= 2.1.0 to your project.
- Finally, you'll need to install react-native-gesture-handler to your project.
Usage
import React from 'react';
import { Image, StyleSheet, View } from 'react-native';
import CardsSwipe from 'react-native-cards-swipe';
const cardsData = [
{ src: require('./assets/images/1.jpg') },
{ src: require('./assets/images/2.jpg') },
{ src: require('./assets/images/3.jpg') },
{ src: require('./assets/images/4.jpg') },
];
export default function App() {
return (
<View style={styles.container}>
<CardsSwipe
cards={cardsData}
cardContainerStyle={styles.cardContainer}
renderCard={(card) => (
<View style={styles.card}>
<Image
style={styles.cardImg}
source={card.src}
/>
</View>
)}
/>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
},
cardContainer: {
width: '92%',
height: '70%',
},
card: {
width: '100%',
height: '100%',
shadowColor: '#000000',
shadowOffset: {
width: 0,
height: 8,
},
shadowOpacity: 0.07,
shadowRadius: 3.3,
},
cardImg: {
width: '100%',
height: '100%',
borderRadius: 13,
},
});
CardsSwipe props
| Props | type | description | required | default | | --------------------| ------------- | --------------------------------------| -------------| ------------- | | cards | array | data for the cards | yes | | | renderCard | func | renders the card with the current data| yes | | | initialIndex | number | initial card index | | 0 | | containerStyle | object | container style | | {} | | cardContainerStyle | object | cardContainerStyle style | | {} | | lowerCardZoom | number | lower card zoom | | 0.95 | | animDuration | number | card animation duration | | 150 | | horizontalThreshold | number | horizontal swipe threshold | | width * 0.65 | | rotationAngle | number | rotation angle (deg) for the card | | 10 | | loop | bool | keep swiping indefinitely | | true | | renderNoMoreCard | func | renders what is shown after swiped last card| | () => null | | renderYep | func | renders Yep label | | () => null | | renderNope | func | renders Nope label | | () => null | | onSwipeStart | func | function to be called when a card swipe starts | | () => {} | | onSwipeChangeDirection | func | function to be called when a card is active and changes its direction (left, right). | | () => {} | | onSwipeEnd | func | function to be called when a card swipe ends (card is released) | | () => {} | | onSwiped | func | function to be called when a card is swiped. it receives the swiped card index | | () => {} | | 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 | | () => {} | | onNoMoreCards | func | function to be called when all elements in array are finished | | () => {} |
CardsSwipe actions
| Props | type | | ----------------- | ------------- | | swipeLeft | func | | swipeRight | func |
<CardsSwipe ref={swiper => { this.swiper = swiper }} />
<TouchableOpacity onPress={ () => { this.swiper.swipeLeft() }}>
<Text>Left</Text>
</TouchableOpacity>
Contributing
See the contributing guide to learn how to contribute to the repository and the development workflow.
License
MIT