Cards of Native Base dynamically in react native and Firebase

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

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

Answer 2

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