React Native Section List

The react-native-section-list package is a library for React Native applications that simplifies the rendering and handling of lists. It provides a customizable component, SectionList, which allows you to display and iterate through a list of items, along with optional heading and item rendering functionalities.

React Native SectionList Example

Installation

Download the package with npm or yarn

npm install react-native-section-list

In order for react-native-section-list to work, you also need to install the moment

npm install moment  

Usage

import SectionList from 'react-native-section-list';

 <SectionList
        jsonKey={'category'}
        isDate={true}
        containerStyle={styles.container}
        childContainerStyle={undefined}
        data={DATA}
        renderHeading={(title) => (
          <Text style={styles.headerText}>{title}</Text>
        )}
        renderItem={({ item, index }: { item: any; index?: number }) => (
          <Text key={index}>{JSON.stringify(item)}</Text>
        )}
      />

Props

All the FlatList props can be passed.

| Prop | Type | Description
| --------------------------- | -------------------------------- | ----------------------------------------------------------------------| | jsonKey | string | Extracts unique identifiers from the data (Required) |
| isDate | boolean | indicates whether to sort data by date. | | containerStyle | ViewStyle | Styling for the main container that holds the list. |
| childContainerStyle | ViewStyle | Additional styling for the child container that wraps |
| renderHeading | React.FC<any> | renders each item in the list . | | data | Array<any> | An array of data to render in the FlatList (Required) |

Contributing

See the contributing guide to learn how to contribute to the repository and the development workflow.

License

MIT

Made with create-react-native-library