Skip to content

Commit

Permalink
swipe card
Browse files Browse the repository at this point in the history
  • Loading branch information
KumarVivekPathak committed Dec 30, 2023
1 parent 4bdc22a commit 2727690
Show file tree
Hide file tree
Showing 5 changed files with 379 additions and 8 deletions.
1 change: 1 addition & 0 deletions .prettierrc
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
{}
11 changes: 5 additions & 6 deletions App.js
Original file line number Diff line number Diff line change
@@ -1,10 +1,11 @@
import { StatusBar } from 'expo-status-bar';
import { StyleSheet, Text, View } from 'react-native';
import { StatusBar } from "expo-status-bar";
import { StyleSheet, Text, View } from "react-native";
import CardPage from "./CardScreen";

export default function App() {
return (
<View style={styles.container}>
<Text>Open up App.js to start working on your app!</Text>
<CardPage />
<StatusBar style="auto" />
</View>
);
Expand All @@ -13,8 +14,6 @@ export default function App() {
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
backgroundColor: "#ffff",
},
});
116 changes: 116 additions & 0 deletions CardScreen.jsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,116 @@
import React, { createRef, useState } from "react";
import { View, Text, SafeAreaView, StyleSheet } from "react-native";
import Swiper from "react-native-deck-swiper";
import { MaterialIcons } from "@expo/vector-icons";
import { MaterialCommunityIcons } from "@expo/vector-icons";

const data = [
{
id: 1,
color: "#97d2f0",
},
{
id: 2,
color: "#88f6ba",
},
{
id: 3,
color: "#f7d88c",
},
{
id: 4,
color: "#D48B65",
},
{
id: 5,
color: "#C45B63",
},
];

const CardPage = () => {
const [index, setIndex] = useState(0);
return (
<SafeAreaView style={styles.container}>
<View style={{ flex: 1, height: "100%", marginTop: 50 }}>
<Swiper
ref={createRef()}
cards={data}
cardIndex={index}
showSecondCard={true}
verticalSwipe={false}
stackSize={3}
stackAnimationFriction={15}
stackAnimationTension={40}
stackScale={5}
stackSeparation={22}
renderCard={(item) => (
<View style={[styles.card, { backgroundColor: item.color }]} />
)}
infinite
backgroundColor={"transparent"}
onSwiped={() => setIndex(index + 1)}
animateOverlayLabelsOpacity
animateCardOpacity
disableTopSwipe
disableBottomSwipe
overlayLabels={{
left: {
element: (
<MaterialCommunityIcons
name="close-circle"
size={70}
color="#D45E5C"
/>
),
style: {
wrapper: {
flexDirection: "column",
alignItems: "flex-end",
justifyContent: "flex-start",
marginTop: 5,
marginLeft: -5,
},
},
},
right: {
element: (
<MaterialIcons name="check-circle" size={70} color="#48AC87" />
),
style: {
wrapper: {
flexDirection: "column",
alignItems: "flex-start",
justifyContent: "flex-start",
marginTop: 5,
marginLeft: 5,
},
},
},
}}
overlayLabelStyle={{
overflow: "hidden",
backgroundColor: "transparent",
}}
/>
</View>
</SafeAreaView>
);
};

export default CardPage;

const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: "#fff",
},
card: {
justifyContent: "center",
alignItems: "center",
width: "100%",
borderRadius: 7.5,
shadowRadius: 20,
shadowOpacity: 0.1,
height: "85%",
},
});
Loading

0 comments on commit 2727690

Please sign in to comment.