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)