Nanananananananana.. Pat Man!

    @dooboo-ui/tinder-card
    TypeScript icon, indicating that this package has built-in type declarations

    0.0.1 • Public • Published

    TinderCard

    Preview

    TinderCard

    Props

    types description required default
    testID string
    errorTestID string
    data T[ ]
    renderCards (item: T) => ReactElement
    renderNoMoreCards ( ) => ReactElement
    onSwipeRight (item: T) => void
    onSwipeLeft (item: T) => void
    onCancel ( ) => void
    swipeRightLabelElement ( ) => ReactElement
    swipeLeftLabelElement ( ) => ReactElement
    swipeRightLabelStyle ViewStyle
    swipeLeftLabelStyle ViewStyle
    swipeLabelAlignStyle ViewStyle
    containerStyle ViewStyle
    frontCardStyle ViewStyle
    backCardsStyle ViewStyle
    shouldRotate ViewStyle

    Getting started

    Installation

    yarn add @dooboo-ui/core

    Import

    import { TinderCard } from '@dooboo-ui/core';
    import { TinderCardDirection, TinderCardRef } from '@dooboo-ui/core/lib/TinderCard';

    ##### TinderCard

    • TinderCard Component

    • Example

      <TinderCard
          testID="tinderCard"
          ref={tinderCard}
          onSwipeRight={handleUnlike}
          onSwipeLeft={handleLike}
          onCancel={handleCancel}
          data={data}
          renderCards={_renderCards}
          renderNoMoreCards={_renderNoMoreCards}
          containerStyle={{ width: 300, height: 500 }}
          shouldRotate
          swipeRightLabelElement={(): ReactElement => <LikeLabel>Like!</LikeLabel>}
          swipeLeftLabelElement={(): ReactElement => 
            <UnlikeLabel>Unlike!</UnlikeLabel>
          }
          swipeLabelAlignStyle={{ justifyContent: 'center', alignItems: 'center' }}
      />
      

    ##### TinderCardDirection

    • You can use this by importing on @dooboo-ui/core/lib/TinderCard

    • Structure if you put swiping direction on event function, you can use this. For example, TinderCardDirection.RIGHT or TinderCardDirection.LEFT

      {
        RIGHT = 'right',
        LEFT = 'left'
      }
      

    ##### TinderCardRef

    • This make us to use function in TinderCard.

        {
          handleCancel: () => void;
          forceSwipe: (direction: TinderCardDirection) => void;
        }
      
    • Usage

      1. Import module TinderCardRef First of all, you should import module TinderCardRef in @dooboo-ui/core/lib/TinderCard.

        import { TinderCardRef } from '@dooboo-ui/core/lib/TinderCard';
        
      2. Allocate useRef() having type TinderCardRef Object.

        import React, { useRef } from 'react';
        
        ...
        
        const tinderCard = useRef<TinderCardRef>(null);
        
      3. Write this where you want to use.

        <TouchableOpacity
          onPress={(): void => {
            tinderCard.current.forceSwipe(TinderCardDirection.LEFT);
          }}
        >
          Button
        </TouchableOpacity>
        

        If you are difficult to understand useRef, you can read this tutorial.

    Declare interface T for props data.

    interface Item {
      id: string;
      title: string;
      content: string;
      image: ImageSourcePropType;
    }
    

    Full code of example

    import { TinderCard } from '@dooboo-ui/core';
    import { TinderCardDirection, TinderCardRef } from '@dooboo-ui/core/lib/TinderCard';
     
    interface Item {
      id: string;
      title: string;
      content: string;
      image: ImageSourcePropType;
    }
     
    function Page(): React.ReactElement {
        const tinderCard = useRef<TinderCardRef>(null);
     
        return (
          <Container>
            <TinderCard
              testID="tinderCard"
              ref={tinderCard}
              onSwipeRight={handleUnlike}
              onSwipeLeft={handleLike}
              onCancel={handleCancel}
              data={data}
              renderCards={_renderCards}
              renderNoMoreCards={_renderNoMoreCards}
              containerStyle={{ width: 300, height: 500 }}
              shouldRotate
              swipeRightLabelElement={(): ReactElement => <LikeLabel>Like!</LikeLabel>}
              swipeLeftLabelElement={(): ReactElement => <UnlikeLabel>Unlike!</UnlikeLabel>}
              swipeLabelAlignStyle={{ justifyContent: 'center', alignItems: 'center' }}
            />
            <View style={{
              position: 'absolute',
              bottom: 0,
              flexDirection: 'row',
              width: '100%',
              justifyContent: 'space-between',
            }}>
     
              <ButtonWrapper
                style={{ backgroundColor: '#ff7676' }}
                onPress={(): void => {
                  tinderCard.current.forceSwipe(TinderCardDirection.LEFT);
                }}
              >
                <StyledText style={{ fontSize: 15 }}>UNLIKE</StyledText>
              </ButtonWrapper>
     
              <ButtonWrapper
                onPress={(): void => {
                  tinderCard.current.handleCancel();
                }}
              >
                <StyledText style={{ fontSize: 15 }}>UNDO</StyledText>
              </ButtonWrapper>
     
              <ButtonWrapper
                style={{ backgroundColor: '#44d1a6' }}
                onPress={(): void => {
                  tinderCard.current.forceSwipe(TinderCardDirection.RIGHT);
                }}
              >
                <StyledText style={{ fontSize: 15 }}>LIKE</StyledText>
              </ButtonWrapper>
            </View>
          </Container>
        );
    }
     
    export default Page;

    Install

    npm i @dooboo-ui/tinder-card

    DownloadsWeekly Downloads

    1

    Version

    0.0.1

    License

    MIT

    Unpacked Size

    504 kB

    Total Files

    9

    Last publish

    Collaborators

    • yujonglee
    • do02reen24
    • dooboolab