@andrelfnavarro/react-native-deck-swiper

v2.0.0

Published

3 years ago

Awesome tinder like card swiper for react-native. Highly Customizable!

Downloads

0High
0Medium
0Low

andrelfnavarro

react-native react-native-component tinder cards card swipe swiper deck animation

react-native-deck-swiper

Installation

npm install react-native-deck-swiper --save

Overview

[x] Rotation animation
[x] Opacity animation
[x] Zoom animation
[x] Overlay labels
[x] Show next card while swiping
[x] Swipe event callbacks
[x] Trigger swipe animations programmatically
[x] Jump to a card index
[x] Swipe to previous card
[x] Underlaying cards offset
[x] Never-ending, animated deck when infinite property is true
[x] Swipe back to previous card with a custom animation

Preview

App preview App preview2

Props

Card props

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 | | (cardIndex) => {} | | 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 | | (cardIndex) => {} | | onSwipedRight | func | function to be called when a card is swiped right. it receives the swiped card index | | (cardIndex) => {} | | onSwipedTop | func | function to be called when a card is swiped top. it receives the swiped card index | | (cardIndex) => {} | | onSwipedBottom | func | function to be called when a card is swiped bottom. it receives the swiped card index | | (cardIndex) => {} | | onSwiping | func | function to be called when a card is being moved. it receives X and Y positions | | (x, y) => {} | | 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 | | (cardIndex) => {} | | onTapCardDeadZone | number | maximum amount of movement before a tap is no longer recognized as a tap | 5 |

Swipe animation props

Stack props

Rotation animation props

Opacity animation props

2 steps of inputOverlayLabelsOpacityRangeX and inputOverlayLabelsOpacityRangeY should match horizontalThreshold and verticalThreshold, respectively.

Swipe overlay labels

overlayLabelStyle

{
  fontSize: 45,
  fontWeight: 'bold',
  borderRadius: 10,
  padding: 10,
  overflow: 'hidden'
}

overlayLabelWrapperStyle default props:

{
  position: 'absolute',
  backgroundColor: 'transparent',
  zIndex: 2,
  flex: 1,
  width: '100%',
  height: '100%'
}

overlayLabels default props :

{
  bottom: {
	element: <Text>BLEAH</Text> /* Optional */
	title: 'BLEAH',
    style: {
      label: {
        backgroundColor: 'black',
        borderColor: 'black',
        color: 'white',
        borderWidth: 1
      },
      wrapper: {
        flexDirection: 'column',
        alignItems: 'center',
        justifyContent: 'center'
      }
    }
  },
  left: {
	element: <Text>NOPE</Text> /* Optional */
	title: 'NOPE',
    style: {
      label: {
        backgroundColor: 'black',
        borderColor: 'black',
        color: 'white',
        borderWidth: 1
      },
      wrapper: {
        flexDirection: 'column',
        alignItems: 'flex-end',
        justifyContent: 'flex-start',
        marginTop: 30,
        marginLeft: -30
      }
    }
  },
  right: {
	element: <Text>LIKE</Text> /* Optional */
	title: 'LIKE',
    style: {
      label: {
        backgroundColor: 'black',
        borderColor: 'black',
        color: 'white',
        borderWidth: 1
      },
      wrapper: {
        flexDirection: 'column',
        alignItems: 'flex-start',
        justifyContent: 'flex-start',
        marginTop: 30,
        marginLeft: 30
      }
    }
  },
  top: {
	element: <Text>SUPER</Text> /* Optional */
	title: 'SUPER LIKE',
    style: {
      label: {
        backgroundColor: 'black',
        borderColor: 'black',
        color: 'white',
        borderWidth: 1
      },
      wrapper: {
        flexDirection: 'column',
        alignItems: 'center',
        justifyContent: 'center'
      }
    }
  }
}

Swipe back to previous card props

Make sure you set showSecondCard={false} for smoother and proper transitions while going back to previous card.

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 style | {} | | 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

Props

Methods

To trigger imperative animations, you can use a reference to the Swiper component.

Usage example

render () {
    <View style={styles.container}>
        <Swiper
            cards={['DO', 'MORE', 'OF', 'WHAT', 'MAKES', 'YOU', 'HAPPY']}
            renderCard={(card) => {
                return (
                    <View style={styles.card}>
                        <Text style={styles.text}>{card}</Text>
                    </View>
                )
            }}
            onSwiped={(cardIndex) => {console.log(cardIndex)}}
            onSwipedAll={() => {console.log('onSwipedAll')}}
            cardIndex={0}
            backgroundColor={'#4FD0E9'}
            stackSize= {3}>
            <Button
                onPress={() => {console.log('oulala')}}
                title="Press me">
                You can press me
            </Button>
        </Swiper>
    </View>
}

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: "white"
  },
  text: {
    textAlign: "center",
    fontSize: 50,
    backgroundColor: "transparent"
  }
});

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.

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

react-native-deck-swiper

Installation

Overview

Preview

Props

Card props

Event callbacks

Swipe animation props

Stack props

Rotation animation props

Opacity animation props

Swipe overlay labels

overlayLabelStyle

overlayLabelWrapperStyle default props:

overlayLabels default props :

Swipe back to previous card props

Style props

Swipe back method info

Method

Props

Methods

Usage example

Stylesheet example

Updating props on card content? (dynamic card content)

Development