Sticky header on SectionList ReactNative

Question

I need to create a screen Catalog(Categories and Products). I'm using SectionList from React Native in order to achive this.

I need to make that Categories component stick on the top when you scroll product lists. Is there any library that could help me with this Catalog screen ? Please look at the image here..

import React from "react";
import { View, StyleSheet, SectionList } from "react-native";

import Text from "../Text";

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 TabCategories = () => (
  <View>
    <Text>Horizontal list of categories</Text>
  </View>
);

const Item = ({ title }) => (
  <View style={styles.item}>
    <Text style={styles.title}>{title}</Text>
  </View>
);

const TestSectionList = (props) => {
  return (
    <View style={styles.container}>
      <Text style={styles.SRC}>Some React Component</Text>
      <SectionList
        sections={DATA}
        keyExtractor={(item, index) => item + index}
        renderItem={({ item }) => <Item title={item} />}
        renderSectionHeader={({ section: { title } }) => (
          <Text style={styles.header}>{title}</Text>
        )}
        StickyHeaderComponent={TabCategories}
      />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {},
  SRC: {
    fontWeight: "bold",
    borderWidth: 1,
    borderColor: "#fff",
    padding: 10,
  },
  item: {
    padding: 30,
  },
  header: {
    fontWeight: "bold",
    fontSize: 20,
  },
});

export default TestSectionList;

Answer 1

You can try this library react-native-tabs-section-list

https://github.com/bogoslavskiy/react-native-tabs-section-list

Answer 2

If you are talking about react-native-section-list, it inherits ScrollView props, you can check in the docs, in props section, so it has stickyHeaderComponent prop which should be exactly what you want.

Answer 3

stickySectionHeadersEnabled Makes section headers stick to the top of the screen until the next one pushes it up

ListHeaderComponent Rendered at the very beginning of the list

renderSectionHeader Rendered at the top of each SECTION

I think this should do:

<SectionList
      sections={DATA}
      keyExtractor={(item, index) => item + index}
      renderItem={({ item }) => <Item title={item} />}
      ListHeaderComponent={({ section: { title } }) => (
        <Text style={styles.header}>{title}</Text>
      )}
      renderSectionHeader={TabCategories}
      stickySectionHeadersEnabled
   />