A Flatlist with alphabet sidebar.
When the list doesnt have items with letter you pressed on, onPressLetterWithNoMatches is called this.props.onPressLetterWithNoMatches
After the list is scrolled to items with letter you pressed on, onPressLetter is called this.props.onPressLetter
npm install react-native-custom-alphabetflatlist --save
import AlphabetFlatList from 'react-native-custom-alphabetflatlist'
/* inside your render function */
<AlphabetFlatList
renderItem={this.renderItem}
data={names}
getItemLayout={this.getItemLayout}
/>
Please check the example folder.
You can use all the props provided by FlatList.
Name | Type | Default | Required | Description |
---|---|---|---|---|
data | array | YES | Expects array of strings. If you are passing array of objects then also use matchFieldName prop. | |
renderItem | function | YES | ||
keyExtractor | function | (item, index) => index.toString() | ||
viewabilityConfig | object | { itemVisiblePercentThreshold: 50 } | ||
getItemLayout | function | YES | ||
mainFlatListContainerStyle | object | {} | ||
alphabetListProps | object | { alphabetListContainerStyle: {}, alphabetButtonStyle: {}, selectedAlphabetButtonStyle: {}, alphabetTextStyle: {}, selectedAlphabetTextStyle: {} } |
||
matchFieldName | string | false | If data array contains object then pass a field name whose value you want to show on main list. See Issue #2. |