Visually Hidden — Tamagui — React Native Universal UI

Hide content thats visible to accessibility readers.

Features

Keeps content hidden on screen but visible to assistive tech.

Works with "space" prop to not disturb spacing.

Usage

Simply wrap the content you want hidden in VisuallyHidden:

import { Text, VisuallyHidden } from 'tamagui'

export default () => (
  <VisuallyHidden>
    <Text>Add annotations here</Text>
  </VisuallyHidden>
)

When using with the space property, it will avoid double-spacing:

import { H1, Text, VisuallyHidden, YStack } from 'tamagui'

export default () => (
  <YStack space>
    <H1>Title</H1>

    <VisuallyHidden>
      <Text>Add annotations here</Text>
    </VisuallyHidden>
  </YStack>
)

Unspaced

Lucide Icons

Edit this page on GitHub.

Forms

Panels

Content

Visual

Etc

Features

Usage