From 2c0dcd198ed0fba5141e38a83be24c994d4e1a66 Mon Sep 17 00:00:00 2001 From: rolud Date: Wed, 17 May 2023 08:55:03 +0100 Subject: [PATCH 1/4] feat: add prop to enable scroll inside the card --- Swiper.js | 16 +++++++++++++++- 1 file changed, 15 insertions(+), 1 deletion(-) diff --git a/Swiper.js b/Swiper.js index 418cbd42..045808f5 100644 --- a/Swiper.js +++ b/Swiper.js @@ -762,7 +762,18 @@ class Swiper extends Component { 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 +887,7 @@ Swiper.propTypes = { disableLeftSwipe: PropTypes.bool, disableRightSwipe: PropTypes.bool, disableTopSwipe: PropTypes.bool, + enableInnerScroll: PropTypes.bool, goBackToPreviousCardOnSwipeBottom: PropTypes.bool, goBackToPreviousCardOnSwipeLeft: PropTypes.bool, goBackToPreviousCardOnSwipeRight: PropTypes.bool, @@ -948,6 +961,7 @@ Swiper.defaultProps = { disableLeftSwipe: false, disableRightSwipe: false, disableTopSwipe: false, + enableInnerScroll: false, horizontalSwipe: true, horizontalThreshold: width / 4, goBackToPreviousCardOnSwipeBottom: false, From 1d596fb9db684f562d85a0721fa61e6a92071329 Mon Sep 17 00:00:00 2001 From: rolud Date: Wed, 17 May 2023 09:00:52 +0100 Subject: [PATCH 2/4] feat: added enableInnerScroll to types --- index.d.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/index.d.ts b/index.d.ts index bd88f365..7d8dacf8 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; From 8cfa5a8057a35169df0dc8b1b7a520a14208ee6a Mon Sep 17 00:00:00 2001 From: rolud Date: Wed, 17 May 2023 11:28:44 +0100 Subject: [PATCH 3/4] docs: added docs for enableInnerScroll prop --- README.md | 23 ++++++++++++----------- 1 file changed, 12 insertions(+), 11 deletions(-) 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 From a5d088cd0d0d1bac6521ad3f344b49a9fe9633ba Mon Sep 17 00:00:00 2001 From: rolud Date: Tue, 23 May 2023 16:44:23 +0200 Subject: [PATCH 4/4] feat: onCardScroll props --- Swiper.js | 4 +++- index.d.ts | 1 + 2 files changed, 4 insertions(+), 1 deletion(-) diff --git a/Swiper.js b/Swiper.js index 045808f5..a8e6726a 100644 --- a/Swiper.js +++ b/Swiper.js @@ -757,7 +757,7 @@ 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() @@ -769,6 +769,7 @@ class Swiper extends Component { {...this._panResponder.panHandlers} showsVerticalScrollIndicator={false} contentContainerStyle={{ paddingBottom: 50 }} + onScroll={onCardScroll} > {firstCard ? renderOverlayLabel : null} {stackCard} @@ -904,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, diff --git a/index.d.ts b/index.d.ts index 7d8dacf8..3e2f12cf 100644 --- a/index.d.ts +++ b/index.d.ts @@ -32,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;