react-native-flash-section-list

!npm version
!npm download

SectionList for React Native using FlashList

Getting Started

This library export one components - SectionFlashList (similar to SectionList).

Internally, these components use the FlashList from shopify.

$3

You can install the package via npm.

``
npm install react-native-flash-section-list
`

$3

You can use it like React Native's SectionList.

`ts
import { FlashSectionList } from "react-native-flash-section-list";
import React from "react";
import { SafeAreaView, StatusBar, StyleSheet, Text, View } from "react-native";

const DATA = [
{
title: "Main dishes",
data: ["Pizza", "Burger", "Risotto"],
},
{
title: "Sides",
data: ["French Fries", "Onion Rings", "Fried Shrimps"],
},
{
title: "Drinks",
data: ["Water", "Coke", "Beer"],
},
{
title: "Desserts",
data: ["Cheese Cake", "Ice Cream"],
},
];

const App = () => (

sections={DATA}
keyExtractor={(item, index) => {
if (item.type === "sectionHeader") {
return item.section.title;
} else {
return item.item + index;
}
}}
renderItem={({ item }: { item: string }) => (

{item}

)}
renderSectionHeader={({ section: { title } }) => (
{title}
)}
/>

);

const styles = StyleSheet.create({
container: {
flex: 1,
paddingTop: StatusBar.currentHeight,
marginHorizontal: 16,
},
item: {
backgroundColor: "#f9c2ff",
padding: 20,
marginVertical: 8,
},
header: {
fontSize: 32,
backgroundColor: "#fff",
},
title: {
fontSize: 24,
},
});

export default App;
`

#### Properties

Sorry, Editing in progress.

Changelog

$3

- Fixed a crash that occurred when not using SectionIndex.

$3

- Adjust Style Props for Improved Android Performance.

$3

- Add Section Index style props.
- fixed bugs.

$3

- Add Section Index Component.

$3

- Released the library.