react-native-alphabetflatlist
A Flatlist with alphabet sidebar.
Usage
import AlphabetFlatList from 'react-native-flatlist'
/* inside your render function */
<AlphabetFlatList
renderItem={this.renderItem}
data={names}
getItemLayout={this.getItemLayout}
/>
Example
Please check the example folder.
Props
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. |