SectionList

Wrapper around SectionList component from react-native, it accepts every props from react native SectionList component.

Import

import { SectionList } from "react-native-ficus-ui";

Usage

EDITABLE EXAMPLE


const SimpleList = () => {
  const bgColor = useColorModeValue("gray.200", "gray.700");

  return (
    <SectionList
      bg={bgColor}
      p="xl"
      sections={[
        {
          title: 'Main dishes',
          data: ['Pizza', 'Burger', 'Risotto'],
        },
        {
          title: 'Sides',
          data: ['French Fries', 'Onion Rings', 'Fried Shrimps'],
        },
        {
          title: 'Drinks',
          data: ['Water', 'Coke', 'Beer'],
        },
      ]}
      keyExtractor={(item, index) => item + index}
      renderItem={({ item }) => (
        <Box p="sm">
          <Text>{item}</Text>
        </Box>
      )}
      renderSectionHeader={({ section: { title } }) => (
        <Box bg="gray.300" _dark={{ bg: 'gray.800' }} p="sm">
          <Text>{title}</Text>
        </Box>
      )}
    />
  );
}
render(<SimpleList />)

Props

Extends every Box props and props from react native SectionList component : https://reactnative.dev/docs/sectionlist#props (opens in a new tab)

List FlashList