Visually Hidden — Tamagui — React Native Universal UI

wwwwwwwwwwwwwwwwwww

Introduction

Installation

Releases

Core

Configuration

Tokens

Stack & Text

styled

Variants

Props

Themes

Animations

Theme

useMedia

useTheme

FontLanguage

Extras

Compiler

About

Install

Benchmarks

Theme

Colors

Tokens

Tamagui

Stacks

Headings

Text

Forms

Button

Checkbox

Form

Input & TextArea

Label

Progress

RadioGroup

Select

Slider

Switch

ToggleGroup

Panels

AlertDialog

Dialog

Popover

Sheet

Tooltip

Toast

Organize

Accordion

Group

Tabs

Content

Avatar

Card

Image

ListItem

Visual

LinearGradient

Separator

Square & Circle

Etc

Anchor

HTML Elements

ScrollView

Spinner

Unspaced

VisuallyHidden

Extras

Lucide Icons

Guides

Design Systems

Creating Custom Themes

How to Build a Button

Developing

Next.js

Expo

Vite

create-tamagui

Community

Blog

GitHub

Twitter

Discord

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>
)

Edit this page on GitHub.