[ BUG ] dropdown-menu TypeError

[brunobely]

Using @rn-primitives/dropdown-menu^1.1.0, the following TS error pops up in dropdown-menu.tsx:

Type '{ children: ReactNode | ((state: PressableStateCallbackType) => ReactNode); }' is not assignable to type '{ children?: ReactNode; }'.
  Types of property 'children' are incompatible.
    Type 'ReactNode | ((state: PressableStateCallbackType) => ReactNode)' is not assignable to type 'ReactNode'.
      Type '(state: PressableStateCallbackType) => ReactNode' is not assignable to type 'ReactNode'.ts(2322)

[mrzachnugent]

Hey @brunobely, I'm working on rn-primitives v2 and I'm going to include a helper function for pressable children which can be React.ReactNode | ((state: PressableStateCallbackType) => ReactNode);.

You can use the following helper function or for the children prop to be of type React.ReactNode

// helper function
function renderPressableChildren(
  children: PressableProps['children'],
  render: (children: React.ReactNode) => React.ReactNode
) {
  return typeof children === 'function'
    ? (state: PressableStateCallbackType) => render(children(state))
    : render(children);
}

// usage example
<AccordionPrimitive.Trigger
  ref={ref}
  {...props}
>
  {renderPressableChildren(childrenProp, (children) => {
    return (
      <>
        {children}
        <ChevronDown size={18} />
      </>
    );
  })}
</AccordionPrimitive.Trigger>

[heondo]

@mrzachnugent i'm trying this without much luck and what childrenProp should be isn't very clear. Honestly had better luck just ignoring the function call because hovered/pressed state isn't readily available

{typeof children !== "function" && children}