Center

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) => {
    return (
      <View
        className={centerStyle({ class: className })}
        {...props}
        ref={ref}
      />
    )
  }
)

Center.displayName = "Center"

export { Center }

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) => {
    return (
      <div className={centerStyle({ class: className })} {...props} ref={ref} />
    )
  }
)

Center.displayName = "Center"

export { Center }

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}`,
})