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).

Tutorial on YouTube

Link to code on GitHub

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

1. cd example/
2. npm install
3. 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

1. Make edits to the code in the src/ directory.
2. From the root project directory, above example/, run npm pack.
3. In the example/ directory, run npm install ../react-native-dynamic-deck-swiper-X.Y.Z.tgz where X.Y.Z is the current version of the file. This should update package-lock.json.
4. Then run npm start.

Don't forget to bump project and example versions in package.json whenever you submit a PR.