/react-native-custom-list

Custom header animation and scrollComponent list. It is based on react-native-ptr-control. Support ios and android

Primary LanguageJavaScript

npm version npm

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()}