How to use the gluestack-ui types

[samislam]

I am using the new components library called (gluestack-ui).

I am using typescript and I want to use the "Box" component props types interface in my component.

I can't find, is the interface exported?

import { Box } from '@gluestack-ui/themed'

export interface PaperProps extends PropsWithChildren  {}

export default function Paper({ children }: PaperProps) { 
  return <Box>{children}</Box>
}

In material-ui for example, you can:

import { Box, type BoxProps } from '@mui/material'

the I can for example:

export interface PaperProps extends PropsWithChildren & BoxProps  {}

How can I do the same with gluestack-ui?

[ts-candide]

I struggled with this too until I discovered ComponentProps:

import { Box } from "@gluestack-ui/themed"
import React, { ComponentProps } from "react"

type BoxProps = ComponentProps<typeof Box>

[mattaningram]

I also use this and it works fine mostly except for some reason if I am extending types that have a shift prop then extending with Box props doesn't work. It complains that the shift property isn't compatible, but as far as I can tell the Box element doesn't have a shift property! Have no idea how to go about debugging/fixing this.