This is documentation for the next SDK version. For up-to-date documentation, see the latest version (SDK 55).

Link

A SwiftUI Link component for displaying clickable links.

iOS

tvOS

GitHub

npm

Changelog

Expo UI Link matches the official SwiftUI Link API.

Installation

Terminal

- npx expo install @expo/ui

If you are installing this in an existing React Native app, make sure to install expo in your project.

Usage

Basic link

BasicLinkExample.tsx

import { Host, Link } from '@expo/ui/swift-ui';

export default function BasicLinkExample() {
  return (
    <Host style={{ flex: 1 }}>
      <Link label="Visit Expo" destination="https://expo.dev" />
    </Host>
  );
}

Custom label content

You can pass custom components as children for more complex link label content.

CustomContentExample.tsx

import { Host, Link, VStack, Image, Text } from '@expo/ui/swift-ui';

export default function CustomContentExample() {
  return (
    <Host matchContents>
      <Link destination="https://expo.dev">
        <VStack spacing={4}>
          <Image systemName="link" />
          <Text>Expo</Text>
        </VStack>
      </Link>
    </Host>
  );
}

API

import { Link } from '@expo/ui/swift-ui';

Component

`Link`

iOS

tvOS

Type: React.Element<LinkProps>

Displays a native link component.

Example

import { Link } from '@expo/ui/swift-ui';
import { foregroundStyle, font } from '@expo/ui/swift-ui/modifiers';

<Link
  label="Open"
  destination="https://expo.dev"
  modifiers={[
    foregroundStyle('red'),
    font({ size: 24, weight: 'bold' })
  ]}
/>

LinkProps

`children`

iOS

tvOS

Optional • Literal type: union

Custom content for the link label. Use this for custom label views. Only nested elements are supported, not plain strings.

Acceptable values are: React.ReactElement | React.ReactElement

`destination`

iOS

tvOS

Type: string

The URL for the link.

`label`

iOS

tvOS

Optional • Type: string

The text label for the Link. Use this for simple text links.

Inherited Props

CommonViewModifierProps