3

I would like to use react-native-popup-menu and react-native-floating-action-button components together. I've tried : 

<MenuTrigger>
    <FloatingActionButton
        size={56}
        textDisable
        iconName="directions"
        iconType="material-icons"
        shadowColor="#000"
        iconColor="white"
        backgroundColor="#405914"
    />
</MenuTrigger>

This code does not trigger the MenuTrigger because FloatingActionButton's onPress is triggered.

I also tried this kinds of stuff :

<MenuTrigger customStyles={{ TriggerTouchableComponent: FloatingActionButton }} />

This one's trigger is working with MenuTrigger but I cannot customize the FAB button's styling.

Can you provide me a solution ? :)

Thank you

FreakyCoder
  • 840
  • 11
  • 24

2 Answers2

2

According to doc you could use triggerTouchable. 

      <MenuTrigger
        customStyles={{
          TriggerTouchableComponent: Button,
          triggerTouchable: { title: 'Select (Custom Touchables)' },
        }}
      />
sodik
  • 4,675
  • 2
  • 29
  • 47
  • your post does not use `triggerTouchable`. I encourage you also to try official examples mentioned in doc. – sodik Dec 13 '18 at 19:21
  • I also tried it with triggerTouchable but could not trigger the Menu. Thanks anyway – FreakyCoder Dec 17 '18 at 08:47
  • Touchable component needs provide `onPress` property in order to "trigger" menu – sodik Dec 17 '18 at 14:13
  • I know, I also read the doc thank you :) Have you ever check FAB component? It has a onPress property but still not trigger the menu. – FreakyCoder Dec 19 '18 at 13:45
0

Using react-native-popup-menu version 0.15.12 I am able now to achieve this with

<MenuTrigger>
  <MyCustomButtonComponent>
    <Icon ...>
  </MyCustomButtonComponent>
</MenuTrigger>
Charney Kaye
  • 3,667
  • 6
  • 41
  • 54