Cards of Native Base dynamically in react native and Firebase - react-native

Question

I have data to extract from Firebase and i did. It's displayed perfectly fine in a listview. But now i have to display them in cards from the native base . this is the code i tried https://github.com/GeekyAnts/NativeBase/issues/347 but i get an error : undefined is not an object
import CardItem from'./CardItem'
import {Container, Content, Card, Body, Title} from 'native-base';
export default class SixteenTab extends Component {
constructor(props) {
super(props);
this.itemsRef = this.getRef().child('docs/topics/topics_2016/');
}
componentDidMount() {
// start listening for firebase updates
this.listenForItems(this.itemsRef);
}
getRef() {
return firebaseApp.database().ref();
}
listenForItems(itemsRef) {
itemsRef.on('value', (snap) => {
var items = [];
snap.forEach((child) => {
items.push({
title: child.val().title,
_key: child.key
});
});
this.setState({
items: items
});
});
}
render() {
return (
<View>
<Card dataArray={this.state.items}
renderRow={(item) => this._renderItem(item)}>
</Card>
</View>
)
}
_renderItem(item) {
return (
<CardItem item={item}/>
);
}
}
CardItem Page
class CardItem extends Component {
render() {
return (
<View style={styles.listItem}>
<Text style={styles.liText}>{this.props.item.title}</Text>
</View>
);
}
}
That's the code i used but i keep getting an error like the image below --> any idea please
PS: all the items are been extracted from firebase database correctly, since i can see them in the console
After putting this line this.state = { items: [] }; in the constructor, i get this warning
when trying the second method of Irfan , i get this warning and nothing is displayed in the screen
that's the final i wrote and still not working
export default class SixteenTab extends Component {
constructor(props) {
super(props);
this.itemsRef = this.getRef().child('docs/topics/topics_2016/');
this.state = { items: null };
}
componentDidMount() {
this.listenForItems(this.itemsRef);
}
componentWillMount() {
this.setState({
items:[]
});
}
getRef() {
return firebaseApp.database().ref();
}
listenForItems(itemsRef) {
itemsRef.on('value', (snap) => {
var items = [];
snap.forEach((child) => {
items.push({
title: child.val().title,
_key: child.key
});
});
this.setState({
items: items
});
});
}
render() {
return (
<View>
<Content>
<Card>
{
this.state.items.map((item,index)=>{
return (
<CardItem key={index}>
<View>
<Text>{item.title}</Text>
</View>
</CardItem>
)
})
}
</Card>
</Content>
</View>
)
}
_renderItem(item) {
return (
<ListItem item={item}/>
);
}

Answer 1

As per native base doc, dataArray and renderRow is not support Card Component. So should update your render function.
render() {
return (
<Container>
<Content>
<Card>
{
this.state.items.map((item, index)=>{
return (
<CardItem key={index}>
<View>
<Text>{item.title}</Text>
</View>
</CardItem>
)
})
}
</Card>
</Content>
</Container>
)
}

Answer 2

If you want your cards SEPARATELY , you need to put the key attribute in Card, not in CardItem! Like this:
render() {
return (
<Container>
<Content>
{
this.state.items.map((item, index)=>{
return (
<Card key={index}>
<CardItem>
<Text>{item.title}</Text>
</CardItem>
<Card/>
)
})
}
</Content>
</Container>
)
}