Important Note
This is the documentation for gluestack-ui v2 (beta). For @gluestack-ui/themed (stable) documentation, refer to
gluestack-ui v1.
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>
Installation
Run the following command:
npx gluestack-ui add center
Step 1: Copy and paste the following code into index.tsx in your project.
import { View, ViewProps } from "react-native"
import React from "react"
import { centerStyle } from "./styles"
import type { VariantProps } from "@gluestack-ui/nativewind-utils"
type ICenterProps = ViewProps & VariantProps<typeof centerStyle>
const Center = React.forwardRef<React.ElementRef<typeof View>, ICenterProps>(
({ className, ...props }, ref) => {
className={centerStyle({ class: className })}
Center.displayName = "Center"
Important Note
Note:
Step 2 is optional and only required if you want to add support for React Server Components, You can skip this and jump to Step 3 directly if you don't have this requirement. Step 2(optional): Copy and paste the following code into index.web.tsx in your project.
import React from "react"
import { centerStyle } from "./styles"
import type { VariantProps } from "@gluestack-ui/nativewind-utils"
type ICenterProps = React.ComponentPropsWithoutRef<"div"> &
VariantProps<typeof centerStyle>
const Center = React.forwardRef<HTMLDivElement, ICenterProps>(
({ className, ...props }, ref) => {
<div className={centerStyle({ class: className })} {...props} ref={ref} />
Center.displayName = "Center"
Step 3: Copy and paste the following code into styles.tsx in your project.
import { tva } from "@gluestack-ui/nativewind-utils/tva"
import { isWeb } from "@gluestack-ui/nativewind-utils/IsWeb"
const baseStyle = isWeb ? "flex flex-col relative z-0" : ""
export const centerStyle = tva({
base: `justify-center items-center ${baseStyle}`,
Step 4: 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.
Center
Renders a <div /> on web and a View on native.
Platform | Output |
|---|
Web | <div /> |
Native | <View /> |