CODEWITHSUNDEEP
javascriptreactjstypescriptreact-nativereact-native-popup-menu
javapyscript
javapyscript

Reputation: 737

React Native style third party component by adding wrappers

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.

Upvotes: 0

Views: 262

Answers (1)

sodik
sodik

Reputation: 4683

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:

  1. Styling of the MenuOptions is a native supported without any problems
    const CheckedOption = (props) => (
      <MenuOption value={props.value} text={'\u2713 ' + props.text} />
    )
  1. 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

  1. 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...

Upvotes: 0

Related Questions