0.0.9 • Published 4 years ago

react-native-dynamic-deck-swiper v0.0.9

Weekly downloads
10
License
MIT
Repository
github
Last release
4 years ago

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

Propstypedescriptionrequireddefault
getNextCardDatafunc({first, left, right, previousCards})return value is passed to render prop as cardData for the next cardrequired
childrenfunc(cardData)render prop to render the card based on the datarequired
preventVerticalDraggingboolenable/disable horizontal swipingtrue

Swipe animation props

Propstypedescriptiondefault
horizontalThresholdnumberhorizontal swipe thresholdwidth / 4
verticalThresholdnumbervertical swipe thresholdheight / 4
disableSwipeUpboolprevent upward swipestrue
disableSwipeDownboolprevent downward swipestrue
disableSwipeLeftboolprevent swipes to the leftfalse
disableSwipeDownboolprevent swipes to the rightfalse

Event callbacks

PropstypedescriptionSignature
onEndReachedfuncfunction to be called when all cards have been swiped() => {}
onSwipedfuncfunction to be called when a card is swiped. it receives the swiped card and direction(cardData, {left, right}) => {}
onSwipeAbortedfuncfunction to be called when a card is released before reaching the threshold() => {}
onSwipedUpfuncfunction to be called when a card is swiped up. it receives the swiped card index(cardData) => {}
onSwipedDownfuncfunction to be called when a card is swiped down. it receives the swiped card index(cardData) => {}
onSwipedLeftfuncfunction to be called when a card is swiped left. it receives the swiped card index(cardData) => {}
onSwipedRightfuncfunction to be called when a card is swiped right. it receives the swiped card index(cardData) => {}
onDraggingfuncfunction to be called while a card is being moved. it receives X and Y positions(x, y) => {}
onDragStartfuncfunction to be called when drag start
onDragEndfuncfunction 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.