react-native-section-indicator

React Native section scroll indicator

react-native-section-indicator is a customizable section indicator for React Native's SectionList component, providing an easy way to navigate through sections.

Libraries Required

To use this project, you need to install the following libraries:

• react-native-gesture-handler
• react-native-reanimated

Installation

Install the package using Yarn or NPM:

yarn add react-native-section-indicator
npm install react-native-section-indicator

Usage

import React, { useRef } from 'react'
import { SectionList, View } from 'react-native'
import { SectionListScrollIndicator, getItemLayoutSectionList } from 'react-native-section-indicator'

const App = () => {
  const sectionListRef = useRef(null)

  return (
    <View>
      <SectionList
        ref={sectionListRef}
        getItemLayout={
          getItemLayoutSectionList({
            getItemHeight: 60, // Section list item's height
            getSectionHeaderHeight: 40, // Section list header height
            // Other props:
            // getListHeaderHeight
            // getItemSeparatorHeight
            // getSectionFooterHeight
            // getSectionSeparatorHeight
          })
        }
        // other SectionList props
      />

      <SectionListScrollIndicator
        sectionListRef={sectionListRef}
        sectionTitles={[]} // Array of section titles
      />
    </View>
  )
}

export default App

Available props for SectionListScrollIndicator

| Name | Type | Description | | -------------------------------- | -------------------- | ------------------------------------------------------------------------------ | | sectionTitles | string[] | (REQUIRED)Array of section titles | | sectionListRef | RefObject<SectionList<any, DefaultSectionT>> | (REQUIRED)Section list ref | | topContainer | number | Top layout prop of indicator container | | paddingVerticalContainer | number | Padding vertical indicator container | | sectionTitleHeight | number | Section title height | | indicatorContainerStyle | ViewStyle | Custom style for indicator container | | sectionTitleInactiveStyle | TextStyle | Custom style inactive for section title | | sectionTitleHighlightStyle | TextStyle | Custom style highlight for section title | | sectionInactiveStyle | ViewStyle | Custom style inactive for section title wrapper | | sectionHighlightStyle | ViewStyle | Custom style highlight for section title wrapper | | throttleDuration | number | Custom throttle duration, default is 200 ms | | throttleFunc | any | Use your own throttle function |

Contributing

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

License

MIT