Lists & Data Display

namespace List {
  function Item(props: ListItemProps): JSX.Element;
  function Accordion(props: ListAccordionProps): JSX.Element;
  function AccordionGroup(props: ListAccordionGroupProps): JSX.Element;
  function Section(props: ListSectionProps): JSX.Element;
  function Subheader(props: ListSubheaderProps): JSX.Element;
  function Icon(props: ListIconProps): JSX.Element;
  function Image(props: ListImageProps): JSX.Element;
}

interface ListItemProps {
  title: React.ReactNode;
  description?: React.ReactNode;
  left?: (props: { color: string; style?: StyleProp<ViewStyle> }) => React.ReactNode;
  right?: (props: { color: string; style?: StyleProp<ViewStyle> }) => React.ReactNode;
  onPress?: () => void;
  disabled?: boolean;
  style?: StyleProp<ViewStyle>;
  titleStyle?: StyleProp<TextStyle>;
  descriptionStyle?: StyleProp<TextStyle>;
  titleNumberOfLines?: number;
  descriptionNumberOfLines?: number;
  theme?: ThemeProp;
}

interface ListAccordionProps {
  title: React.ReactNode;
  description?: React.ReactNode;
  left?: (props: { isExpanded: boolean }) => React.ReactNode;
  right?: (props: { isExpanded: boolean }) => React.ReactNode;
  expanded?: boolean;
  onPress?: () => void;
  children: React.ReactNode;
  id?: string | number;
  style?: StyleProp<ViewStyle>;
  titleStyle?: StyleProp<TextStyle>;
  descriptionStyle?: StyleProp<TextStyle>;
  theme?: ThemeProp;
}

interface ListSectionProps {
  title?: string;
  children: React.ReactNode;
  titleStyle?: StyleProp<TextStyle>;
  style?: StyleProp<ViewStyle>;
  theme?: ThemeProp;
}

interface ListIconProps {
  icon: IconSource;
  color?: string;
  style?: StyleProp<ViewStyle>;
}

interface ListImageProps {
  source: ImageSourcePropType;
  style?: StyleProp<ViewStyle>;
}

import React, { useState } from 'react';
import { List } from 'react-native-paper';

function ListExample() {
  const [expanded, setExpanded] = useState(true);

  return (
    <List.Section>
      <List.Subheader>Some title</List.Subheader>
      <List.Item
        title="First Item"
        description="Item description"
        left={props => <List.Icon {...props} icon="folder" />}
      />
      <List.Accordion
        title="Expandable list item"
        expanded={expanded}
        onPress={() => setExpanded(!expanded)}
      >
        <List.Item title="First item" />
        <List.Item title="Second item" />
      </List.Accordion>
    </List.Section>
  );
}

function DataTable(props: DataTableProps): JSX.Element;

interface DataTableProps {
  children: React.ReactNode;
  style?: StyleProp<ViewStyle>;
  theme?: ThemeProp;
}

namespace DataTable {
  function Header(props: DataTableHeaderProps): JSX.Element;
  function Title(props: DataTableTitleProps): JSX.Element;
  function Row(props: DataTableRowProps): JSX.Element;
  function Cell(props: DataTableCellProps): JSX.Element;
  function Pagination(props: DataTablePaginationProps): JSX.Element;
}

interface DataTableHeaderProps {
  children: React.ReactNode;
  style?: StyleProp<ViewStyle>;
  theme?: ThemeProp;
}

interface DataTableTitleProps {
  children: React.ReactNode;
  sortDirection?: 'ascending' | 'descending';
  onPress?: () => void;
  numeric?: boolean;
  numberOfLines?: number;
  style?: StyleProp<ViewStyle>;
  theme?: ThemeProp;
}

interface DataTableRowProps {
  children: React.ReactNode;
  onPress?: () => void;
  style?: StyleProp<ViewStyle>;
  theme?: ThemeProp;
}

interface DataTableCellProps {
  children: React.ReactNode;
  numeric?: boolean;
  numberOfLines?: number;
  style?: StyleProp<ViewStyle>;
  theme?: ThemeProp;
}

interface DataTablePaginationProps {
  page: number;
  numberOfPages: number;
  onPageChange: (page: number) => void;
  label?: string;
  numberOfItemsPerPageList?: number[];
  numberOfItemsPerPage?: number;
  onItemsPerPageChange?: (numberOfItemsPerPage: number) => void;
  showFastPaginationControls?: boolean;
  optionsLabel?: string;
  optionsPerPage?: string;
  style?: StyleProp<ViewStyle>;
  theme?: ThemeProp;
}

import React, { useState } from 'react';
import { DataTable } from 'react-native-paper';

function TableExample() {
  const [page, setPage] = useState(0);
  const [numberOfItemsPerPage, setNumberOfItemsPerPage] = useState(2);
  const numberOfItemsPerPageList = [2, 3, 4];

  return (
    <DataTable>
      <DataTable.Header>
        <DataTable.Title sortDirection="descending">Name</DataTable.Title>
        <DataTable.Title numeric>Age</DataTable.Title>
      </DataTable.Header>

      <DataTable.Row>
        <DataTable.Cell>John</DataTable.Cell>
        <DataTable.Cell numeric>25</DataTable.Cell>
      </DataTable.Row>

      <DataTable.Row>
        <DataTable.Cell>Jane</DataTable.Cell>
        <DataTable.Cell numeric>30</DataTable.Cell>
      </DataTable.Row>

      <DataTable.Pagination
        page={page}
        numberOfPages={3}
        onPageChange={setPage}
        numberOfItemsPerPageList={numberOfItemsPerPageList}
        numberOfItemsPerPage={numberOfItemsPerPage}
        onItemsPerPageChange={setNumberOfItemsPerPage}
        showFastPaginationControls
        optionsLabel="Rows per page"
      />
    </DataTable>
  );
}