react-native-custom-list

Show Cases

Header animation

Run example

npm i

Basic Usage

• Install react-native-custom-list

$ npm install --save react-native-custom-list

• Then, use this:

import { CustomList } from "react-native-custom-list";
 
 
export default class App extends React.Component {
    render() {
        return (
          <CustomList
              data={this.state.data}
              renderItem={this.renderRow}
              keyExtractor={this._getKeyExtrator}
              extraData={this.state.data.length}
              // getRef={ref => (this.refOfScrollList = ref)}
              enableHeaderRefresh
              refreshState={this.state.loading}
              setHeaderHeight={225}
              onTopReachedThreshold={10}
              headerRefresh={HeaderRefresh}
              onHeaderRefreshing={this.refresh}
              onEndReached={this.loadMore}
              ListFooterComponent={this.renderFooter}
              onEndReachedThreshold={0.8}
          />
        )
    }
}

You can see detail in the example

Props

parameter	type	required	description	default
data	array	yes	Data Source
renderItem	function	yes	as FlatList renderItem	true
keyExtractor	function (content?: JSX.Element) => string	no	as FlatList keyExtractor	() => {}
extraData	function () => void	no	as FlatList extraData	() => {}
refreshState	boolean	yes	State indicate refresh	80
setHeaderHeight	number	yes	HeaderRefresh height	300
onTopReachedThreshold	number	no	Init index of images	0
enableHeaderRefresh	boolean	no	Enable Header Refresh	''
headerRefresh	React.ReactElement	no	HeaderRefresh component	() => null
onHeaderRefreshing	function () => void	no	Function used to load data when refresh	() => {}
onEndReached	function () => void	no	as FlatList onEndReached	() => {}
ListFooterComponent	function () => React.ReactElement<any>	no	as FlatList ListFooterComponent	true
onEndReachedThreshold	function (onCancel?: function) => void	no	Onclick	(onCancel) => {onCancel()}