A function to separate the native props from rsd props

[pooriamo]

Hello dear RSD team

We are implementing an interop layer on our app but we still want to use ScrollView which has no built-in support by RSD.

So we came up with this solution for the native part following the advice here:

CustomScrollView.native.ts

type CustomScrollViewProps = Omit<
  ScrollViewProps,
  "contentContainerStyle" | "style"
> & {
  contentContainerStyle?: Parameters<typeof h.div>[0]["style"];
  style?: Parameters<typeof h.div>[0]["style"];
};

export const CustomScrollView = ({
  contentContainerStyle,
  style,
  ...props
}: CustomScrollViewProps) => {
  return (
    <compat.native style={contentContainerStyle}>
      {(topNativeProps: ScrollViewProps) => (
        <compat.native style={style} {...props}>
          {(nativeProps: ScrollViewProps) => {
            return (
              <RNScrollView
                contentContainerStyle={topNativeProps.style}
                {...props}
                {...nativeProps}
              >
                {props.children}
              </RNScrollView>
            );
          }}
        </compat.native>
      )}
    </compat.native>
  );
};

But there are a couple of tiny issues here:

1. In our props we have props that are not compatible with rsd's <html.div> so when we spread it (<compat.native style={style} {...props}>) we get an error that there are invalid props. We have two options now:

• To remove {...props}: The issue is that we still want the props (especially a11y) to be processed by useNativeProps
• To separate RSD approved props here but unfortunately this function isn't exported from the module and copy-pasting it doesn't seem very reasonable.

2. To make my custom CustomScrollViewProps, I have to define contentContainerStyle?: Parameters<typeof h.div>[0]["style"]; because as far as I can tell, the props aren't exported from the module. Is there a way to use it in a cleaner way?

I would appreciate your advice here

[axyz]

the nesting of multiple compat.native seems also related to this same issue I described here: #270 (reply in thread)

[Edmon02]

This idea of a function to separate native props from React Strict DOM (RSD) props is quite compelling. It could lead to better type safety and prevent unexpected behavior by ensuring that components receive only the props they are designed to handle. From a TypeScript perspective, this could potentially be implemented using utility types like Omit or Pick to create distinct prop interfaces. For instance:

interface NativeDivProps extends React.HTMLAttributes<HTMLDivElement> {
  // Define native div props here
}

interface RsdDivProps {
  // Define RSD specific props here
  rsdVariant?: 'primary' | 'secondary';
}

type SeparatedProps = {
  native: NativeDivProps;
  rsd: RsdDivProps;
};

function separateProps<T extends NativeDivProps & RsdDivProps>(props: T): SeparatedProps {
  const { rsdVariant,...native } = props;
  const rsd: RsdDivProps = { rsdVariant };
  return { native, rsd };
}

// Usage example:
const combinedProps = { className: 'my-div', onClick: () => {}, rsdVariant: 'primary' };
const { native, rsd } = separateProps(combinedProps);
// native will be { className: 'my-div', onClick: () => {} }
// rsd will be { rsdVariant: 'primary' }

[necolas]

We need to use components to set the correct contexts in various scenarios. You shouldn't be reaching for this API very often

[pooriamo]

Could you provide an example, please?
Do you mean that we have to provide the props we need one by one?
And we can't pass a style created by css.create to ScrollView and it has to be converted first. How can it be achieved without this API?

In order for the component to be interoperable between web and native, we need to convert them, so isn't using the underlying API provided by RSD the best option?