A wrapper library for ListView and GridView in React Native
This is a wrapper library for ListView & GridView in React Native.
npm install react-native-easy-listview-gridview --save
import EasyListView from 'react-native-easy-listview-gridview'
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) {
// ...
}
}
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) {
// ...
}
}
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.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.
MIT