Center

When you need to center-align content, the Center component comes in handy. It is a layout component that can be used with other components to create complex layouts and positioning.

This is an illustration of a Themed Center component with default configuration.

<Center bg="$primary500" h={200} w={300}>
  <Text color="white" fontWeight="$bold">
    This is the center.
  </Text>
</Center>

To use this component in your project, include the following import statement in your file.

import { Center } from '@darden/design-system';

The structure provided below can help you identify and understand a Center component's various parts.

export default () => <Center />

This section provides a comprehensive reference list for the component props, detailing descriptions, properties, types, and default behavior for easy project integration.

It inherits all the properties of React Native's View component.