react-native-easy-listview-gridview

This is a wrapper library for ListView & GridView in React Native.

Sample

ListView

GridView

Features

• Pull to Refresh
• Load More when reach the end fo listview or gridview
• Custom Background of listview or gridview when Content is Empty
• Custom Style of RefreshControl
• Custom Header, Footer, Separator and so on
• TIMEOUT Handler of loading
• Optimization of Performance
• More coming soon!

Install

1. Run npm install react-native-easy-listview-gridview --save
2. import EasyListView from 'react-native-easy-listview-gridview'

Usage

ListViewSample

ListView

import React, { Component } from 'react'
import {
  Text,
  View,
  TouchableHighlight
} from 'react-native'

import EasyListView from 'react-native-easy-listview-gridview'

export default class ListViewSample extends Component {
  constructor(props) {
    super(props)

    this.renderListItem = this._renderListItem.bind(this)
    this.renderGridItem = this._renderGridItem.bind(this)
    this.onFetch = this._onFetch.bind(this)
  }

  render() {
    return (
      <EasyListView
        ref={component => this.listview = component}
        renderItem={this.renderListItem}
        refreshHandler={this.onFetch}
        loadMoreHandler={this.onFetch}
        // other props
      />
    )
  }

  _renderListItem(rowData, sectionID, rowID, highlightRow) {
    return (
      <View
        style={Styles.rowContainer}>
        <TouchableHighlight
          style={{flex: 1}}
          onPress= {() => alert(rowData)}>
          <View
            style={Styles.rowContent}>
            <Text
              style={Styles.rowTitle}>
              {rowData}
            </Text>
          </View>
        </TouchableHighlight>
        <View style={Styles.separate}/>
      </View>
    )
  }

  _onFetch(pageNo, success, failure) {
    // ...
  }
}

GridView

import React, { Component } from 'react'
import {
  Text,
  View,
  TouchableHighlight
} from 'react-native'

import EasyListView from 'react-native-easy-listview-gridview'

export default class GridViewSample extends Component {
  constructor(props) {
    super(props)

    this.renderListItem = this._renderListItem.bind(this)
    this.renderGridItem = this._renderGridItem.bind(this)
    this.onFetch = this._onFetch.bind(this)
  }

  render() {
    return (
      <EasyListView
        ref={component => this.gridview = component}
        column={2}
        renderItem={this.renderGridItem}
        refreshHandler={this.onFetch}
        loadMoreHandler={this.onFetch}
        // other props
      />
    )
  }

  _renderGridItem(index, rowData, sectionID, rowID, highlightRow) {
    return (
      <View
        key={index}
        style={GridStyles.rowContainer}>
        <TouchableHighlight
          style={{flex: 1}}
          onPress= {() => alert(rowData)}>
          <View
            style={GridStyles.rowContent}>
            <Text
              style={GridStyles.rowTitle}>
              {rowData}
            </Text>
          </View>
        </TouchableHighlight>
      </View>
    )
  }

  _onFetch(pageNo, success, failure) {
    // ...
  }
}

Props

• isDataFixed (Bool) - Whether disable to pull to refresh and load more, default is false.
• autoRefresh (Bool) - Whether call refresh in callback of componentDidMount, invalid when isDataFixed is true, default is true.
• timeout (Integer) - Default is 10 seconds(10 * 1000 milliseconds).
• contentContainerStyle (Object) - These styles will be applied to the scroll view content container which wraps all of the child views, the same with ScrollView.
• containerHeight (Integer) - The height of listview or gridview, default is the height of window minus the height of status bar.
• containerWidth (Integer) - The width of listview or gridview, default is the width of window.
• dataSizePerPage (Integer) - The page size of listview or gridview, default is 10.
• rowHeight (Integer) - The height of every row, used by initialListSize of ListView.
• pageSize (Integer) - Number of rows to render per event loop, the same with ListView, default is 1.
• emptyContent (String) - The text content of background when content is empty, default is There is no content~.
• renderEmpty (Function) - Custom background when content is empty.
• onChangeVisibleRows (Function) - Called when the set of visible rows changes, the same with ListView.
• renderSectionHeader (Function) - The same with ListView.
• renderSeparator (Function) - If provided, a sticky header is rendered for this section, the same with ListView.
• renderHeader (Function) - The same with ListView.
• renderFooterNoMore (Function) - Custom renderFooter when there is no more.
• renderFooterError (Function) - Custom renderFooter when load more error.
• renderFooterLoading (Function) - Custom renderFooter while loading more.
• renderItem (Function) - The same with renderRow of ListView.
• onEndReachedThreshold (Integer) - Threshold in pixels (virtual, not physical) for calling onEndReached, the same with ListView, default is 50.
• loadingTitle (String) - The title displayed under the refresh indicator, only iOS, the same with title of RefreshControl, default is loading....
• loadingTitleColor (String) - The title color, only iOS, the same with titleColor of RefreshControl, default is #9b9b9b.
• loadingTintColor (String) - The color of the refresh indicator, only iOS, the same with tintColor of RefreshControl, default is #9b9b9b.
• loadingColors (Array) - The colors (at least one) that will be used to draw the refresh indicator, only Android, the same with colors of RefreshControl, default is ['red', 'red'].
• loadingProgressBackgroundColor (String) - The background color of the refresh indicator, only Android, the same with progressBackgroundColor of RefreshControl, default is white.
• loadFailContent (String) - The text content when load more failed, default is load fail....
• noMoreContent (String) - The text content when there is no more, default is There is no more~.
• fixedData (Array) - The data when disable to pull to refresh and load more, default is [].
• refreshHandler (Function) - The handler when pull to refresh.
• loadMoreHandler (Function) - The handler when load more.
• responseDataHandler (Function) - The handler of response data, default is return raw data.
• column (Integer) - The column of gridview, when greater than 1, it is gridview, otherwise listview, default is 1.

Contribution

Issues are welcome. Please add a screenshot of bug and code snippet. Quickest way to solve issue is to reproduce it on one of the examples.

Pull requests are welcome. If you want to change API or making something big better to create issue and discuss it first.

License

MIT