import {styled} from '@gluestack-style/react';
import { Box as BSBox} from '@gluestack-ui/themed';
export const Box = styled(BSBox, {
variants: {
variant: {
default: {
px: '$6',
py: '$4',
display: 'flex',
_web: {
height: '$100vh',
width: '$100vw',
},
_dark: {
bg: '$neutral10',
},
_light: {
bg: '$neutral98',
},
},
},
},
});
import React from 'react';
import { View } from 'react-native';
import type { VariantProps } from '@gluestack-ui/nativewind-utils';
import { tva } from '@gluestack-ui/nativewind-utils/tva';
type IBoxProps = React.ComponentPropsWithoutRef<typeof View> &
VariantProps<typeof boxStyle>;
export const boxStyle = tva({
base: '',
variants: {
variant: {
default:
'px-6 py-2 flex web:h-[100vh] web:w-[100vw] bg-neutral-98 dark:bg-neutral-100 ',
},
},
});
const Box = React.forwardRef<React.ElementRef<typeof View>, IBoxProps>(
({ className, variant = 'default', ...props }, ref) => {
return (
<View {...props} ref={ref} className={boxStyle({ class: className })} />
);
}
);
Box.displayName = 'Box';
export { Box };
Type '{ className: string; context: { variant: "filled" | "unfilled"; size: "sm" | "md" | "lg"; }; style?: StyleProp<ViewStyle>; children?: ReactNode; hitSlop?: number | ... 2 more ... | undefined; ... 88 more ...; ref: ForwardedRef<...>; }' is not assignable to type 'IntrinsicAttributes & Omit<ViewProps & WithStyleContextProps & RefAttributes<typeof View> & IAccordionProps, "ref"> & RefAttributes<...>'.
Property 'className' does not exist on type 'IntrinsicAttributes & Omit<ViewProps & WithStyleContextProps & RefAttributes<typeof View> & IAccordionProps, "ref"> & RefAttributes<...>'.