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 (

{ 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 > 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

[hasis]

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.