__reanimatedHostObjectRef type error; refer to 'software-mansion/reac…

…t-native-reanimated#1517'
Puzzoh · Jun 22, 2023 · 507b179 · 507b179
1 parent 36b190e
commit 507b179
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 34 deletions.
diff --git a/src/components/VoucherCard.tsx b/src/components/VoucherCard.tsx
@@ -4,30 +4,40 @@ import Icon from "react-native-vector-icons/FontAwesome";
 import styles from "../styles/index";
 
 const VoucherCard = (props) => {
-  const { name, image, rating, redeemed, people, location, priceB, priceA } =
-    props.voucher;
+  const {
+    title,
+    rating,
+    numRedeemed,
+    forQuantity,
+    priceAfter,
+    priceBefore,
+    id,
+  } = props.voucher;
 
   const stars = [];
   for (let i = 0; i < rating; i++) {
     stars.push(<Icon key={i} name="star" size={20} color="gold" />);
   }
 
   return (
-    <View style={nStyles.card}>
-      <Image source={{ uri: image }} style={nStyles.image} />
+    <View style={nStyles.card} key={id}>
+      <Image
+        source={{ uri: "https://loremflickr.com/400/200/restaurant" }}
+        style={nStyles.image}
+      />
 
       <View style={nStyles.cardInner}>
-        <Text style={styles.heading3}>{name}</Text>
+        <Text style={styles.heading3}>{title}</Text>
         <View style={[nStyles.row, { gap: 50 }]}>
           <View style={{ flexDirection: "row" }}>{stars}</View>
-          <Text style={styles.bodyText}>{redeemed} Redeemed </Text>
+          <Text style={styles.bodyText}>{numRedeemed} Redeemed </Text>
         </View>
         <View style={[nStyles.row, { gap: 50 }]}>
           <Text style={styles.bodyText}> 0.5 miles </Text>
-          <Text style={styles.bodyText}>For {people} people</Text>
+          <Text style={styles.bodyText}>For {forQuantity} people</Text>
         </View>
         <Text style={[styles.bodyText, { color: "#888888", marginBottom: 16 }]}>
-          {location}
+          800 Lancaster Ave, Villanova, PA 19085
         </Text>
         <View style={nStyles.row}>
           <Text
@@ -40,12 +50,12 @@ const VoucherCard = (props) => {
               },
             ]}
           >
-            ${priceB}{" "}
+            ${priceBefore}
           </Text>
           <Text
             style={[styles.heading3, { color: "#34A853", marginBottom: 12 }]}
           >
-            ${priceA}{" "}
+            ${priceAfter}
           </Text>
         </View>
         <View style={nStyles.featuredDishContainer}>

diff --git a/src/components/AnimatedStack.tsx → src/components/VoucherStack.tsx b/src/components/AnimatedStack.tsx → src/components/VoucherStack.tsx
@@ -1,6 +1,5 @@
 import React, { useState, useEffect } from "react";
 import { View, StyleSheet, useWindowDimensions } from "react-native";
-
 import Animated, {
   useSharedValue,
   useAnimatedStyle,

diff --git a/src/mainScreens/Home.tsx b/src/mainScreens/Home.tsx
@@ -6,9 +6,8 @@ import {
   TouchableOpacity,
   ActivityIndicator,
 } from "react-native";
-import VoucherStack from "../components/AnimatedStack";
+import VoucherStack from "../components/VoucherStack";
 import VoucherCard from "../components/VoucherCard";
-import vouchers from "../../assets/data/vouchers";
 import Icon from "react-native-vector-icons/FontAwesome";
 import styles, { colors } from "../styles/index";
 import CustomHeaderBar from "../components/CustomHeaderBar";
@@ -18,15 +17,13 @@ const GET_VOUCHERS_INFO = gql`
   query listVouchers {
     listVouchers {
       items {
-        createdAt
-        description
-        forQuantity
         id
+        title
+        rating
+        forQuantity
         numRedeemed
-        priceAfter
         priceBefore
-        rating
-        title
+        priceAfter
       }
     }
   }
@@ -35,8 +32,7 @@ const GET_VOUCHERS_INFO = gql`
 export default function VoucherScreen() {
   const { data, loading, error } = useQuery(GET_VOUCHERS_INFO);
 
-  const { items } = data.listVouchers;
-  console.log(items);
+  const vouchers = data?.listVouchers.items;
 
   if (loading) {
     return (
@@ -64,21 +60,9 @@ export default function VoucherScreen() {
 
   return (
     <View style={nStyles.container}>
-      {/* {items.map((voucher) => (
-        <View key={voucher.id}>
-          <Text>{voucher.title}</Text>
-          <Text>{voucher.description}</Text>
-          <Text>Price Before: {voucher.priceBefore}</Text>
-          <Text>Price After: {voucher.priceAfter}</Text>
-          <Text>Created At: {voucher.createdAt}</Text>
-          <Text>Number Redeemed: {voucher.numRedeemed}</Text>
-          <Text>For Quantity: {voucher.forQuantity}</Text>
-          <Text>Rating: {voucher.rating}</Text>
-        </View>
-      ))} */}
       <CustomHeaderBar />
       <VoucherStack
-        data={vouchers}
+        data={JSON.parse(JSON.stringify(vouchers))} // https://github.com/dohooo/react-native-reanimated-carousel/issues/66
         renderItem={({ item }) => <VoucherCard voucher={item} />}
         onSwipeLeft={onSwipeLeft}
         onSwipeRight={onSwipeRight}