Since gluestack ui V2 is in beta and I see a lot of fixes / changes, I want to keep these comonents in sync. However, a lot of the updates have changed typings and look to require a new ref. For instance on Box it went from...

 import React from 'react';

import { boxStyle } from './styles';

const Box = React.forwardRef(({ className, ...props }: any, ref) => {
  return <div ref={ref} className={boxStyle({ class: className })} {...props} />;
});

Box.displayName = 'Box';

export { Box };

...to....

 import React from 'react';
import { boxStyle } from './styles';
import type { ViewProps } from 'react-native';
import type { VariantProps } from '@gluestack-ui/nativewind-utils';

type Similar<T, U> = {
  [K in keyof T & keyof U]: T[K] extends U[K]
    ? U[K] extends T[K]
      ? T[K]
      : never
    : never;
};

type IBoxProps = Similar<ViewProps, React.ComponentPropsWithoutRef<'div'>> &
  VariantProps<typeof boxStyle>;

const Box = React.forwardRef<HTMLDivElement, IBoxProps>(
  ({ className, ...props }, ref) => {
    return (
      <div ref={ref} className={boxStyle({ class: className })} {...props} />
    );
  }
);

Box.displayName = 'Box';
export { Box };

And this now breaks my use of this component. Here is the TS error...

Type '{ children: Element[]; className: string; }' is missing the following properties from type 'Similar<ViewProps, Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">>': style, id, tabIndex, onTouchStart, and 29 more.

Type
is missing the following properties from type :

What can be done to make sure upgrading V2 works as beta components evolve ?