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