Skip to main content

Documentation Index

Fetch the complete documentation index at: https://copylabs.mintlify.app/llms.txt

Use this file to discover all available pages before exploring further.

​
FancyList

FancyList is an enhanced list component that wraps React Native’s FlatList with default styling, theming, and divider support.

​
Import

import { FancyList } from 'radix-native-ui';

​
Usage

import { FancyList, Text } from 'radix-native-ui';

const items = ['Apple', 'Banana', 'Orange'];

<FancyList
  data={items}
  renderItem={({ item }) => <Text>{item}</Text>}
/>

​
Props

​
Examples

​
Basic List

import { FancyList, Text } from 'radix-native-ui';

const items = ['Apple', 'Banana', 'Orange'];

<FancyList
  data={items}
  renderItem={({ item }) => <Text>{item}</Text>}
/>

​
Without Dividers

import { FancyList, Text } from 'radix-native-ui';

const items = ['Item 1', 'Item 2', 'Item 3'];

<FancyList
  data={items}
  renderItem={({ item }) => <Text>{item}</Text>}
  showDividers={false}
/>

​
With Objects

import { FancyList, Text, Flex } from 'radix-native-ui';

interface User {
  id: string;
  name: string;
  email: string;
}

const users: User[] = [
  { id: '1', name: 'John Doe', email: 'john@example.com' },
  { id: '2', name: 'Jane Smith', email: 'jane@example.com' },
];

<FancyList
  data={users}
  renderItem={({ item }) => (
    <Flex direction="column">
      <Text weight="bold">{item.name}</Text>
      <Text size={2} color="gray">{item.email}</Text>
    </Flex>
  )}
/>

​
Settings List

import { Card, FancyList, Text, Flex, Switch, Heading } from 'radix-native-ui';

interface Setting {
  id: string;
  title: string;
  description: string;
  type: 'toggle' | 'info';
}

const settings: Setting[] = [
  { id: 'notifications', title: 'Push Notifications', description: 'Receive push notifications', type: 'toggle' },
  { id: 'dark_mode', title: 'Dark Mode', description: 'Use dark theme', type: 'toggle' },
  { id: 'version', title: 'Version', description: '1.0.0', type: 'info' },
];

<Card>
  <Flex direction="column" gap={3}>
    <Heading size={3}>Settings</Heading>
    <FancyList
      data={settings}
      renderItem={({ item }) => (
        <Flex align="center" justify="space-between">
          <Flex direction="column" flex={1}>
            <Text weight="medium">{item.title}</Text>
            <Text size={2} color="gray">{item.description}</Text>
          </Flex>
          {item.type === 'toggle' && <Switch />}
        </Flex>
      )}
    />
  </Flex>
</Card>

import { FancyList, Text, Flex, Heading } from 'radix-native-ui';

const items = ['Item 1', 'Item 2', 'Item 3'];

const renderHeader = () => (
  <Flex direction="column" align="center" gap={2} paddingVertical={4}>
    <Heading size={4}>List Title</Heading>
    <Text size={2} color="gray">List description</Text>
  </Flex>
);

const renderFooter = () => (
  <Flex padding={4} gap={8}>
    <Button variant="surface" style={{ flex: 1 }}>Cancel</Button>
    <Button style={{ flex: 1 }}>Save</Button>
  </Flex>
);

<FancyList
  data={items}
  renderItem={({ item }) => <Text>{item}</Text>}
  ListHeaderComponent={renderHeader}
  ListFooterComponent={renderFooter}
/>

​
Non-scrollable List

import { FancyList, Text } from 'radix-native-ui';

const items = ['Item 1', 'Item 2', 'Item 3'];

<FancyList
  data={items}
  renderItem={({ item }) => <Text>{item}</Text>}
  scrollable={false}
/>
  • Card - Card component
  • Flex - Flexbox layout
  • Badge - Badge component