CODEWITHSUNDEEP
react-nativereact-native-popup-menu
roadev
roadev

Reputation: 1030

How to set an icon in MenuTrigger

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

enter image description here

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?

Upvotes: 5

Views: 6053

Answers (2)

L.U.
L.U.

Reputation: 521

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.

Upvotes: 2

sodik
sodik

Reputation: 4683

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

Upvotes: 14

Related Questions