Skip to content
Docs
Components
Lists
List

List

Wrapper around FlatList component from react-native.

List component accepts every props from react native FlatList component.

Import

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

Usage

EDITABLE EXAMPLE

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

  return (
    <List
      bg={bgColor}
      p="xl"
      data={[
        {
          id: 'bd7acbea-c1b1-46c2-aed5-3ad53abb28ba',
          title: 'First Item',
        },
        {
          id: '3ac68afc-c605-48d3-a4f8-fbd91aa97f63',
          title: 'Second Item',
        },
        {
          id: '58694a0f-3da1-471f-bd96-145571e29d72',
          title: 'Third Item',
        },
      ]}
      renderItem={({ item }) => (
        <Box p="lg">
          <Text>{item.title}</Text>
        </Box>
      )}
    />
  );
}
render(<SimpleList />)

Props

Extends every Box and FlatList props.