Zeego components not working as expected with tamagui Components

[ashkalor]

I tried to use zeego in a project that had tamagui components

I tried to wrap the custom components like below

import { ComponentProps, FC } from "react";

/**
 * Utilities to make Typescript happy wrapping Zeego components with Tamagui's
 * styled() components. These utils do nothing except assign Typescript types.
 *
 * Makes the following props optional and of `unknown` type:
 * - children
 * - key
 *
 * The fixText() version of the util includes tricks to make Tamagui give the
 * component Text style properties
 */
export type PropsToMakeOptional = "children" | "key";
export type TargetPropsType = {
  [key in PropsToMakeOptional]?: unknown;
};

export const fixView = <T extends {}>(Component: FC<T>) => {
  return Component as T extends TargetPropsType
    ? FC<Omit<T, PropsToMakeOptional> & Partial<Pick<T, PropsToMakeOptional>>>
    : FC<T>;
};

export const fixText = <T extends {}>(Component: FC<T>) => {
  return Component as unknown as T extends TargetPropsType
    ? FC<Omit<T, PropsToMakeOptional> & Partial<Pick<T, PropsToMakeOptional>>> &
        typeof Text
    : FC<T> & typeof Text;
};
import { styled } from "tamagui";
import * as Dropdown from "zeego/dropdown-menu";

const StyledItem = styled(fixView(Dropdown.Item), {
  backgroundColor: "red"
});
export const DropdownMenuItem = Dropdown.create(
  (props: ComponentProps<typeof StyledItem>) => {
    return <StyledItem {...props} />;
  },
  "Item"
);

const StyledItemTitle = styled(
  fixText(Dropdown.ItemTitle),
  {
    color: "blue"
  },
  { isText: true }
);
export const DropdownMenuItemTitle = Dropdown.create(
  (props: ComponentProps<typeof StyledItemTitle>) => {
    return <StyledItemTitle {...props} />;
  },
  "ItemTitle"
);

And tried to use it in a component like,

<DropdownMenu.Root>
      <DropdownMenu.Trigger>
        <Text color="white">Dropdown</Text>
      </DropdownMenu.Trigger>
      <DropdownMenu.Content>
        <DropdownMenuItem key="1">
          <DropdownMenuItemTitle color="blue">Title 1</DropdownMenuItemTitle>
        </DropdownMenuItem>
        <DropdownMenuItem backgroundColor="red" key="2">
          <DropdownMenuItemTitle color="blue">Title 2</DropdownMenuItemTitle>
        </DropdownMenuItem>
      </DropdownMenu.Content>
</DropdownMenu.Root>

No styles are being applied. Any help would be appreciated.

[nandorojo]

Zeego v3 will simplify this but it is possible with the current version too, see the custom component docs

[nandorojo]

Have to remove styled() from the outside