Typescript:react-native-deck-swiper undefined is not an object (evaluation'card.image')

Question

I got stuck in a super weird issue ... I am using a third party library : react-native-deck-swiper ; And it was able to render the users'image ,however ,after feel secds ,it occurs this error : undefined is not an object(evaluating'card.image');Could you please take a look my code ? Thank you so much in advance !!

I had installed :

yarn add react-native-deck-swiper

Here , I defined my Card Component :

import { StyleSheet, View,Image } from 'react-native'
import React from 'react'



interface UserProps{
  card :{
    image : string,
  }
}
const Card = ({card}:UserProps) => {
  return (
    <View style={styles.Container}>
  <Image source={{uri:card.image}} style={styles.userImage}/>

    </View>
  )
}

export default Card

const styles = StyleSheet.create({
  Container :{
    flex:0.6,
    backgroundColor:'white',
    flexDirection:'column',
    borderRadius:10,
    elevation:10,
    alignItems:'center',
    paddingHorizontal:10,
  },
  userImage:{
    width:80,
    height:80,
    borderRadius:80,
    marginTop:30,
  },
 

})

And I some of my users image list :

export default{
    "code": 0,
    "data": [
        {
            "_id": "1",
            "image": "https://i.pinimg.com/564x/49/5e/38/495e3854551b7ecd87631b682b77b31e.jpg",
            "userName": "hei you ",
            "gender": "female",
            "birthday": "1994-4-13",
           
        },
        {
            "_id": "2",
            "image": "https://i.pinimg.com/564x/b5/6f/97/b56f97ac0b8f521586d3aee555070162.jpg",
            "userName": "Mo Mo",
            "gender": "female",
            "birthday": "1995-4-13",
           
        },
        {
            "_id": "3",
            "image": "https://i.pinimg.com/564x/d9/71/8c/d9718c2e22cf0495361c55034941ddf5.jpg",
            "userName": "Jack",
            "gender": "male",
            "birthday": "1991-4-13",
            
        },
        {
            "_id": "4",
            "image": "https://i.pinimg.com/564x/d1/94/8d/d1948d39ef9d38972700592a1673a68c.jpg",
            "userName": "Peter",
            "gender": "male",
            "birthday": "1990-4-13",
           
        },
        {
            "_id": "5",
            "image": "https://i.pinimg.com/564x/a8/15/66/a815661117cdec309b45fe9f8cdf1d70.jpg",
            "userName": "La La",
            "gender": "female",
            "birthday": "1998-4-13",
           
        },
    ],
    "msg": "success"
}

And I used it in my HomeScreen :

import { Image, ImageBackground, StatusBar, StyleSheet, Text, View } from 'react-native';
import React,{useState,useEffect}from 'react';
import Swiper from 'react-native-deck-swiper';
import HomeUsers from '../../services/HomeUsers';
import Card from '../../components/Card';



function HomeScreen(prop:any) {
 const {navigation} = prop;
 const [unreadMsgReceive,setUnreadMsgRceive] = useState(0);
 const [unreadMsgGive,setUnreadMsgGive] =useState(0);
 const [data,setData] = useState([]);
 const [index,setIndex] =useState(0);

 useEffect(()=>{
     setData(HomeUsers.data);
 },[]);

 const onSwiped = () =>{
     setIndex(index +1);
 }
 const netInfo = useNetInfo();
    return (
        <ImageBackground style={styles.bg} source={require('../../assets/images/yellow_bg.png')}>

       {/**Swiper Cards  'rgba(52, 52, 52, 0)'*/}
        <View style={styles.cardsSwipperContainer}>
       <Swiper
       cards ={data}
       cardIndex ={index}
       stackSize={4}
       stackScale={10}
       stackSeparation={14}
       infinite ={true}
       cardVerticalMargin ={10}
       backgroundColor ={'transparent'}
       onSwiped = {onSwiped}
       renderCard = {card =><Card card={card}/>}
       />
       </View>
      

        </ImageBackground>
    );
}

export default HomeScreen;
const styles = StyleSheet.create({
    bg:{
        flex :1,
        resizeMode:"cover",
        flexDirection:'column',
             
    },
    cardsSwipperContainer:{
        flex:0.8
      },
});

score 1 · Answer 1 · answered Feb 23 '22 at 23:20

1

You passing card as prop <Card card={card}/> but define no card. but cards. may react native only notices it after a few seconds.

answered Feb 23 '22 at 23:20

Gismo1337

279
1
18

1

You are a hero man !!Thank you so much !!! – Yellow Clock Feb 23 '22 at 23:31
Hello my friend, I did not verify the answer you gave yesterday, but today I took a closer look and found that your answer is wrong. Please allow me to correct it, the props I passed in are correct. The renderCard = {card => is similar to map =>, the purpose is to make each object in the array correspond. The above cards receive all the data. I just figured out the problem, that is, I don't need to use the setData() , because it is in the state, just assign the data to the cards directly, in my case, HomeUser.data . Thank you so much for your answer, you are still a hero! – Yellow Clock Feb 24 '22 at 08:37

score 0 · Answer 2 · answered Feb 24 '22 at 08:39

I have finally solved the problem ,only need to pass the data in direactly ,no need state :

 <View style={styles.cardsSwipperContainer}>
   <Swiper
   cards ={HomeUsers.data}
   cardIndex ={index}
   stackSize={4}
   stackScale={10}
   stackSeparation={14}
   cardVerticalMargin ={10}
   backgroundColor ={'transparent'}
   onSwiped = {onSwiped}
   infinite ={true}
   renderCard = {card =><Card card={card}/>}
   />
   </View>

Typescript:react-native-deck-swiper undefined is not an object (evaluation'card.image')

2 Answers2