TransferList

Dual-list selection transfer

Import: import { TransferList } from 'react-native-mantine';

Usage

import { useState } from 'react';
import { TransferList } from 'react-native-mantine';
import type { TransferListData } from 'react-native-mantine';

const [data, setData] = useState<[TransferListData, TransferListData]>([
  {
    items: [
      { value: 'react', label: 'React' },
      { value: 'vue', label: 'Vue' },
    ],
    selectedValues: [],
  },
  { items: [{ value: 'svelte', label: 'Svelte' }], selectedValues: [] },
]);

<TransferList
  value={data}
  onChange={setData}
  titles={['Available', 'Selected']}
  searchable
  listHeight={250}
/>

Props

Prop	Type	Default	Description
`value` (required)	`[TransferListData, TransferListData]`		Current data state
`onChange` (required)	`(value: [TransferListData, TransferListData]) => void`		Called when data changes
`titles`	`[React.ReactNode, React.ReactNode]`	`['', '']`	Titles for both lists
`searchPlaceholder`	`string`	`'Search...'`	Placeholder for search inputs
`searchable`	`boolean`	`false`	If true, lists will have search
`color`	`MantineColor`	`'blue'`	Transfer list color
`size`	`MantineSize`	`'md'`	Transfer list size
`radius`	`MantineNumberSize`	`'sm'`	Border radius
`listHeight`	`number`	`300`	List height
`transferAllMatchingFilter`	`boolean`	`false`	If true, transfer-all moves only the items matching the current search filter (accepted for Mantine parity, not yet applied)
`itemComponent`	`React.ComponentType<{ data: TransferListDataItem; selected: boolean }>`		Render custom item
`style`	`any`		Additional styles
`testID`	`string`		Test identifier used by testing frameworks

Source on GitHub · npm