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