title: React-Native ListView with Object Array
body: <p>Hey all would love some help will this question.. I have been tearing my hair out!</p>
  
  <p>I'm trying to render a ListView using an array of objects of the form:</p>
  
  <pre><code>Array[number]
   0: Object
    category: ''
    date: ''
    total: ''
    vendor: ''
   1: Object ..etc.
  </code></pre>
  
  <p>I am using the component react-native-swipe-list-view found here: <a href="https://github.com/jemise111/react-native-swipe-list-view" rel="nofollow noreferrer">swipeList github</a></p>
  
  <p>But I'm only rendering the last element of my array of data objects! I'm also using redux in this react-native application although I don't see this having any effect
  HELP ! :)</p>
  
  <p>Output is as follows 
  <a href="https://i.stack.imgur.com/f3NzP.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/f3NzP.png" alt="enter image description here"></a></p>
  
  <p>Here is my current code.</p>
  
  <pre><code>import React, {
      Component,
  } from 'react';
  import {
      ListView,
      Text,
      TouchableOpacity,
      TouchableHighlight,
      View,
    Alert
  } from 'react-native';
  import { connect } from 'react-redux';
  import { Actions } from 'react-native-router-flux';
  import { SwipeListView } from 'react-native-swipe-list-view';
  import {
    PRIMARY_HIGHLIGHT_COLOUR,
    CARD_BACKGROUND_COLOUR,
    BORDER_COLOUR
   } from '../global/colours';
  import {
    MySearchBar,
    Button,
    FAB,
    BackgroundView,
   } from '../components';
   import { HEADER } from '../global/margins';
  
  class ReceiptsListView extends Component {
  
      constructor(props) {
          super(props);
          console.log(this.props.receiptList);
          this.ds = new ListView.DataSource({ rowHasChanged: (r1, r2) =&gt; r1 !== r2 });
          this.state = {
              listViewData: this.ds.cloneWithRows(this.props.receiptList)
          };
          console.log('state', this.state);
      }
  
  
  /*  shouldComponentUpdate(nextProps) {
      if (this.props !== nextProps) {
        return true;
      }
      return false;
    } */
  
      deleteRow(secId, rowId, rowMap) {
      //  rowMap[`${secId}${rowId}`].closeRow();
      //console.log('delete', secId, rowId, rowMap);
  
      //  const newData = [...this.state.listViewData];
      //  newData.splice(rowId, 1);
      //  this.setState({ listViewData: newData });
      }
  
      render() {
          //const ds = new ListView.DataSource({ rowHasChanged: (r1, r2) =&gt; r1 !== r2 });
          //const dataSource = ds.cloneWithRows(receiptlist);
          //this.ds = new ListView.DataSource({ rowHasChanged: (r1, r2) =&gt; r1 !== r2 });
          return (
              &lt;BackgroundView style={styles.container}&gt;
                  &lt;View style={styles.search}&gt;
                      &lt;MySearchBar /&gt;
                      &lt;Button style={styles.button}&gt; Export &lt;/Button&gt;
                  &lt;/View&gt;
                  &lt;SwipeListView
                          dataSource={this.state.listViewData}
                          renderRow={(data) =&gt; this.renderRow(data)}
                          renderHiddenRow={(secId, rowId, rowMap) =&gt; this.renderHiddenRow(secId, rowId, rowMap)}
                          rightOpenValue={-150}
                          recalculateHiddenLayout
                          previewFirstRow
                  /&gt;
                  &lt;FAB
              onPress={this.onPressFAB}
                  /&gt;
              &lt;/BackgroundView&gt;
          );
      }
  
  renderRow(data) {
          console.log('data', data);
          return (
              &lt;TouchableHighlight
                  onPress={console.log('You touched me')}
                  style={styles.rowFront}
                  underlayColor={'#AAA'}
              &gt;
                  &lt;View&gt;
                      &lt;View style={{ flexDirection: 'row', justifyContent: 'space-between' }} &gt;
                          &lt;Text&gt; {`${data.vendor}`} &lt;/Text&gt;
                          &lt;Text&gt; {`${data.total}`} &lt;/Text&gt;
                      &lt;/View&gt;
                      &lt;View&gt;
                          &lt;Text&gt; {`${data.date}`} &lt;/Text&gt;
                          &lt;Text&gt; {`${data.category}`} &lt;/Text&gt;
                      &lt;/View&gt;
                  &lt;/View&gt;
              &lt;/TouchableHighlight&gt;
          );
      }
  
      renderHiddenRow(secId, rowId, rowMap) {
          return (
          &lt;View style={styles.rowBack}&gt;
              &lt;TouchableOpacity
                  style={[styles.backRightBtn, styles.backRightBtnLeft]}
                  onPress={_ =&gt; (console.log(secId, rowId, rowMap))}
              &gt;
                  &lt;Text style={styles.backTextWhite}&gt;Export&lt;/Text&gt;
              &lt;/TouchableOpacity&gt;
              &lt;TouchableOpacity
                  style={[styles.backRightBtn, styles.backRightBtnRight]}
                  onPress={_ =&gt; (console.log(secId, rowId, rowMap))}
              &gt;
                  &lt;Text style={styles.backTextWhite}&gt;Delete&lt;/Text&gt;
              &lt;/TouchableOpacity&gt;
          &lt;/View&gt;
          );
      }
  
    onPressFAB() {
      console.log('FAB pressed');
      Alert.alert(
        'Choose Photo Source',
        null,
        [
          { text: 'Camera', onPress: () =&gt; Actions.camera() },
          { text: 'Photo Library', onPress: () =&gt; Actions.photos() },
          { text: 'Cancel', onPress: () =&gt; console.log('cancel'), style: 'cancel' }
        ]
      );
    }
  }
  
  const styles = {
    search: {
      flexDirection: 'row',
      padding: 10,
      height: 60,
      backgroundColor: PRIMARY_HIGHLIGHT_COLOUR
    },
    button: {
      marginTop: 0,
      height: 30,
      flexGrow: 0.3
    },
      container: {
      padding: 0,
      paddingTop: HEADER.height
      },
      rowFront: {
          //alignItems: 'center',
      flex: 1,
      padding: 10,
          backgroundColor: CARD_BACKGROUND_COLOUR,
          borderBottomColor: BORDER_COLOUR,
          borderBottomWidth: 1,
          justifyContent: 'center',
          //height: 100,
      },
      rowBack: {
          alignItems: 'center',
          backgroundColor: '#DDD',
          flex: 1,
          flexDirection: 'row',
          justifyContent: 'space-between',
          paddingLeft: 15,
      },
      backRightBtn: {
          alignItems: 'center',
          bottom: 0,
          justifyContent: 'center',
          position: 'absolute',
          top: 0,
          width: 75
      },
      backRightBtnLeft: {
          backgroundColor: 'blue',
          right: 75
      },
      backRightBtnRight: {
          backgroundColor: 'red',
          right: 0
      },
      controls: {
          alignItems: 'center',
          marginBottom: 30
      },
      switchContainer: {
          flexDirection: 'row',
          justifyContent: 'center',
          marginBottom: 5
      },
      switch: {
          alignItems: 'center',
          borderWidth: 1,
          borderColor: 'black',
          paddingVertical: 10,
          width: 100,
      }
  };
  
  const mapStateToProps = ({ receipts, accounts }) =&gt; {
    const {
      myReceipts,
          receiptList
    } = receipts;
    const {
      labelsArray
    } = accounts;
    return {
      myReceipts,
      receiptList,
      labelsArray
    };
  };
  
  export default connect(mapStateToProps, {
  })(ReceiptsListView);
  </code></pre>