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.
API Reference
Spec Doc
This is an illustration of Center component.
<Center className="bg-primary-500 h-[200px] w-[300px]">
<Text className="text-typography-0 font-bold">This is the center.</Text>


Step 1: Copy and paste the following code into your project.

import { View } from "react-native"
import React from "react"
import { tva } from "@gluestack-ui/nativewind-utils"
const centerStyle = tva({
base: "justify-center items-center",
const Center = ({ className, ...props }: any) => {
return <View className={centerStyle({ class: className })} />
Center.displayName = "Center"
export { Center }

Step 2: Update the import paths to match your project setup.

API Reference

To use this component in your project, include the following import statement in your file.
import { Center } from "@/components/ui/Center"
export default () => <Center />

Component Props

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.

Spec Doc

Explore the comprehensive details of the Center in this document, including its implementation details, checklist, and potential future additions. Dive into the thought process behind the component and gain insights into its development journey.
Edit this page on GitHub