my question:

I'm trying to add my own styles to the component provided by react-native-popup-menu and add it to my component library. They provide Menu, MenuOptions, and MenuOption components with the following expected hierarchy:

<Menu>
  <MenuOptions>
    <MenuOption text="A">
    </MenuOption>
    <MenuOption text="B">
    </MenuOption>
  </MenuOptions>
</Menu>

I plan to create a wrapper for each element, style the component within it, and return the wrapper when someone imports it from the component library.

For example, a wrapper for the menu component:

import { MenuProps } from 'react-native-popup-menu';

type CustomMenuProps = {
  children: React.ReactElement[];
}

const CustomMenu = (props: MenuProps && CustomMenuProps) => {
  return <Menu style={{...someCustomStyle}}>{children}</Menu>
}

This adds a wrapper (an extra element) on each layer, resulting in the following hierarchy:

<CustomMenu>
  <Menu>
    <CustomMenuOptions>
      <MenuOptions>...

The package doesn't like this because it relies on hierarchy to display the menu correctly. throws error "MenuOptions should be a child of Menu"

Is there a way to create a custom styled menu and expose it as a component in the component library? If it were react, I would rewrite the css class, but there is no cascading effect in react-native.

Any clues would be very helpful. Thanks.