D-react-native-awesome-list NPM

React Native Custom List (Using FLatList, SectionList)

Help to implement FlatList, SectionList from React Native faster, iOS + Android

Setup

npm install --save https://github.com/boythan/react-native-awesome-list.git
# --- or ---
yarn add https://github.com/boythan/react-native-awesome-list.git

Using

FlatList with raw data

import AwesomeListComponent from "react-native-awesome-list";

//...


export default const RawDataAwesomeList = () => {
  const listRef = useRef(null)
  //...

  const source = () => {
    return Promise.resolve(YOUR_RAW_DATA_LIST)
  }

  //When you want to reload data in list
  //after this function called, awesomeList will run source then transformer again to fetch new data for list
  const refreshData = () => {
    listRef.refresh()
  }

  //render row item in list
  const renderItem = ({item, index}) => <Text>{item.name}</Text>

  return <AwesomeListComponent
            source={source}
            renderItem={(renderItem}
            ref={listRef}
        />

  //...
}

FlatList with Promise, API call

import AwesomeListComponent from "react-native-awesome-list";

//...

export default const CustomerAwesomeList = () => {
  const listRef = useRef(null)
  //...

  //Receive a promise that return the data will be displayed in list
  const source = (paging) => {
    return API.customerList(paging)
  }

  //Custom data from source function, ensure return an array
  const transformer = (res) => {
    return res?.data?.data ?? []
  }

  //When you want to reload data in list
  //after this function called, awesomeList will run source then transformer again to fetch new data for list
  const refreshData = () => {
    listRef.refresh()
  }

  //render row item in list
  const renderItem = ({item, index}) => <Text>{item.name}</Text>

  return <AwesomeListComponent
            isPaging
            source={source}
            transformer={transformer}
            renderItem={renderItem}
            ref={listRef}
        />

  //...
}

SectionList

import AwesomeListComponent from "react-native-awesome-list";

//...

export default const CustomerAwesomeList = () => {
  const listRef = useRef(null)
  //...

  //Receive a promise that return the data will be displayed in list
  const source = () => {
    return API.customerList()
  }

  //Custom data from source function, ensure return an array
  const transformer = (res) => {
    return res?.data?.data ?? []
  }
  //Custom data from source function, ensure return an array
  const createSections = (res) => {
    return [{
      title: "Section 1",
      data: []
    }]
  }

  //When you want to reload data in list
  //after this function called, awesomeList will run source then transformer again to fetch new data for list
  const refreshData = () => {
    listRef.refresh()
  }

  //render row item in list
  const renderItem = ({item, index}) => <Text>{item.name}</Text>
  const renderSectionHeader = ({section}) => <Text>{section?.title}</Text>

  return <AwesomeListComponent
            ref={listRef}
            isSectionList={true}
            source={source}
            renderItem={renderItem}
            transformer={transformer}
            renderSectionHeader={renderSectionHeader}
            createSections={createSections}

          />

  //...
}

API

Props

Prop	Default	Type	Description
source	() => Promise.resolve([])	`() => Promise`	Source of data
transformer	(response) => response	`() => array`	Array will be displayed in list
renderItem	({item, index}) =>	`func`	render function for list item rendering
keyExtractor	(item) => item?.id ?? item	`func`	unique key for row
isPaging	false	`boolean`	list will be paging(load more) or not
pageSize	20	`number`	number of item will be load in each page
containerStyle	undefined	`style`	root wrapper style
listStyle	undefined	`style`	list style
emptyViewStyle	undefined	`style`	empty view style
renderSeparator	undefined	`func`	separator component
isSectionList	false	`boolean`	is section list or not
renderSectionHeader	undefined	`func`	section header component
createSections	undefined	`func`	receive section data follow format {title: `string`, data: `array`}
renderEmptyView	undefined	`func`	empty view (when data is empty) component
renderErrorView	undefined	`func`	error view (when source function is rejected) component
renderProgress	undefined	`func`	progress view (when source function is waiting promise) component
listHeaderComponent	undefined	`func`	List's header component
emptyText	"No result"	`text`	Custom empty text (when data is empty)
filterEmptyText	"No filter result"	`text`	Custom filter empty text (when filter data is empty)
numColumns	1	`number`	number of column in list

Methods

method	params	Description
refresh	null	Refresh data, awesomeList will re-run source then transformer
applyFilter	actionFilter	when you want to apply some filter for this list E.g listRef.applyFilter(item => item.isSelect)
removeFilter	null	when you want to remove all filter that you applied before

Enjoy

Questions or suggestions?

Feel free to open an issue

@infinitebrahmanuniverse/nolb-d-@everything-registry/sub-chunk-1436

1.0.0

2 years ago