@nghinv/react-native-alphabet-list
    TypeScript icon, indicating that this package has built-in type declarations

    0.0.4 • Public • Published

    @nghinv/react-native-alphabet-list

    React Native Alphabet List Component use reanimated 2 library


    CircleCI Version MIT License All Contributors PRs Welcome

    Installation

    yarn add @nghinv/react-native-alphabet-list

    or

    npm install @nghinv/react-native-alphabet-list
    yarn add react-native-gesture-handler react-native-reanimated react-native-redash react-fast-compare

    Usage

    import React, { useState, useCallback } from 'react';
    import { View, Text, StyleSheet } from 'react-native';
    import AlphabetList from '@nghinv/react-native-alphabet-list';
    import { Alphabet } from '@nghinv/react-native-alphabet-list/utils';
    import { CharType, ItemType } from '@nghinv/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
    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

    Credits

    Install

    npm i @nghinv/react-native-alphabet-list

    DownloadsWeekly Downloads

    5

    Version

    0.0.4

    License

    MIT

    Unpacked Size

    113 kB

    Total Files

    45

    Last publish

    Collaborators

    • nghinv