ListLink

A component for creating consistent navigation links in lists with support for icons, descriptions, and various layout options.

Import

import ListLink from '@/components/ListLink';

Features

Navigation support via expo-router
Leading and trailing icons
Optional description text
Right-aligned content support
Clear visual feedback on press

Props

Prop	Type	Default	Description
`title`	`string`	—	Primary text to display
`description`	`string`	—	Secondary text shown below title
`href`	`string`	—	Navigation destination
`icon`	`IconName`	—	Leading icon name
`rightText`	`string`	—	Text to display on the right
`rightContent`	`ReactNode`	—	Custom component on the right side
`showChevron`	`boolean`	`true`	Whether to show > chevron on right
`onPress`	`() => void`	—	Custom press handler
`className`	`string`	—	Additional styling classes
`contentClassName`	`string`	—	Classes for the content container

Basic Usage

// Basic navigation item
<ListLink 
  title="Profile"
  href="/profile"
  icon="User"
/>
 
// With description text
<ListLink
  title="Notifications"
  description="Configure your alert preferences"
  href="/settings/notifications"
  icon="Bell"
/>
 
// With right-aligned text
<ListLink
  title="App Version"
  rightText="1.2.0"
  showChevron={false}
/>

ListLink

ListLink

Import

Features

Props

Basic Usage

On this page