Rn-extended-flatlist NPM

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