diff --git a/README.md b/README.md index c4341ef6..fbce7966 100644 --- a/README.md +++ b/README.md @@ -51,17 +51,18 @@ With respect to bugfixes and further developments, please check the [To Do](http ### 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 | +| 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 | +| enableInnerScroll | bool | enable/disable vertical scroll inside the card | | false | +| stackSize | number | number of underlaying cards to show (showSecondCard must be enabled) | | 1 | ### Event callbacks diff --git a/Swiper.js b/Swiper.js index 418cbd42..a8e6726a 100644 --- a/Swiper.js +++ b/Swiper.js @@ -757,12 +757,24 @@ class Swiper extends Component { } pushCardToStack = (renderedCards, index, position, key, firstCard) => { - const { cards } = this.props + const { cards, onCardScroll } = this.props const stackCardZoomStyle = this.calculateStackCardZoomStyle(position) const stackCard = this.props.renderCard(cards[index], index) const swipableCardStyle = this.calculateSwipableCardStyle() const renderOverlayLabel = this.renderOverlayLabel() - renderedCards.push( + const card = this.props.enableInnerScroll ? ( + + {firstCard ? renderOverlayLabel : null} + {stackCard} + + ):( ) + renderedCards.push(card) } renderStack = () => { @@ -875,6 +888,7 @@ Swiper.propTypes = { disableLeftSwipe: PropTypes.bool, disableRightSwipe: PropTypes.bool, disableTopSwipe: PropTypes.bool, + enableInnerScroll: PropTypes.bool, goBackToPreviousCardOnSwipeBottom: PropTypes.bool, goBackToPreviousCardOnSwipeLeft: PropTypes.bool, goBackToPreviousCardOnSwipeRight: PropTypes.bool, @@ -891,6 +905,7 @@ Swiper.propTypes = { keyExtractor: PropTypes.func, marginBottom: PropTypes.number, marginTop: PropTypes.number, + onCardScroll: PropTypes.func, onSwiped: PropTypes.func, onSwipedAborted: PropTypes.func, onSwipedAll: PropTypes.func, @@ -948,6 +963,7 @@ Swiper.defaultProps = { disableLeftSwipe: false, disableRightSwipe: false, disableTopSwipe: false, + enableInnerScroll: false, horizontalSwipe: true, horizontalThreshold: width / 4, goBackToPreviousCardOnSwipeBottom: false, diff --git a/index.d.ts b/index.d.ts index bd88f365..3e2f12cf 100644 --- a/index.d.ts +++ b/index.d.ts @@ -16,6 +16,7 @@ declare module 'react-native-deck-swiper' { disableLeftSwipe?: boolean; disableRightSwipe?: boolean; disableTopSwipe?: boolean; + enableInnerScroll?: boolean; horizontalSwipe?: boolean; horizontalThreshold?: number; goBackToPreviousCardOnSwipeBottom?: boolean; @@ -31,6 +32,7 @@ declare module 'react-native-deck-swiper' { keyExtractor?: (cardData: T) => string; marginBottom?: number; marginTop?: number; + onCardScroll?: (event: NativeSyntheticEvent) => void; onSwiped?: (cardIndex: number) => void; onSwipedAborted?: () => void; onSwipedAll?: () => void;