Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

React Native Popup Menu Moving the Options Box

I have a React Native Popup Menu implemented as follows:

import React, { Component } from 'react';
import { Text } from 'react-native';
import { Icon, Divider } from 'react-native-elements';
import {
  Menu,
  MenuTrigger,
  MenuOptions,
  MenuOption
} from 'react-native-popup-menu';
import { connect } from 'react-redux';
import firebase from 'firebase';
import { STATUS_BAR_HEIGHT } from '../constants';

class PopUpMenu extends Component {
  render() {
    const { menuStyle, menuOptionsStyle, menuTriggerStyle } = styles;

    return (
      <Menu style={menuStyle}>
        <MenuTrigger style={menuTriggerStyle}>
          <Icon
            name="menu"
            color="white"
            size={30}
          />
        </MenuTrigger>
        <MenuOptions style={menuOptionsStyle}>
          <MenuOption>
            <Text>{this.props.user.email}</Text>
          </MenuOption>
          <MenuOption>
            <Divider />
          </MenuOption>
          <MenuOption text="Log Out" onSelect={() => this.signOutUser()} />
        </MenuOptions>
      </Menu>
    );
  }
}

const styles = {
  menuStyle: {
    marginTop: STATUS_BAR_HEIGHT,
    marginRight: 12
  },
  menuTriggerStyle: {},
  menuOptionsStyle: {}
};

Now currently it looks like this closed:

Closed

And this opened:

Opened

I would like to have the opened box move down below the trigger button while still keeping the trigger in the same place. How can I accomplish that with styles?

like image 315
Barry Michael Doyle Avatar asked Aug 08 '17 20:08

Barry Michael Doyle


People also ask

How do I create an option menu in react native?

To create a menu we will use material design library i.e. react-native-paper. Menu contains a list of options that appear temporarily. In our project, we will create a button and on click of that button, menu will appear.

How do I add a popup in react native?

In your components folder, create a file called Modal. tsx and add the following code: import React from "react"; import { StyleSheet, View, Text, Button } from "react-native"; import RNModal from "react-native-modal"; type ModalProps = { isVisible: boolean; children: React.


1 Answers

You can achieve that by passing optionsContainerStyle props to MenuOptions component, not style props.

Something like this.

<MenuOptions optionsContainerStyle={{ marginTop: 40 }}>
...
</MenuOptions>
like image 103
Yuya Fujimoto Avatar answered Sep 30 '22 14:09

Yuya Fujimoto