react-native-alphabetflatlist

KO | EN

gitlite — search

#javascript #python #hacktoberfest #react #ai #typescript #llm #go #golang #android #machine-learning #rust #deep-learning #linux

react-native-alphabetflatlist

★ 38 Open GitHub ↗

A Flatlist with alphabet sidebar.

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# 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](https://github.com/ayushnawani/react-native-alphabetflatlist/blob/master/example/AlphabetFlatListExample.js) folder.

![](https://github.com/ayushnawani/react-native-alphabetflatlist/blob/master/example/demo.gif)

## 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 | { &ensp;alphabetListContainerStyle: {}, &ensp;alphabetButtonStyle: {}, &ensp;selectedAlphabetButtonStyle: {}, &ensp;alphabetTextStyle: {}, &ensp;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](https://github.com/ayushnawani/react-native-alphabetflatlist/issues/2). |

react-native-alphabetflatlist

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

react-native-alphabetflatlist

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

Download README