1

I was trying to use a context menu that shows up after selecting part of the text in a TextInput, but the native popup menu is covering it. I can not put the menu in the element above. And if I put it under current placement, the keyboard would cover it. I was trying to use marginBottom to move the menu higher, but it did not work. The only thing that lets me move the menu options above native popup is paddingBottom but it does not look good in the app. 

<Menu ref={c => (this.styleMenu = c)} renderer={renderers.Popover} style={[{ opacity: 0 }, { marginBottom: '250%' }, { position: 'absolute' }, { top: 0 }, { right: 0 }, { float: 'top' }]}>
    <MenuTrigger text='' />
    <MenuOptions optionsContainerStyle={[/*{ paddingBottom: 100 }*/, { marginBottom: '1%' }, /*{height: 30}*/]}>
        <MenuOption onSelect={() => this.doSomething('1')} text={I18n.t('1')} />
        <MenuOption onSelect={() => this.doSomething('2')} text={I18n.t('2')} />
        <MenuOption onSelect={() => this.doSomething('3')} text={I18n.t('3')} />
    </MenuOptions>
</Menu>

Is it possible to obtain similar results without paddingBottom or at least make the extra part of the menu transparent?

Paras Korat
  • 2,011
  • 2
  • 18
  • 36
freir96
  • 123
  • 2
  • 13
  • something like https://stackoverflow.com/questions/45577484/react-native-popup-menu-moving-the-options-box ? – sodik Mar 22 '19 at 07:17
  • Unfortunately when I use it, the menu only goes down not up. – freir96 Mar 22 '19 at 09:29
  • maybe for your use-case Popover renderer would be more appropriate. but I believe there are more options for styling than just `optionsContainerStyle` – sodik Mar 22 '19 at 10:21

0 Answers0