rn-extended-flatlist

Helps you write better React Native lists. getItemLayout is implemented out of the box, with default ListEmptyComponent and ItemSeparatorComponent.

Example Usage

import React from 'react';
import {Text} from 'react-native';
import {ExtendedFlatList} from 'rn-extended-flatlist';
 
const MyList = () => (
  <ExtendedFlatList
    data={[1, 2, 3]}
    listItemHeight={100}
    emptyListMessage="Whoops! Nothing to show"
    keyExtractor={(item) => String(item)}
    renderItem={({item}) => <Text style={{height: 100}}>{item}</Text>}
  />
);
 
export default MyList;

<ExtendedFlatList /> props

Props	Type	Description	Default Value
emptyListMessage	string	Message to show when no items available.	"Empty List"
listItemHeight	number	When provided, `getItemLayout` will be automatically implemented.	undefined
noItemSeparator	boolean	Hides `ItemSeparatorComponent`	false
noEmptyListMessage	boolean	Hides `ListEmptyComponent`	false

<EmptyListMessage /> props

Props	Type	Description	Default Value
message	string	Message to show when no items available.	"Empty List"
textStyle	TextStyle	Custom style for the message.	undefined
containerStyle	ViewStyle	Custom style for the container.	undefined

<ItemSeparator /> props

The same props as React Native's <View />

getItemLayout

A partial function that accepts the listItemHeight and returns the function expected by React Native FlatList's getItemLayout prop.

TODO

• Add example snack.
• onEndReached should be debounced.
• Support dynamic item height.

License

rn-extended-flatlist is MIT licensed, as found in the LICENSE file.