Aligning react-native-popup-menu MenuOptions right

Question

I cant for the life of me figure out how to get the dropdown to be right aligned. I have tried playing with flex-end and absolute positioning with right: 0 etc.

I am looking to have the menu options listed on the right, below and tight right to the main trigger yellow box. Or at the very least butted up to the right of the pink box. I can change the height position easy enough with marginTop.

const TermPlanSelector = ({ options, selected, onChangeCallback }) => (
<Menu style={{ borderColor: 'yellow', borderWidth: 1 }}>
    <MenuTrigger style={[formStyles.optionsSelectContainer]}>
        <Text style={[formStyles.optionsSelectorText, { borderColor: 'pink', borderWidth: 1 }]}>
            { getLabel(selected, options) }
        </Text>
        <SelectorDownIcon />
    </MenuTrigger>
    <MenuOptions customStyles={{
                        optionsWrapper: {
                            borderColor: 'yellow', borderWidth: 1
                        },
                        optionsContainer: [
                            formStyles.optionsContainer,
                            { borderColor: 'red', borderWidth: 1 }
                        ],

                    }}
    >
        {
            options.map((option) => (
                <View key={option.value} style={[formStyles.optionItemView, { borderColor: 'green', borderWidth: 1 }]}>
                    <MenuOption onSelect={() => onChangeCallback(option.value)}>
                        <Text style={formStyles.optionItemText}>
                            {option.label}
                        </Text>
                    </MenuOption>
                </View>
            ))
        }
    </MenuOptions>
</Menu>

);

have you tried float:right; ? – Carol McKay Nov 01 '18 at 06:52 — Carol McKay, Nov 01 '18 at 06:52
Yeah no good. float is not a style propr – P-Rick Stephens Nov 02 '18 at 13:42 — P-Rick Stephens, Nov 02 '18 at 13:42
can you make a codepen or jsfiddle ? – Carol McKay Nov 03 '18 at 02:04 — Carol McKay, Nov 03 '18 at 02:04
transform: translateX(15%); – Carol McKay Nov 03 '18 at 02:08 — Carol McKay, Nov 03 '18 at 02:08

score 1 · Answer 1 · edited Oct 10 '20 at 18:04

1

Try giving marginLeft in negative like -10; this worked for me:

<MenuOptions
      optionsContainerStyle={{marginLeft: -20,}}
>

edited Oct 10 '20 at 18:04

Adrian Mole

49,934
160
51
83

answered Oct 10 '20 at 17:40

Dhanraj Patil

11
3

score 0 · Answer 2 · answered Nov 18 '18 at 09:39

if the width of the "main trigger" is fixed (or known), you can probably play with some margins or similar styling.

However if you are looking to cleaner solution, checkout custom renderer section of extension guides where you can complete control.

Here is simple example how to render menu on [0, 0] coordinates:

const CustomMenu = (props) => {
  const { style, children, layouts, ...other } = props;
  const position = { top: 0, left: 0 }
  return (
    <View {...other} style={[style, position]}>
      {children}
    </View>
  );
};

Aligning react-native-popup-menu MenuOptions right

2 Answers2