0.0.36 • Published 2 years ago
@lang0909/react-native-alpha-flat-list v0.0.36
lang0909 Fork Version
React Native Alpha Flat List
A simple and fully customizable React Native component that implements Alphabetical List
version for lang0909
Getting Started
$ npm install --save @lang0909/react-native-alpha-flat-list
Example
Usage
Import the AlphaFlatList
component from react-native-alpha-flat-list
and use it like so:
import React from "react";
import { SafeAreaView, View, Text } from "react-native";
import AlphaFlatList from "react-native-alpha-flat-list";
const ITEM_HEIGHT = 20;
const items = Array.from({ length: 500 }, () => {
return {
id: "_" + Math.random().toString(36).substr(2, 9),
name: Math.random().toString(36).substring(7).replace(/[0-9]/g, ""),
};
});
const data = items.sort((previous, next) =>
previous.name.localeCompare(next.name)
);
export default function App() {
const renderItem = ({ item }) => (
<View style={{ height: ITEM_HEIGHT, paddingLeft: 20 }}>
<Text>{item.name}</Text>
</View>
);
const keyExtractor = ({ id }) => id;
return (
<SafeAreaView style={{ flex: 1 }}>
<AlphaFlatList
data={data}
initialNumToRender={data.length}
keyExtractor={keyExtractor}
renderItem={renderItem}
itemHeight={ITEM_HEIGHT}
listStyle={{ paddingLeft: 10 }}
sidebarLetterStyle={{ fontWeight: "bold" }}
sidebarLetterActiveStyle={{ color: "red" }}
/>
</SafeAreaView>
);
}
0.0.35
2 years ago
0.0.36
2 years ago
0.0.32
2 years ago
0.0.33
2 years ago
0.0.34
2 years ago
0.0.31
3 years ago
0.0.30
3 years ago
0.0.29
3 years ago
0.0.28
3 years ago
0.0.26
3 years ago
0.0.27
3 years ago
0.0.20
3 years ago
0.0.21
3 years ago
0.0.22
3 years ago
0.0.23
3 years ago
0.0.24
3 years ago
0.0.25
3 years ago
0.0.16
3 years ago
0.0.17
3 years ago
0.0.18
3 years ago
0.0.19
3 years ago
0.0.15
3 years ago
0.0.10
3 years ago
0.0.11
3 years ago
0.0.12
3 years ago
0.0.13
3 years ago
0.0.14
3 years ago
0.0.9
3 years ago
0.0.8
3 years ago