@raiden16f7/react-native-alphabet-list
v0.0.2
Published
React Native Alphabet List
Downloads
95
Maintainers
Readme
@Raiden16F7/react-native-alphabet-list
React Native Alphabet List Component use reanimated 2 library with refresh control Fork of @nghinv/react-native-alphabet-list
Installation
yarn add @raiden16f7/react-native-alphabet-list
or
npm install @raiden16f7/react-native-alphabet-list
yarn add react-native-gesture-handler react-native-reanimated react-native-redash react-fast-compare
Setup react-native-gesture-handler and reanimated according to their docs.
Usage
import React, { useState, useCallback } from 'react';
import { View, Text, StyleSheet } from 'react-native';
import AlphabetList from '@raiden16f7/react-native-alphabet-list';
import { Alphabet } from '@raiden16f7/react-native-alphabet-list/utils';
import { CharType, ItemType } from '@raiden16f7/react-native-alphabet-list/types';
const DATA: Array<{ name: string, key: CharType }> = [];
Alphabet.forEach(char => {
const random = Math.round(8 * Math.random());
if (random > 0) {
for (let i = 0; i < random; i++) {
const contact = `${char.toLocaleUpperCase()} - Contact ${i + 1}`;
DATA.push({
name: contact,
key: char as CharType,
});
}
}
});
function App() {
const renderItem = ({ item }: ItemType) => {
return (
<View style={styles.viewContent}>
<Text style={styles.txtContent}>{item.name}</Text>
</View>
);
};
return (
<View style={styles.container}>
<AlphabetList
data={DATA}
renderItem={renderItem}
/>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
paddingVertical: 24,
},
viewContent: {
paddingRight: 16,
paddingLeft: 40,
marginBottom: 24,
},
txtContent: {
fontSize: 16,
color: 'white',
},
});
export default App;
Property
| Property | Type | Default | Description |
|----------|:----:|:-------:|-------------|
| style | ViewStyle
| undefined
| |
| contentContainerStyle | ViewStyle
| undefined
| |
| indexStyle | ViewStyle
| undefined
| |
| data | Array<{ key: string, [key string]: any }>
| undefined
| |
| renderHeader | (header: string) => React.ReactNode
| undefined
| |
| renderItem | ({ item, index }) => React.ReactNode
| undefined
|
| showAllHeader | boolean
| false
| |
| trackSize | number
| 18
| |
| trackColor | string
| white
| |
| charHeight | number
| 20
| |
| trackScale | number
| 1.5
| |
| lineWidth | number
| 20
| |
| trackScale | number
| 1.5
| |
| textColorActive | string
| tomato
| |
| textInactiveColor | string
| white
| |
| headerTitleColor | string
| white
| |
| charStyle | TextStyle
| undefined
| |
| headerTitleStyle | TextStyle
| undefined
| |
| headerStyle | ViewStyle
| undefined
| |
| refreshControl | RefreshControl
| undefined
| |
Created By
Credits
- Fork of @Nghi-NV