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
},
});
CodePudding user response:
You passing card as prop <Card card={card}/>
but define no card. but cards. may react native only notices it after a few seconds.