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;

Arboriculture

Answer 1

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
   />

Denotative

Answer 2

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

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

Precedent

Answer 3

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.

Intolerance

Could you please update your question with some code snippet. – Intolerance

Ok. now header is rendered for every section and its not sticky. – Arboriculture

Yeah, seems like that doesn't work yet, the only workaround i see is just add another component next to Some React Component that you have, above your SectionList, might as well open new issue on GitHub... – Intolerance

Well.. I will keep just 1 component(Categories component), both components takes alot of space. Thanks – Arboriculture