import { View } from '@uhg-abyss/mobile';

Usage

The View component is one of the fundamental building blocks of a user interface. It functions as a container that supports layout, styling, and interaction handling. The component serves as a versatile wrapper for organizing and displaying other components within a user interface.

While it extends the core View component present in React Native, the View component in Abyss Mobile allows using tokens directly in the style prop. This feature enables developers to use the design tokens defined in the theme to style a component.

This example creates a View that wraps two boxes with color and a text component in a row with padding. Notice the use of design tokens in the style prop.

Styling

Views are designed to be used with StyleSheet for clarity and performance, although inline styles are also supported.

Best Practices

• Use for Layout: Utilize the View component to create layouts and organize components within a user interface. For text context, consider using the Text component.
• Avoid Excessive Nesting: Limit the number of nested View components to maintain a clean and efficient layout.
• Use Tokens: Leverage design tokens in the style prop to ensure consistency and maintainability in styling.
• Accessibility: Ensure that the content within the View component is accessible to all users by providing appropriate labels and descriptions where necessary.

Performance Considerations

To maximize performance, be mindful of:

• Shallow component trees: Minimize nesting View components to reduce the complexity of the component tree.
• Avoid unnecessary re-renders: Use React.memo or similar optimization when rendering complex or frequently changing layouts.

View Classes

Class Name	Description
abyss-view-root	View root element.

View Props

Extends React Native - Viewopens in a new window props.

Name	Type	Default	Description
disableDefaultProviderProps	boolean | undefined	false	If set to true, the component will not use the DefaultPropsProvider values. If you aren’t using the DefaultPropsProvider, this prop can be ignored.
hitSlop	number | Insets | null | undefined		This defines how far a touch event can start away from the view. Typical interface guidelines recommend touch targets that are at least 30 - 40 points/density-independent pixels. If a Touchable view has a height of 20 the touchable height can be extended to 40 with hitSlop={{ top: 10, bottom: 10, left: 0, right: 0 }} NOTE The touch area never extends past the parent view bounds and the Z-index of sibling views always takes precedence if a touch hits two overlapping views.
onBlur	NativeSyntheticEventHandler<TargetedEvent>		Called when the view loses focus
onFocus	NativeSyntheticEventHandler<TargetedEvent>		Called when the view gains focus
rootTestID	string | undefined		Adds the passed in test ID to the root element of the component.
style	Style<"View">		Style properties with Abyss token mapping
styles	Styles<ViewClasses> | undefined		Add custom styles to component by class name with Abyss token mapping
testID	string | undefined		Using this prop will append -abyss and the name of the element class at the end of the testID passed in. If you want to only use string passed in on the root element, use the rootTestID prop instead. Used to locate this view in end-to-end tests.