CODEWITHSUNDEEP
javascriptandroidiosreact-nativereact-native-popup-menu
freir96
freir96

Reputation: 143

Can I use marginBottom to move React-Native popup menu out of the Component it is in?

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?

Upvotes: 1

Views: 1111

Answers (0)

Related Questions