react-native-use-flatlist
v0.2.3
Published
make <FlatList /> easier to use
Downloads
460
Readme
WIP 👷♂️
react-native-use-flatlist
make <FlatList />
easier to use
Installation
yarn add react-native-use-flatlist
Features
- 👌 handles all the complex calculation for
getItemLayout
- ✅ accurate scroll to index with
scrollToIndex
- 👀 easy viewable item tracking API for view event logging
Usage
Vertical FlatList
import { useVerticalFlatList } from 'react-native-use-flatlist';
// item should have fixed size
const ITEM_HEIGHT = 100;
const { ref, itemWidth, props, scrollToIndex, onHeaderLayout } =
useVerticalFlatList<string>({
paddingVertical: 20,
columnPaddingHorizontal: 10,
itemHeight: ITEM_HEIGHT,
numColumns: 2,
itemGap: 10,
rowGap: 10,
});
return (
<FlatList
ref={ref}
data={data}
{...props}
ListHeaderComponent={<MyHeader onLayout={onHeaderLayout} />}
/>
);
Horizontal FlatList
import { useHorizontalFlatList } from 'react-native-use-flatlist';
const ITEM_WIDTH = 100;
const { ref, props, onHeaderLayout, scrollToIndex } =
useHorizontalFlatList<ItemType>({
itemWidth: ITEM_WIDTH,
itemGap: 10,
paddingHorizontal: 10,
});
return (
<FlatList
ref={ref}
data={data}
{...props}
ListHeaderComponent={<MyHeader onLayout={onHeaderLayout} />}
/>
);
Viewable Item Tracking
interface ViewableItemOptions<T> {
/**
* callback when item is viewable
*/
onItemViewable?: (item: T, index: number) => void;
/**
* 'multiple' - `onItemViewable` will be called multiple times for each item
* 'once' - `onItemViewable` will be called only once for each item
*
* @default 'multiple'
*/
shouldViewable?: 'multiple' | 'once';
}
const { onViewableItemsChanged } = useFlatListViewableItems({
shouldViewable: 'once',
onItemViewable: (item) => {
console.log('visible', item);
},
});
<FlatList data={data} onViewableItemsChanged={onViewableItemsChanged} />;
Contributing
See the contributing guide to learn how to contribute to the repository and the development workflow.
License
MIT
Made with create-react-native-library