React Native style third party component by adding wrappers

Question

My issue:

I am trying to add my own styles to the components 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 was planning to create wrappers for each of these elements, styling the component within and returning 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 the wrapper (an extra element) on each layer resulting in the following hierarchy:

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

The package doesnt like this as it depends on the hierarchy to display the menu properly. Throws the error "MenuOptions should be a child of Menu"

Is there a way at all to create a custom styled Menu and expose it as a component in a component library? If it were react, I would have overridden the css classes, but there is no cascading effect in react-native.

Any clues would be very helpful. Thank you.

score 0 · Answer 1 · answered May 18 '23 at 20:50

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

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

From that I see following things you can do/use:

Styling of the MenuOptions is a native supported without any problems

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

Custom styling of option container seems also okey

<Menu renderer={RoundedContextMenu}>

you just need little boilerplate (see the example) - and I guess it is not a problem to wrap this to custom component

Anything "left" to style is the Trigger that accept anything as children... not sure now if you can easily wrap it into your own component...

Thank you for your explanation. Since I couldnt change the hierarchy or add wrappers, I ended up exporting the entire component as a whole and exposed a custom set of props, and passed a section of those props to each layer of the menu to style them, similar to how customStyles work in this package. — javapyscript, Jun 26 '23 at 13:02

React Native style third party component by adding wrappers

1 Answers1