That's it, use the components on your react-native app
Simple sample of a Swipeable Card:
import React, { useState } from"react";
import { Text, View, Animated } from"react-native";
import { SwipeableWrapper, MediaCard } from"nottinderuikit";
exportdefaultfunctionApp() {
// Sample Array of images from Unsplashconst 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 indexconst [currentIndex, setCurrentIndex] = useState(0);
const nextImage = () => {
// This circular loop on the images array
setCurrentIndex((currentIndex + 1) % images.length);
};
// Here we create the initial Animated ValueXYconst initialPosition = new Animated.ValueXY();
// verticalCallback is called when the card is swiped upconst verticalCallback = () => {
console.log("verticalCallback");
resetPosition();
};
// horizontalCallback is called when the card is swiped horizontally// Check isLeftToRight value to know in witch direction it was swipedconst horizontalCallback = (isLeftToRight: boolean) => {
if (isLeftToRight) {
console.log("Is left to right");
} else {
console.log("Is right to left");
}
resetPosition();
};
// In this sample we use resetPosition to re use the same card for this examplesconst resetPosition = (delay: number = 0) => {
Animated.timing(initialPosition, {
toValue: { x: 0, y: 0 },
duration: 250,
delay,
}).start();
};
return (
<Viewstyle={{flex:1,
justifyContent: "center",
}}
><Viewstyle={{height: "80%",
width: "100%",
}}
><SwipeableWrapperanimatedDefaultPosition={initialPosition}verticalCallback={verticalCallback}horizontalCallback={horizontalCallback}
><MediaCardanimatedCardPosition={initialPosition}leftLabel="Yup"rightLabel="Nope"downLabel="super yup"images={images}currentImageIndex={currentIndex}handleCurrentImageChange={nextImage}onBottomPress={() => {
console.log("bottom press");
}}
bottomData={
<Textstyle={{color: "#FFF", fontWeight: "bold", fontSize:20 }}>
Swipe me !
</Text>
}
/>
</SwipeableWrapper></View></View>
);
}