How to set an icon in MenuTrigger

Question

I have a menu icon in my navbar and I need to use it as a menu.

I'm trying to achieve this with the react-native-popup-menu lib.

The component <MenuTrigger /> only accepts text (strings) as prop.

How could I use an icon as a menu trigger?

Answer 1

Actually MenuTrigger.text is only optional property according to the doc

Optional | Text to be rendered. When this prop is provided, trigger's children won't be rendered

It is possible to place any content inside of MenuTrigger (if you don't use text property) like

<MenuTrigger>
  <YourIcon>
</MenuTrigger>

See also official example

Answer 2

Thank you for asking, and posting the answer to this. I had the same question and solved it thanks to this post. I made a mock burger menu using this module. Having implemented this, my code now looks like this.

  <MenuTrigger>
  <Image 
      source={require('./assets/Burger.png')}
      >
      </Image>
  </MenuTrigger>

Note. I initially tried to wrap the Image> within a TouchableOpacity>, which triggered malfunctioning. Turns out there is no need to use . You only have to insert Image> directly.