react-native-nest-alphabet-list
v1.0.2
Published
Nguyen Phuc Bao Chau
Downloads
5
Maintainers
Readme
Installation
- Using npm:
npm install react-native-nest-alphabet-list --save
- Using Yarn:
yarn add react-native-nest-alphabet-list
Example
import React, {Fragment} from 'react';
import {StatusBar, Text, View} from 'react-native';
import AlphabetFlatList from "react-native-nest-alphabet-list";
import ContactItem, {CONTACT_ITEM_HEIGHT, IContact} from "./ContactItem";
...
const HEADER_HEIGHT = 50;
const App = () => {
return (
<Fragment>
<StatusBar barStyle="dark-content"/>
<AlphabetFlatList<IContact>
data={data}
itemHeight={CONTACT_ITEM_HEIGHT}
headerHeight={HEADER_HEIGHT}
renderItem={ContactItem}
ListHeaderComponent={(
<View style={{
height: HEADER_HEIGHT,
justifyContent: 'center',
alignItems: 'center'
}}>
<Text>ListHeaderComponent</Text>
</View>
)}
/>
</Fragment>
);
};
Props
data
(Object) [isRequire] - listData to displayitemHeight
(Number) [isRequire] - itemComponent heightrenderItem
(Function) [isRequire] - itemComponent rendersectionHeaderHeight
(Number) - sectionHeader height; default is 25renderSectionHeader
(Function) - sectionHeaderListHeaderComponent
(Function) - ListHeaderalphabetToast
(Boolean) - click on the letter to prompt