title: Cards of Native Base dynamically in react native and Firebase
body: <p>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 <a href="https://github.com/GeekyAnts/NativeBase/issues/347" rel="nofollow noreferrer">https://github.com/GeekyAnts/NativeBase/issues/347</a> but i get an error : undefined is not an object </p>
  
  <pre><code>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) =&gt; {
              var items = [];
              snap.forEach((child) =&gt; {
                  items.push({
                      title: child.val().title,
                      _key: child.key
                  });
              });
              this.setState({
                  items: items
              });
          });
      }
  
      render() {
  
          return (
              &lt;View&gt;
                  &lt;Card dataArray={this.state.items}
                        renderRow={(item) =&gt; this._renderItem(item)}&gt;
                  &lt;/Card&gt;
              &lt;/View&gt;
          )
      }
  
      _renderItem(item) {
  
          return (
              &lt;CardItem item={item}/&gt;
          );
      }
  
  
  } 
  </code></pre>
  
  <p><strong>CardItem Page</strong></p>
  
  <pre><code>class CardItem extends Component {
      render() {
          return (
              &lt;View style={styles.listItem}&gt;
                  &lt;Text style={styles.liText}&gt;{this.props.item.title}&lt;/Text&gt;
  
              &lt;/View&gt;
          );
      }
  }
  </code></pre>
  
  <p>That's the code i used but i keep getting an error like the image below    --> any idea please 
  <strong>PS:</strong>  all the items are been extracted from firebase database correctly, since i can see them in the console <a href="https://i.stack.imgur.com/5P5nU.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/5P5nU.png" alt="enter image description here"></a></p>
  
  <p><a href="https://i.stack.imgur.com/5P5nU.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/5P5nU.png" alt="enter image description here"></a></p>
  
  <p>After putting this line <code>this.state = { items: [] };</code> in the constructor, i get this warning <a href="https://i.stack.imgur.com/MMOEz.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/MMOEz.png" alt="enter image description here"></a></p>
  
  <p>when trying the second method of Irfan , i get this warning and nothing is displayed in the screen <a href="https://i.stack.imgur.com/A7BqO.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/A7BqO.png" alt="enter image description here"></a></p>
  
  <p>that's the final i wrote and still not working </p>
  
  <pre><code>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) =&gt; {
              var items = [];
              snap.forEach((child) =&gt; {
                  items.push({
                      title: child.val().title,
                      _key: child.key
                  });
              });
                       this.setState({
                  items: items
              });
          });
  
      }
  
      render() {
  
          return (
              &lt;View&gt;
                  &lt;Content&gt;
                      &lt;Card&gt;
                          {
                              this.state.items.map((item,index)=&gt;{
                                  return (
                                      &lt;CardItem key={index}&gt;
                                          &lt;View&gt;
                                              &lt;Text&gt;{item.title}&lt;/Text&gt;
                                          &lt;/View&gt;
                                      &lt;/CardItem&gt;
                                  )
                              })
                          }
                      &lt;/Card&gt;
                  &lt;/Content&gt;
  
              &lt;/View&gt;
          )
      }
  
      _renderItem(item) {
  
          return (
  
              &lt;ListItem item={item}/&gt;
          );
      }
  </code></pre>