react-native-sectionlist-deliveroo

This package is inspired by deliveroo App. It provides a section list with a header component to make the list bidirectionnal. The header is scrolling horizontally and contains the name of the sections. While scrolling into the section list it updates the

Usage no npm install needed!

<script type="module">
  import reactNativeSectionlistDeliveroo from 'https://cdn.skypack.dev/react-native-sectionlist-deliveroo';
</script>

README

react-native-sectionlist-deliveroo

Components inspired by Deliveroo application. It provides a React Native section list with its header displaying sections name. The list is bidirectionnal, in the header, you can click on the title of the section you want to go, it'll scroll to the section. Or, has you scroll to the list, it updates the indicator in the header to always follow the section you are visualazing (See demo gifs).

  • Works with expo
  • Custom styling for the header.
  • Each component accepts props of the initial react-native component
  • Typescript support

Works for both Android & IOS

IOS Android

View demo on snack.expo.io

Installation

If using yarn:

$ yarn add react-native-sectionlist-deliveroo

If using npm:

$ npm i react-native-sectionlist-deliveroo

Usage

import SectionListDeliveroo from 'react-native-anchrable-scrollview';

Provide the props required for a basic SectionList in React-Native.

Basic Usage
function App() {
  const data = [
    {
      title: 'Section 1',
      key: 'Section1',
      data: [...Array(20)],
    },
    {
      title: 'Sec 2',
      key: 'Section2',
      data: [...Array(20)],
    },
    {
      title: 'Sectiooooooooooooooooooooooon 3',
      key: 'Section3',
      data: [...Array(20)],
    },
    {
      title: 'Section 4',
      key: 'Section4',
      data: [...Array(20)],
    },
    {
      title: 'Sec 5',
      key: 'Section5',
      data: [...Array(20)],
    },
    {
      title: 'Sectioooooooooooon 6',
      key: 'Section6',
      data: [...Array(20)],
    },
  ];

  return (
    <SectionListDeliveroo
      sections={data}
      renderItem={({ index }) => <Text>{index}</Text>}
      stickySectionHeadersEnabled={false}
      showsVerticalScrollIndicator={false}
      renderSectionHeader={({ section: { title } }) => <Text>{title}</Text>}
      keyExtractor={(_item, index) => `${index}`}
    />
  );
}
Styling

All Styling props are optionals

Props Type Description Default values
containerStyle StyleProp<ViewStyle> Style of the container surrounding the header and the section list none
headerContainerStyle StyleProp<ViewStyle> Style of the container surrounding the header none
headerItemStyle StyleProp<TextStyle> Style for the text of each item in the header {
marginHorizontal: 12,
fontWeight: 'bold',
fontSize: 15
}
colors { active: string, inactive: string } Theses properties are the color of the text for each item in the header {
active: "white",
inactove: "black"
}
indicatorContainerStyle StyleProp<ViewStyle> Style for the indicator {
backgroundColor: "red",
borderRadius: 50
}

TroubleShooting

ANDROID
  • TypeError: null is not an object (evaluating 'InnerNativeModule.installCoreFunctions'): Solution

IOS:

nothing for now

Contributing

Pull requests are always welcome! Feel free to open a new GitHub issue for any changes that can be made. Keep it simple. Keep it minimal. Don't put every single feature just because you can.

Working on your first Pull Request? You can learn how from this free series How to Contribute to an Open Source Project on GitHub

Authors or Acknowledgments

  • Vincent Riamon

License

This project is licensed under the MIT License