how to use the gluestack-ui types

Question

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?

Answer 1

At present, it's still in Beta, so there might be changes in the near future.

Even though I am uncertain if that's the intended usage, you could employ it in the following manner for now. Since Box is essentially View with additional styling and Button is Pressable with extra styling, you could utilize the native react-native Prop Types for these components.

There are a few more components like this, but unfortunately, I had to dig into the codebase since I couldn't find any documentation on this yet.

import { ViewProps, PressableProps } from 'react-native'
import { Box, Button } from '@gluestack-ui/themed'

export interface MyFancyBoxProps extends PropsWithChildren<ViewProps>  {}

export default function MyFancyBox({ children }: MyFancyBoxProps) {
  return <Box>{children}</Box>
}

interface MyButtonProps extends PropsWithChildren<PressableProps> {}

function MyButton(props: MyButtonProps) {
  return <Button {...props} />
}

If it happens that there's no interface exported at all, you could always give ComponentProps a shot.

import { ComponentProps } from 'react'
import { Button, Box } from '@gluestack-ui/themed'


type ButtonProps = ComponentProps<typeof Button>;
type BoxProps = ComponentProps<typeof Box>;

Matt Pocock has written a great article about it. It's a great tool to have in your toolbox in general!

Answer 2

You can use ComponentProps from react to do this.

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

export interface PaperProps extends ComponentProps<typeof Box>  {}

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

font : https://stackoverflow.com/a/55220191/11705481