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;

score 5 · Answer 1 · answered Apr 25 '22 at 16:24

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

score 2 · Answer 2 · answered Jun 19 '21 at 19:39

2

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

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

answered Jun 19 '21 at 19:39

Vasyl Nahuliak

1,912
2
14
32

score 1 · Answer 3 · answered Jun 19 '21 at 20:54

1

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.

answered Jun 19 '21 at 20:54

Mod3rnx

828
1
10
21

Could you please update your question with some code snippet. – Mod3rnx Jun 19 '21 at 21:20
Ok. now header is rendered for every section and its not sticky. – hijack Jun 19 '21 at 22:06
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... – Mod3rnx Jun 20 '21 at 00:05
1

Well.. I will keep just 1 component(Categories component), both components takes alot of space. Thanks – hijack Jun 20 '21 at 00:18

Sticky header on SectionList ReactNative

3 Answers3