Skip to content

Tinder-like react-native deck swiper that lets you dynamically set the next card

License

Notifications You must be signed in to change notification settings

ajenkins/react-native-dynamic-deck-swiper

Repository files navigation

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

Swiper demo

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.

About

Tinder-like react-native deck swiper that lets you dynamically set the next card

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published