content: import React from 'react'
  import { View, Text, ListView } from 'react-native'
  import { connect } from 'react-redux'
  
  // Styles
  import styles from './Styles/RowExampleStyle'
  
  class RowExample extends React.Component {
    constructor (props) {
      super(props)
      // If you need scroll to bottom, consider http://bit.ly/2bMQ2BZ
  
      /* ***********************************************************
      * STEP 1
      * This is an array of objects with the properties you desire
      * Usually this should come from Redux mapStateToProps
      *************************************************************/
      const dataObjects = [
        {title: 'First Title', description: 'First Description'},
        {title: 'Second Title', description: 'Second Description'},
        {title: 'Third Title', description: 'Third Description'},
        {title: 'Fourth Title', description: 'Fourth Description'},
        {title: 'Fifth Title', description: 'Fifth Description'},
        {title: 'Sixth Title', description: 'Sixth Description'},
        {title: 'Seventh Title', description: 'Seventh Description'}
      ]
  
      /* ***********************************************************
      * STEP 2
      * Teach datasource how to detect if rows are different
      * Make this function fast!  Perhaps something like:
      *   (r1, r2) => r1.id !== r2.id}
      *************************************************************/
      const rowHasChanged = (r1, r2) => r1 !== r2
  
      // DataSource configured
      const ds = new ListView.DataSource({rowHasChanged})
  
      // Datasource is always in state
      this.state = {
        dataSource: ds.cloneWithRows(dataObjects)
      }
    }
  
    /* ***********************************************************
    * STEP 3
    * `_renderRow` function -How each cell/row should be rendered
    * It's our best practice to place a single component here:
    *
    * e.g.
      return <MyCustomCell title={rowData.title} description={rowData.description} />
    *************************************************************/
    _renderRow (rowData) {
      return (
        <View style={styles.row}>
          <Text style={styles.boldLabel}>{rowData.title}</Text>
          <Text style={styles.label}>{rowData.description}</Text>
        </View>
      )
    }
  
    /* ***********************************************************
    * STEP 4
    * If your datasource is driven by Redux, you'll need to
    * reset it when new data arrives.
    * DO NOT! place `cloneWithRows` inside of render, since render
    * is called very often, and should remain fast!  Just replace
    * state's datasource on newProps.
    *
    * e.g.
      componentWillReceiveProps (newProps) {
        if (newProps.someData) {
          this.setState({
            dataSource: this.state.dataSource.cloneWithRows(newProps.someData)
          })
        }
      }
    *************************************************************/
  
    // Used for friendly AlertMessage
    // returns true if the dataSource is empty
    _noRowData () {
      return this.state.dataSource.getRowCount() === 0
    }
  
    // Render a footer.
    _renderFooter = () => {
      return (
        <Text> - Footer - </Text>
      )
    }
  
    render () {
      return (
        <View style={styles.container}>
          <ListView
            contentContainerStyle={styles.listContent}
            dataSource={this.state.dataSource}
            renderRow={this._renderRow}
            renderFooter={this._renderFooter}
            enableEmptySections
            pageSize={15}
          />
        </View>
      )
    }
  }
  
  const mapStateToProps = (state) => {
    return {
      // ...redux state to props here
    }
  }
  
  const mapDispatchToProps = (dispatch) => {
    return {
    }
  }
  
  export default connect(mapStateToProps, mapDispatchToProps)(RowExample)
  