CODEWITHSUNDEEP
react-nativereact-native-scrollviewreact-native-sectionlist
hijack
hijack

Reputation: 65

Sticky header on SectionList ReactNative

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;

Upvotes: 5

Views: 14367

Answers (3)

Andr&#233;s Manco
Andr&#233;s Manco

Reputation: 131

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

Upvotes: 10

ShevO27
ShevO27

Reputation: 906

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.

Upvotes: 1

Vasyl Nahuliak
Vasyl Nahuliak

Reputation: 2468

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

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

Upvotes: 2

Related Questions