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. |