youssef-md#1 add swipe features based on swipe.

anouarbensaad · Nov 14, 2021 · 3679499 · 3679499
1 parent 7dab7cf
commit 3679499
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 1 deletion.
diff --git a/styled-components/src/Card/index.js b/styled-components/src/Card/index.js
@@ -1,4 +1,4 @@
-import React from 'react';
+import React,{useEffect} from 'react';
 import { Animated } from 'react-native';
 
 import { ACTION_OFFSET } from '../../utils/constants';
@@ -11,8 +11,13 @@ export default function Card({
   isFirst,
   swipe,
   tiltSign,
+  setCurrentPet,
   ...rest
 }) {
+  useEffect(() => {
+    setCurrentPet(name);
+  }, [name])
+
   const rotate = Animated.multiply(swipe.x, tiltSign).interpolate({
     inputRange: [-ACTION_OFFSET, 0, ACTION_OFFSET],
     outputRange: ['8deg', '0deg', '-8deg'],

diff --git a/styled-components/src/Main/index.js b/styled-components/src/Main/index.js
@@ -8,6 +8,7 @@ import { pets as petsObj } from './data';
 import { Container } from './styles';
 
 export default function Main() {
+  const [currentPet, setCurrentPet] = useState("");
   const swipe = useRef(new Animated.ValueXY()).current;
   const tiltSign = useRef(new Animated.Value(1)).current;
   const [pets, setPets] = useState(petsObj);
@@ -18,6 +19,13 @@ export default function Main() {
     }
   }, [pets]);
 
+  const swipeLeft = (petName) => {
+    console.warn("swipe left",petName);
+  }
+  const swipeRight = (petName) => {
+    console.warn("swipe right",petName);
+  }
+
   const panResponder = useRef(
     PanResponder.create({
       onMoveShouldSetPanResponder: () => true,
@@ -31,6 +39,7 @@ export default function Main() {
         const userAction = Math.abs(dx) > ACTION_OFFSET;
 
         if (userAction) {
+          dx > 0 ? swipeRight(currentPet) : swipeLeft(currentPet);
           Animated.timing(swipe, {
             duration: 200,
             toValue: {
@@ -84,6 +93,7 @@ export default function Main() {
               isFirst={isFirst}
               swipe={swipe}
               tiltSign={tiltSign}
+              setCurrentPet={setCurrentPet}
               {...panHandlers}
             />
           );