MediaCard
Tinder like Media Card componet
Usage
import React, { useState } from 'react'
import { View, Text } from 'react-native'
import { MediaCard } from 'nottinderuikit'
const SampleMediaCard = () => {
// Sample Array of images from Unsplash
const images = [
{
uri:
'https://images.unsplash.com/photo-1586470208442-67c5c1abbc78?ixlib=rb-1.2.1&auto=format&fit=crop&w=933&q=80',
},
{
uri:
'https://images.unsplash.com/photo-1516908205727-40afad9449a8?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=935&q=80',
},
{
uri:
'https://images.unsplash.com/photo-1586557009709-63ac91998176?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=975&q=80',
},
{
uri:
'https://images.unsplash.com/photo-1520271348391-049dd132bb7c?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=934&q=80',
},
];
// Here we manage the current image by it's index
const [currentIndex, setCurrentIndex] = useState(0);
const nextImage = (n: number, length: number) => {
const nextIndex = n + currentIndex;
if (nextIndex >= 0 && nextIndex < length) {
setCurrentIndex(nextIndex);
}
};
return <View
style={{
height: '80%',
width: '100%',
}}
>
<MediaCard
leftLabel='Yup'
rightLabel='Nope'
downLabel='super yup'
images={images}
currentImageIndex={currentIndex}
handleCurrentImageChange={nextImage}
onBottomPress={() => {
console.log('bottom press');
}}
bottomData={
<Text style={{ color: '#FFF', fontWeight: 'bold', fontSize: 20 }}>
Hello there !
</Text>
}
/>
</View>
}
export default SampleMediaCard
Props
images
handleCurrentImageChange
currentImageIndex
leftLabel
rightLabel
downLabel
onBottomPress
bottomData
positionXY
Reference
images
Array of images uri objects with the following shape: { uri:"" }
Type | Default | Required |
---|---|---|
Array: { uri: string }[] | undefined | true |
handleCurrentImageChange
Function executed when the current image index changes, it will be called with one parameter 1 if the media card is pressed on the right and -1 if it is pressed on the left side.
Type | Default | Required |
---|---|---|
function: (n:number)=> any | undefined | true |
currentImageIndex
Curren image index.
Type | Default | Required |
---|---|---|
number | 0 | false |
leftLabel
Label shown on the left side of the card when is being swiped right.
NOTE: To make this label bisible you'll have to use MediaCard component wrapped with SwipeableWrapper
Type | Default | Required |
---|---|---|
string | "" | false |
rightLabel
Label shown on the right side of the card when is being swiped right.
NOTE: To make this label bisible you'll have to use MediaCard component wrapped with SwipeableWrapper
Type | Default | Required |
---|---|---|
string | "" | false |
downLabel
Label shown on the down side of the card when is being swiped right.
NOTE: To make this label bisible you'll have to use MediaCard component wrapped with SwipeableWrapper
Type | Default | Required |
---|---|---|
string | "" | false |
onBottomPress
Function called whtn the bottom side of the card is pressed.
Type | Default | Required |
---|---|---|
function: ()=> any | ()=>{} | false |
bottomData
Component shown on the bottom of the card.
Type | Default | Required |
---|---|---|
ReactNode | undefined | false |
positionXY
Animated value of the media card position X Y. See the sample on the SwippeableWrapper
Type | Default | Required |
---|---|---|
React.Animated.valueXY | undefined | false |