0.7.0 • Published 4 years ago
@dooboo-ui/native-tinder-card v0.7.0
TinderCard
Preview
Props
Getting started
Installation
yarn add @dooboo-ui/native
Import
import { TinderCard } from '@dooboo-ui/native';
import { TinderCardDirection, TinderCardRef } from '@dooboo-ui/native/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/native/lib/TinderCard
Structure if you put swiping direction on event function, you can use this. For example,
TinderCardDirection.RIGHT
orTinderCardDirection.LEFT
``` { RIGHT = 'right', LEFT = 'left' } ```
TinderCardRef
This make us to use function in
TinderCard
.{ handleCancel: () => void; forceSwipe: (direction: TinderCardDirection) => void; }
Usage
- Import module
TinderCardRef
First of all, you should import moduleTinderCardRef
in@dooboo-ui/native/lib/TinderCard
.import { TinderCardRef } from '@dooboo-ui/native/lib/TinderCard';
Allocate
useRef()
having typeTinderCardRef
Object.import React, { useRef } from 'react'; ... const tinderCard = useRef<TinderCardRef>(null);
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.
- Import module
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/native';
import { TinderCardDirection, TinderCardRef } from '@dooboo-ui/native/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;