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 - View props.

Name	Type	Default	Required	Description
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	Abyss.NativeSyntheticEventHandler<TargetedEvent>	-	-	Called when the view loses focus
onFocus	Abyss.NativeSyntheticEventHandler<TargetedEvent>	-	-	Called when the view gains focus
style	Abyss.Style<"View">	-	-	View style properties with Abyss token mapping