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.

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

Prop Name	Type	Default	Description
style	Abyss.Style<"View">	-	Object or array of objects defining the style of the View component with design tokens.