Connect to database and get data

[nileshmean]

Hi,
Here is my code instead of static card i want to make it dynamic using the database i am getting the records but the cards state not accepted here is my code.

`import React, { Component } from 'react'
import Swiper from 'react-native-deck-swiper'
import { Button, StyleSheet, Text, View } from 'react-native'
import { openDatabase } from 'react-native-sqlite-storage';
var db = openDatabase({ name: 'tutsdb', createFromLocation : 1 });

// demo purposes only
function * range (start, end) {
for (let i = start; i <= end; i++) {
yield i
}
}

export default class Exemple extends Component {
constructor (props) {
super(props)
this.state = {
// cards:{},
//cards: [...range(1, 5)],
cards:['DO', 'MORE', 'OF', 'WHAT', 'MAKES', 'YOU', 'HAPPY'],

  swipedAllCards: false,
  swipeDirection: '',
  cardIndex: 0
}

db.transaction(tx => {

tx.executeSql('SELECT * FROM tutorials WHERE category=1 LIMIT 0,3', [], (tx, results) => {
var temp = [];
for (let i = 0; i < results.rows.length; ++i) {
temp.push(results.rows.item(i));
// console.log(results.rows.item(i));
}
this.setState({
// cards: temp,

});

});
});

}

renderCard = (card,index) => {
// console.log(cards);
return (

{card} ->{index}

)
};

onSwiped = (type) => {
console.log(on swiped ${type})
}

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

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

render () {
return (

<Swiper
ref={swiper => {
this.swiper = swiper
}}
onSwiped={() => this.onSwiped('general')}
onSwipedLeft={() => this.onSwiped('left')}
onSwipedRight={() => this.onSwiped('right')}
onSwipedTop={() => this.onSwiped('top')}
onSwipedBottom={() => this.onSwiped('bottom')}
onTapCard={this.swipeLeft}
cards={this.state.cards}
cardIndex={this.state.cardIndex}
cardVerticalMargin={80}
renderCard={this.renderCard}
onSwipedAll={this.onSwipedAllCards}
stackSize={3}
stackSeparation={15}
overlayLabels={{
bottom: {
title: 'BLEAH',
style: {
label: {
backgroundColor: 'black',
borderColor: 'black',
color: 'white',
borderWidth: 1
},
wrapper: {
flexDirection: 'column',
alignItems: 'center',
justifyContent: 'center'
}
}
},
left: {
title: 'NOPE',
style: {
label: {
backgroundColor: 'black',
borderColor: 'black',
color: 'white',
borderWidth: 1
},
wrapper: {
flexDirection: 'column',
alignItems: 'flex-end',
justifyContent: 'flex-start',
marginTop: 30,
marginLeft: -30
}
}
},
right: {
title: 'LIKE',
style: {
label: {
backgroundColor: 'black',
borderColor: 'black',
color: 'white',
borderWidth: 1
},
wrapper: {
flexDirection: 'column',
alignItems: 'flex-start',
justifyContent: 'flex-start',
marginTop: 30,
marginLeft: 30
}
}
},
top: {
title: 'SUPER LIKE',
style: {
label: {
backgroundColor: 'black',
borderColor: 'black',
color: 'white',
borderWidth: 1
},
wrapper: {
flexDirection: 'column',
alignItems: 'center',
justifyContent: 'center'
}
}
}
}}
animateOverlayLabelsOpacity
animateCardOpacity
swipeBackCard
>
<Button onPress={() => this.swiper.swipeBack()} title='Swipe Back' />


)
}
}

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'
}
})`

[nileshmean]

`
constructor (props) {
super(props)
this.state = {
// cards:{},
//cards: [...range(1, 5)],
cards:['DO', 'MORE', 'OF', 'WHAT', 'MAKES', 'YOU', 'HAPPY'],

  swipedAllCards: false,
  swipeDirection: '',
  cardIndex: 0
}

db.transaction(tx => {

tx.executeSql('SELECT * FROM tutorials WHERE category=1 LIMIT 0,3', [], (tx, results) => {
var temp = [];
for (let i = 0; i < results.rows.length; ++i) {
temp.push(results.rows.item(i));
// console.log(results.rows.item(i));
}
this.setState({
cards: temp,

});

});
});

}

renderCard = (card,index) => {
// console.log(cards);
return (

{card.title} ->{index}

)
};
`

here is small code i trying to update the status

[nikita h.]

Nilesh, that's a bit tough to read without formatting, but afaik react-native-deck-swiper doesn't care where you get the data from, as long as it's passed into cards as an array.