This Library includes two components: UltimateListView
and UltimateRefreshView
This module supports both of iOS and Android platforms.
All codes are written in ES6 syntax, and meet most rules of Eslint syntax
Quick installation
yarn add react-native-ultimate-listview@3.0.2
yarn add react-native-ultimate-listview@latest
Know Issue (v3.3.0): On Android, if you are using CustomRefreshView, and the total hight of your first load data is less than your device height, then the RefreshView may still sticky on the top. However, if the data you loaded is beyond your screen, everything's fine. This issue only happen on Android, any PR is welcome.
iOS | Android | |
---|---|---|
FlatList |
import { UltimateListView, UltimateRefreshView } from 'react-native-ultimate-listview'
<UltimateRefreshView onRefresh={this.onRefresh}>
<YourView/>
</UltimateRefreshView>
<UltimateListView
ref={ref => this.listView = ref}
key={this.state.layout}
onFetch={this.onFetch}
keyExtractor={(item, index) => `${index} - ${item}`}
refreshableMode="advanced" // basic or advanced
item={this.renderItem} // this takes three params (item, index, separator)
displayDate
arrowImageStyle={{ width: 20, height: 20, resizeMode: 'contain' }}/>
Or you can look through this link: Usage
Provide a new Component
Change import syntax to:
import { UltimateListView, UltimateRefreshView } from 'react-native-ultimate-listview'
@gameboyVito - gameboyvito@gmail.com
yarn
or npm install
in the root folderyarn eslint-fix
or npm run eslint-fix
I have found some articles to explain why you need to use FlatList instead of the legacy ListView. There are some obvious reasons:
MIT