React native-style third-party components by adding wrappers

Question

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.

Answer 1

I'm not sure exactly what the problem is - so I'll just add some tips/clues here that might help you.

View the documentationhttps://github.com/instea/react-native-popup-menu/blob/master/doc/extensions.md and the corresponding example

From this I see you can do/use the following:

1. MenuOptions styles are natively supported without any problems

const CheckedOption = (props) => (
      <MenuOption value={props.value} text={'\u2713 ' + props.text} />
    )

2. Custom styling of option containers also seems to be possible

<菜单渲染器={RoundedContextMenu}>

You just need a little boilerplate (see example) - I guess wrapping this into a custom component isn't a problem

3. Any "left" style is a trigger that accepts any child...not sure if this can be easily wrapped into your own component now...