Ninja Pumpkin Mutants

    react-native-sectionlist-deliveroo
    TypeScript icon, indicating that this package has built-in type declarations

    1.0.2 • Public • Published

    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

    Install

    npm i react-native-sectionlist-deliveroo

    DownloadsWeekly Downloads

    1

    Version

    1.0.2

    License

    MIT

    Unpacked Size

    15.7 kB

    Total Files

    11

    Last publish

    Collaborators

    • riamon-v