# Abyss Mobile - LLM Documentation

This file contains links to LLM-optimized documentation for all Abyss mobile components.

## Components

### Brand

- [Brandmark](https://abyss.uhc.com/llms/mobile/brand/optum/Brandmark.md): Logos/Brandmarks for Optum brands.
- [Brandmark](https://abyss.uhc.com/llms/mobile/brand/uhc/Brandmark.md): Logos/Brandmarks for UHC brands.
- [Brandmark](https://abyss.uhc.com/llms/mobile/brand/uhg/Brandmark.md): Logos/Brandmarks for UHG brands.
- [IconBrand](https://abyss.uhc.com/llms/mobile/brand/optum/IconBrand.md): Used to implement Brand icons and adapt their properties.
- [IconBrand](https://abyss.uhc.com/llms/mobile/brand/uhc/IconBrand.md): Used to implement Brand icons and adapt their properties.
- [IconCustom](https://abyss.uhc.com/llms/mobile/brand/optum/IconCustom.md): Used to implement custom icons and adapt their properties.
- [IconCustom](https://abyss.uhc.com/llms/mobile/brand/uhc/IconCustom.md): Used to implement custom icons and adapt their properties.
- [IllustratedIconBrand](https://abyss.uhc.com/llms/mobile/brand/uhc/IllustratedIconBrand.md): Used to implement UHC brand illustrated icons and adapt their properties.
- [IllustrationBrand](https://abyss.uhc.com/llms/mobile/brand/uhc/IllustrationBrand.md): Used to implement Brand illustrations and adapt their properties.

### Content

- [Accordion](https://abyss.uhc.com/llms/mobile/ui/Accordion.md): A vertically stacked list of headers that reveal or hide associated sections of content.
- [Card](https://abyss.uhc.com/llms/mobile/ui/Card.md): A single or multi-section container used to display content related to a single subject.
- [Carousel](https://abyss.uhc.com/llms/mobile/ui/Carousel.md): A circular conveyor of information, cycling between cards.
- [Footer](https://abyss.uhc.com/llms/mobile/ui/Footer.md): A footer is a component that appears at the bottom of the screen.
- [HomeWidget](https://abyss.uhc.com/llms/mobile/ui/HomeWidget.md): A component of an interface, that enables a user to perform a function or access a service.
- [Tabs](https://abyss.uhc.com/llms/mobile/ui/Tabs.md): The Tabs component is used to navigate to other pages, or sections of a page.

### Controls

- [Calendar](https://abyss.uhc.com/llms/mobile/ui/Calendar.md): A control element that displays a full calendar month at one time.
- [NumberStepper](https://abyss.uhc.com/llms/mobile/ui/NumberStepper.md): A two-segment UI control used to incrementally increase or decrease a numeric value.

### Core

- [FlatList](https://abyss.uhc.com/llms/mobile/core/FlatList.md): A performant interface for rendering basic flat lists.
- [Image](https://abyss.uhc.com/llms/mobile/core/Image.md): Displays different types of images, including network images, static resources, temporary local images, and images from local disk, such as the camera roll.
- [ImageBackground](https://abyss.uhc.com/llms/mobile/core/ImageBackground.md): Display an image as the background of another component.
- [KeyboardAvoidingView](https://abyss.uhc.com/llms/mobile/core/KeyboardAvoidingView.md): Automatically adjust its height, position, or bottom padding based on the keyboard height to remain visible while the virtual keyboard is displayed.
- [KeyboardAwareScrollView](https://abyss.uhc.com/llms/mobile/core/KeyboardAwareScrollView.md): A ScrollView component that automatically handles keyboard appearance and scrolls to focused TextInput.
- [Pressable](https://abyss.uhc.com/llms/mobile/core/Pressable.md): A pressable component wrapper that can be used to provide touch feedback.
- [RefreshControl](https://abyss.uhc.com/llms/mobile/core/RefreshControl.md): A standard control that can initiate the refreshing of a scroll view's contents
- [SafeAreaView](https://abyss.uhc.com/llms/mobile/core/SafeAreaView.md): Render content within the safe area boundaries of a device.
- [ScrollView](https://abyss.uhc.com/llms/mobile/core/ScrollView.md): A generic scrolling container that can host multiple components and views.
- [SectionList](https://abyss.uhc.com/llms/mobile/core/SectionList.md): A performant interface for rendering sectioned lists.
- [StatusBar](https://abyss.uhc.com/llms/mobile/core/StatusBar.md): Component to control the app's status bar.
- [TouchableHighlight](https://abyss.uhc.com/llms/mobile/core/TouchableHighlight.md): A wrapper for making views respond properly to touches.
- [TouchableOpacity](https://abyss.uhc.com/llms/mobile/core/TouchableOpacity.md): A wrapper for making views respond properly to touches.
- [TouchableWithoutFeedback](https://abyss.uhc.com/llms/mobile/core/TouchableWithoutFeedback.md): Captures touch events without providing any visual feedback.
- [View](https://abyss.uhc.com/llms/mobile/core/View.md): The most fundamental core component for building a UI, a container that supports layout.
- [VirtualizedList](https://abyss.uhc.com/llms/mobile/core/VirtualizedList.md): A high-performance list component that efficiently renders only the items currently visible on the screen, regardless of the size of the data set.

### CTA

- [Coachmark](https://abyss.uhc.com/llms/mobile/ui/Coachmark.md): A temporal message that provides contextual information or help.
- [CoachmarkTour](https://abyss.uhc.com/llms/mobile/ui/CoachmarkTour.md): A guided tour system that displays contextual coachmarks to walk users through multiple steps of an interface.
- [FilterButton](https://abyss.uhc.com/llms/mobile/ui/FilterButton.md): A button that serves as an entry point to filtering options.
- [NeedHelp](https://abyss.uhc.com/llms/mobile/ui/NeedHelp.md): Provides in-app help content, always at the bottom of the page

### Data

- [ActivityTracker](https://abyss.uhc.com/llms/mobile/ui/ActivityTracker.md): Displays a visual representation of the user's activity.
- [Rating](https://abyss.uhc.com/llms/mobile/ui/Rating.md): Graphical representation of the degree of rating scale.
- [Timeline](https://abyss.uhc.com/llms/mobile/ui/Timeline.md): A timeline step displays a single event or action of the timeline tracker.

### Data Display

- [Avatar](https://abyss.uhc.com/llms/mobile/ui/Avatar.md): The Avatar component is used to represent a user, and displays the profile picture or the user initials as a fallback.
- [Badge](https://abyss.uhc.com/llms/mobile/ui/Badge.md): Used to highlight an item's status for quick recognition.
- [Cell](https://abyss.uhc.com/llms/mobile/ui/Cell.md): A navigation element to display a page of categorized content.
- [CellGroup](https://abyss.uhc.com/llms/mobile/ui/CellGroup.md): Cells present data in one or more vertically stacked rows.
- [Chip](https://abyss.uhc.com/llms/mobile/ui/Chip.md): Chips are clickable, and used for filtering and selections.
- [Indicator](https://abyss.uhc.com/llms/mobile/ui/Indicator.md): Adds an indicator to wrapped elements.

### Data Viz

- [Accumulator](https://abyss.uhc.com/llms/mobile/ui/Accumulator.md): A graphical representation of a data set based on one variable.
- [DonutChart](https://abyss.uhc.com/llms/mobile/ui/DonutChart.md): A graphical representation technique that displays data in a circular-shaped graph.
- [ProgressBar](https://abyss.uhc.com/llms/mobile/ui/ProgressBar.md): Used to show users the status of loading an app, ongoing processes, saving changes/updates, and more.
- [RatingAccumulator](https://abyss.uhc.com/llms/mobile/ui/RatingAccumulator.md): A visual representation of rating distribution using horizontal bars.

### Feedback

- [Alert](https://abyss.uhc.com/llms/mobile/ui/Alert.md): Communicate a state that affects the entire system, not just a feature or page. It persists over a session and appears without the user initiating the action.
- [GlobalAppProcess](https://abyss.uhc.com/llms/mobile/ui/GlobalAppProcess.md): A type of notification message that communicates system status or background processes.
- [Notification](https://abyss.uhc.com/llms/mobile/ui/Notification.md): A container used to display information to the user.
- [Toast](https://abyss.uhc.com/llms/mobile/ui/Toast.md): Feedback on the result of an operation that disappears without user action.

### Forms

- [Checkbox](https://abyss.uhc.com/llms/mobile/ui/Checkbox.md): Used to mark an option as true/checked or false/not checked
- [CheckboxGroup](https://abyss.uhc.com/llms/mobile/ui/CheckboxGroup.md): Allows a user to select one or multiple items from a list.
- [DateInput](https://abyss.uhc.com/llms/mobile/ui/DateInput.md): Capture date input from user.
- [InputField](https://abyss.uhc.com/llms/mobile/ui/InputField.md): Allows users to enter text into a UI.
- [RadioGroup](https://abyss.uhc.com/llms/mobile/ui/RadioGroup.md): A radio input allows people to select only one option from a number of choices. Radio is generally displayed in a radio group.
- [SearchInput](https://abyss.uhc.com/llms/mobile/ui/SearchInput.md): A type of input field that allows searching through content.
- [SegmentedControls](https://abyss.uhc.com/llms/mobile/ui/SegmentedControls.md): A segmented control is a linear set of two or more segments, each of which functions as a button. There cannot be more than one segment selected, so under the hood this behaves like a radio group.
- [SelectInput](https://abyss.uhc.com/llms/mobile/ui/SelectInput.md): Allows users to select one value from a provided list of options.
- [SelectInputMulti](https://abyss.uhc.com/llms/mobile/ui/SelectInputMulti.md): Allows users to select multiple values from a provided list of options.
- [TextArea](https://abyss.uhc.com/llms/mobile/ui/TextArea.md): Large input allows users to enter a large amount of text and data.
- [ToggleSwitch](https://abyss.uhc.com/llms/mobile/ui/ToggleSwitch.md): Used to switch between 2 modes.

### General

- [Component Testing](https://abyss.uhc.com/llms/mobile/developers/testing/3-component-testing.md): Guide on how to facilitate testing of Abyss Mobile components.
- [End User Specifications](https://abyss.uhc.com/llms/mobile/developers/testing/2-end-user-spec.md): Abyss Spec
- [Quality Engineering](https://abyss.uhc.com/llms/mobile/developers/testing/1-quality-engineering.md): QE Testing Overview

### I18n

- [Translate](https://abyss.uhc.com/llms/mobile/ui/Translate.md): Used to get the translated string from the i18n object.

### Layout

- [Banner](https://abyss.uhc.com/llms/mobile/ui/Banner.md): Used to provide high-level content in a heading, paragraph, and image format within a pressable for navigation.
- [Box](https://abyss.uhc.com/llms/mobile/ui/Box.md): Used as a blanket filler to surround just about any component(s) with color or create a box of predefined size.
- [Container](https://abyss.uhc.com/llms/mobile/ui/Container.md): A responsive container component that adjusts padding based on screen size and safe area insets.
- [Divider](https://abyss.uhc.com/llms/mobile/ui/Divider.md): Used to add visual or semantic separation between content.
- [FontScale](https://abyss.uhc.com/llms/mobile/ui/FontScale.md): Used to layout UI elements conditionally by font size.
- [Grid](https://abyss.uhc.com/llms/mobile/ui/Grid.md): Provides a brief message about the app processes.
- [Layout](https://abyss.uhc.com/llms/mobile/ui/Layout.md): A single or multi-section container used to display content related to a single subject.
- [Popover](https://abyss.uhc.com/llms/mobile/ui/Popover.md): A popover displays content on top of the page in a separate container and requires user action.

### Media

- [Icon](https://abyss.uhc.com/llms/mobile/ui/Icon.md): Used to implement icons and adapt their properties.
- [IconSymbol](https://abyss.uhc.com/llms/mobile/ui/IconSymbol.md): Used to implement material symbol icons and adapt their properties.
- [IllustrationBrand](https://abyss.uhc.com/llms/mobile/brand/optum/IllustrationBrand.md): Used to implement Brand illustrations and adapt their properties.
- [VideoPlayer](https://abyss.uhc.com/llms/mobile/ui/VideoPlayer.md): A component that provides playback of video.

### Navigation

- [AppBar](https://abyss.uhc.com/llms/mobile/ui/AppBar.md): Displays information and actions relating to the current screen.
- [Button](https://abyss.uhc.com/llms/mobile/ui/Button.md): Used to trigger an action or event.
- [createBottomTabNavigator](https://abyss.uhc.com/llms/mobile/tools/createBottomTabNavigator.md): A simple tab bar on the bottom of the screen that lets you switch between different routes.
- [createStackNavigator](https://abyss.uhc.com/llms/mobile/tools/createStackNavigator.md): Provides a way for your apps to transition between screens where each new screen is placed on top of a stack.
- [Link](https://abyss.uhc.com/llms/mobile/ui/Link.md): Used to navigate to other pages, or sections of a page.
- [NavigationContainer](https://abyss.uhc.com/llms/mobile/ui/NavigationContainer.md): Responsible for managing app state and linking your top-level navigator to the app environment.
- [SearchInputButton](https://abyss.uhc.com/llms/mobile/ui/SearchInputButton.md): Acts as a placeholder for search bar.

### Overlay

- [BottomSheet](https://abyss.uhc.com/llms/mobile/ui/BottomSheet.md): A surface containing supplementary content that are anchored to the bottom of the screen.
- [LoadingSpinner](https://abyss.uhc.com/llms/mobile/ui/LoadingSpinner.md): Infinite loading spinner.
- [Modal](https://abyss.uhc.com/llms/mobile/ui/Modal.md): Appears from the bottom of the screen and fills up the entire screen, requiring user action to clear it.
- [Skeleton](https://abyss.uhc.com/llms/mobile/ui/Skeleton.md): Placeholder for loading content.

### Providers

- [DefaultPropsProvider](https://abyss.uhc.com/llms/mobile/ui/DefaultPropsProvider.md): An Abyss component that provides default props to all its child components.
- [FormProvider](https://abyss.uhc.com/llms/mobile/ui/FormProvider.md): Adds form functionality to Abyss inputs.
- [I18nProvider](https://abyss.uhc.com/llms/mobile/ui/I18nProvider.md): Used to provide i18n data to the application.
- [ScrollProvider](https://abyss.uhc.com/llms/mobile/ui/ScrollProvider.md): An Abyss provider that shares animated scroll state through context.
- [TestProvider](https://abyss.uhc.com/llms/mobile/ui/TestProvider.md): Used to determine strategy for testing

### State Management

- [useForm](https://abyss.uhc.com/llms/mobile/hooks/useForm.md): useForm is a hook for defining, validating and submitting forms.

### Styling

- [elevation](https://abyss.uhc.com/llms/mobile/tools/elevation.md): Tool to create depth on screen for users
- [Style Customization](https://abyss.uhc.com/llms/mobile/theme-customization/styling/style-customization.md): Guide to override styles for Abyss components.
- [styled](https://abyss.uhc.com/llms/mobile/theme-customization/styling/styled.md): Tool to style elements.
- [StyleSheet](https://abyss.uhc.com/llms/mobile/ui/StyleSheet.md): A utility to define and organize styles in an application
- [useStyleSheet](https://abyss.uhc.com/llms/mobile/theme-customization/styling/useStyleSheet.md): Used to parse styles from a StyleSheet

### Theme & Tokens

- [createTheme](https://abyss.uhc.com/llms/mobile/theme-customization/tokens/06-create-theme.md): Tool to create and modify themes.
- [extendTheme](https://abyss.uhc.com/llms/mobile/theme-customization/tokens/08-extend-theme.md): Tool to extend and modify themes.
- [flattenTokens](https://abyss.uhc.com/llms/mobile/theme-customization/tokens/09-flatten-tokens.md): Tool to combine tokens from multiple sources into a single object.
- [Theme Guides](https://abyss.uhc.com/llms/mobile/theme-customization/tokens/04-theme-guides.md): A comprehensive guide to understanding and using themes in the Abyss Design System
- [ThemeProvider](https://abyss.uhc.com/llms/mobile/theme-customization/tokens/07-ThemeProvider.md): An Abyss component that passes the theme object down the component tree.
- [tokenize](https://abyss.uhc.com/llms/mobile/theme-customization/tokens/11-tokenize.md): Tool to tokenize props in a component.
- [Tokens Overview](https://abyss.uhc.com/llms/mobile/theme-customization/tokens/01-tokens-intro.md): An introduction to design tokens in the Abyss Design System.
- [Tokens Reference](https://abyss.uhc.com/llms/mobile/theme-customization/tokens/02-token-reference.md): A full reference of all core and semantic design tokens available in the Abyss Design System.
- [Typography](https://abyss.uhc.com/llms/mobile/theme-customization/tokens/05-typography.md): Typography
- [useToken](https://abyss.uhc.com/llms/mobile/theme-customization/tokens/10-use-token.md): Used to get values mapped to tokens.
- [withTheme](https://abyss.uhc.com/llms/mobile/theme-customization/tokens/12-withTheme.md): Tool to wrap a component with a higher order component.

### Typography

- [ExpandableTextBlock](https://abyss.uhc.com/llms/mobile/ui/ExpandableTextBlock.md): Displays a text block that can be expanded or collapsed.
- [Heading](https://abyss.uhc.com/llms/mobile/ui/Heading.md): Creates appropriately sized heading elements.
- [Text](https://abyss.uhc.com/llms/mobile/ui/Text.md): Used to create segments of text such as phrases, sentences, and paragraphs.

### Utilities

- [useAnimation](https://abyss.uhc.com/llms/mobile/hooks/useAnimation.md): Use to create standardized animation types for Abyss Mobile components
- [useDeviceOrientation](https://abyss.uhc.com/llms/mobile/hooks/useDeviceOrientation.md): Used to retrieve the orientation of the mobile device
- [useReduceMotion](https://abyss.uhc.com/llms/mobile/hooks/useReduceMotion.md): Used within animated components to respect a user's accessibility preferences.
- [useSetFocus](https://abyss.uhc.com/llms/mobile/hooks/useSetFocus.md): Used to set accessibility focus on a specified element.
- [useTranslate](https://abyss.uhc.com/llms/mobile/hooks/useTranslate.md): Used to get the translated string from the i18n object.


## Full Documentation

For complete mobile documentation in a single file:
- [Mobile Full Documentation](https://abyss.uhc.com/llms/mobile/llms-full.txt)

## About

Abyss Version: 2.3.0
Last Updated: 2026-04-14