List

The List component offers a flexible way to display data lists with options for custom styling.

Import

Phaselis exports one main component for List.

import { List } from "phaselis";

• List: Main Component import for List

Usage

Basic List

import { List } from "phaselis";
import { Text } from "react-native";

const Example = () => {
  return (
    <List
      data={[
        { key: "1", title: "First Item" },
        { key: "2", title: "Second Item" },
        { key: "3", title: "Third Item" },
      ]}
      renderItem={({ item }) => <Text>{item.title}</Text>}
    />
  );
};

export default Example;

Props

tip

Other than listed props below, you can pass any prop that a FlatList component accepts.

These properties can be passed to the component, excluding certain default styles to allow for custom styling options.

style

Name	Type	Description
element	ViewStyle	Style for the list itself (FlatList).
container	ViewStyle	Style for the content container.
columnWrapper	ViewStyle	Style for the column wrapper when using numColumns.
header	ViewStyle	Style for the list header component.
footer	ViewStyle	Style for the list footer component.

You can style the list with the style prop either using an object with named styles or by directly providing ViewStyle properties that will be applied to the list element.

// Object with named styles
<List
  data={data}
  renderItem={renderItem}
  keyExtractor={keyExtractor}
  style={{
    element: { backgroundColor: '#f9f9f9' },
    container: { padding: 10 },
    header: { marginBottom: 10 },
    footer: { marginTop: 10 },
  }}
/>

// Direct element styling
<List
  data={data}
  renderItem={renderItem}
  keyExtractor={keyExtractor}
  style={{ backgroundColor: '#f9f9f9', flex: 1 }}
/>

containerStyle

ViewStyle

Additional style applied directly to the content container.

<List
  data={data}
  renderItem={renderItem}
  containerStyle={{ padding: 16, backgroundColor: '#f5f5f5' }}
/>

columnWrapperStyle

ViewStyle

Additional style applied to the column wrapper when using numColumns.

<List
  data={data}
  renderItem={renderItem}
  numColumns={2}
  columnWrapperStyle={{ gap: 10, justifyContent: 'space-between' }}
/>

headerStyle

ViewStyle

Additional style applied to the list header component.

<List
  data={data}
  renderItem={renderItem}
  ListHeaderComponent={<Text>Header</Text>}
  headerStyle={{ borderBottomWidth: 1, borderBottomColor: '#ccc' }}
/>

footerStyle

ViewStyle

Additional style applied to the list footer component.

<List
  data={data}
  renderItem={renderItem}
  ListFooterComponent={<Text>Footer</Text>}
  footerStyle={{ borderTopWidth: 1, borderTopColor: '#ccc', marginTop: 10 }}
/>

contextValue

any

Additional context value that can be passed to the list component.

import { Text } from "react-native";

<List
  data={[
    { key: "1", title: "First Item" },
    { key: "2", title: "Second Item" },
    { key: "3", title: "Third Item" },
  ]}
  style={{
    header: { backgroundColor: "#2a91ff", padding: 10 },
    footer: { backgroundColor: "#2a91ff", padding: 10 },
    element: {
      backgroundColor: "#d8eeff",
      padding: 15,
      margin: 5,
      borderRadius: 5,
    },
    container: { backgroundColor: "#89cfff", padding: 10 },
    columnWrapper: {
      backgroundColor: "purple",
      justifyContent: "space-between",
      marginBottom: 10,
    },
  }}
  ListHeaderComponent={() => <Text>Header</Text>}
  ListFooterComponent={() => <Text>Footer</Text>}
  renderItem={({ item }) => <Text>{item.title}</Text>}
/>