Passing array of objects to cards prop

[thlee1122]

Hello,

I am having an issue with passing array of objects to cards props. Here is the array of objects that I am trying to pass.

`const cardItem = [

{
	name: "PlayStation 4 FIFA 19 Game CD",
	imageURL: "",
	value: 20.00,
	location: "New York, NY"
},
{
	name: "PlayStation 4 Grand Teft Auto V Game CD",
	imageURL: "",
	value: 20.00,
	location: "New York, NY"
},
{
	name: "PlayStation 4 God of Wars Game CD",
	imageURL: "",
	value: 30.00,
	location: "New York, NY"
},
{
	name: "PlayStation 4 Console Call of Duty Game CD",
	imageURL: "",
	value: 35.00,
	location: "New York, NY"
},
{
	name: "PlayStation 4 Game CD Fortnite",
	imageURL: "",
	value: 25.00,
	location: "New York, NY"
},
{
	name: "PlayStation 4 New Spider Man Game CD",
	imageURL: "",
	value: 30.00,
	location: "New York, NY"
},
{
	name: "PlayStation 4 Brand New NBA 2K19 Game CD",
	imageURL: "",
	value: 35.00,
	location: "New York, NY"
},
{
	name: "PlayStation 4 Overwatch Game CD",
	imageURL: "",
	value: 15.00,
	location: "New York, NY"
},

]`

I am trying to pass this "cardItem" array to "cards" prop in the swapper. And try to display different keys, such as name, imageURL through renderCard function. Is there a way to do this?

Here is my code for Swapper: ` <Swiper

	          ref={swiper => {
	            this.swiper = swiper
	          }}

	          onSwiped={this.onSwiped}
	          onTapCard={this.swipeLeft}
	          cards={cardItem}
	          cardIndex={this.state.cardIndex}
	          cardVerticalMargin={80}
	          renderCard={this.renderCard}
	          onSwipedAll={this.onSwipedAllCards}
	          stackSize={5}
	          stackSeparation={15}
	          cardStyle={{
	          	width: 300,
	          	height: 300
	          animateOverlayLabelsOpacity
	          animateCardOpacity
	        >
	        </Swiper>`

Here is my entire file: ` import React, { Component } from 'react'; import PropTypes from 'prop-types'; import { View, Image, StyleSheet, TouchableOpacity, Text, Button } from 'react-native'; import { Container, Content } from 'native-base'; import MaterialIcon from 'react-native-vector-icons/MaterialIcons'; import Swiper from 'react-native-deck-swiper';

const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: '#F5FCFF' }, card: { flex: 1, borderRadius: 4, borderWidth: 2, borderColor: '#E8E8E8', justifyContent: 'center', backgroundColor: 'white' }, text: { textAlign: 'center', fontSize: 50, backgroundColor: 'transparent' }, done: { textAlign: 'center', fontSize: 30, color: 'white', backgroundColor: 'transparent' } })

const cardItem = [ { name: "PlayStation 4 FIFA 19 Game CD", imageURL: "", value: 20.00, location: "New York, NY" }, { name: "PlayStation 4 Grand Teft Auto V Game CD", imageURL: "", value: 20.00, location: "New York, NY" }, { name: "PlayStation 4 God of Wars Game CD", imageURL: "", value: 30.00, location: "New York, NY" }, { name: "PlayStation 4 Console Call of Duty Game CD", imageURL: "", value: 35.00, location: "New York, NY" }, { name: "PlayStation 4 Game CD Fortnite", imageURL: "", value: 25.00, location: "New York, NY" }, { name: "PlayStation 4 New Spider Man Game CD", imageURL: "", value: 30.00, location: "New York, NY" }, { name: "PlayStation 4 Brand New NBA 2K19 Game CD", imageURL: "", value: 35.00, location: "New York, NY" }, { name: "PlayStation 4 Overwatch Game CD", imageURL: "", value: 15.00, location: "New York, NY" }, ]

class OfferPage extends Component { constructor(props) { super(props);

this.state = {
  cards: ['1', '2', '3'],
  swipedAllCards: false,
  swipeDirection: '',
  isSwipingBack: false,
  cardIndex: 0
}

this.cardHeight = 0;

}

renderCard = (card, index) => { return ( <View style={styles.card}> <Text style={styles.text}>{card} - {index}</Text> </View> ) };

onSwipedAllCards = () => { this.setState({ swipedAllCards: true }) };

swipeBack = () => { if (!this.state.isSwipingBack) { this.setIsSwipingBack(true, () => { this.swiper.swipeBack(() => { this.setIsSwipingBack(false) }) }) } };

setIsSwipingBack = (isSwipingBack, cb) => { this.setState( { isSwipingBack: isSwipingBack }, cb ) };

swipeLeft = () => { this.swiper.swipeLeft() };

render() {
	return (
		<Container>
    <Content style={{backgroundColor: 'white'}}>     		
				<View style={styles.container}>
	        <Swiper
	          ref={swiper => { this.swiper = swiper }}
	          onSwiped={this.onSwiped}
	          onTapCard={this.swipeLeft}
	          cards={cardItem}
	          cardIndex={this.state.cardIndex}
	          cardVerticalMargin={80}
	          renderCard={this.renderCard}
	          onSwipedAll={this.onSwipedAllCards}
	          stackSize={5}
	          stackSeparation={15}
	          cardStyle={{
	          	width: 300,
	          	height: 300
	          }}
	          animateOverlayLabelsOpacity
	          animateCardOpacity
	        >
	        </Swiper>
	        <Button onPress={this.swipeLeft} title='Swipe Left' style={{zIndex: 10, borderWidth: 1}}/>
	      </View>
    </Content>
 	</Container>
	);
}

}

export default OfferPage;

`

[webraptor]

Please share your entire code, including parent component, render method containing the swiper and the rendercard method. Right now it's not very clear where your cardItem is defined and it could be out of scope within the render method.

Try to put your cards array object in the example app and modify the render method in there see if it works. The example app is located within the Example folder of the react-native-deck-swiper package.

[thlee1122]

@webraptor Hello Thank you for your response. I have updated my post and put the entire file there. I tried that as well but it did not work... Could you please help me solve this issue? Thank you

[webraptor]

The code is not very clear as you haven't escaped it properly. Try with trippple ` [check screenshot]. Anyway, it looks like your current renderCard method is copy pasted from the Example folder, but it returns a number instead of a view, which likely causes errors for you.

Instead of this approach, as mentioned, move your cardItem content into the ['1', '2', '3'] of the Example folder app, and run it from there, and change renderCard method code from

<View style={styles.card}>
  <Text style={styles.text}>{card} - {index}</Text>
</View>

to

<View style={styles.card}>
  <Text style={styles.text}>{this.state.cards[index].name} - {index}</Text>
</View>

Again, within the Example folder app, not your own code. You can find instructions on how to run the Example app over here. Please note that the commands should be run from react-native-deck-swiper/Example folder, wherever you cloned it to.

Properly escaped code below:

[samandaryaei]

i have same problem with complex data (array of object)