Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Android] Provide a PopupMenu component #3004

Closed
satya164 opened this issue Sep 24, 2015 · 53 comments
Closed

[Android] Provide a PopupMenu component #3004

satya164 opened this issue Sep 24, 2015 · 53 comments

Comments

@satya164
Copy link
Contributor

@satya164 satya164 commented Sep 24, 2015

Currently there is no way to specify an overflow menu icon for Navigator.NavigationBar (or is there?). I can add a custom button, sure, but I cannot find a way to show a menu. Does such a functionality exist?

The Menu component is widely used on Android, and it'll be awesome to have it.

@mkonicek

This comment has been minimized.

Copy link
Contributor

@mkonicek mkonicek commented Sep 24, 2015

Can you please use Stack Overflow to ask questions and tag them with react-native? http://stackoverflow.com/questions/tagged/react-native

Many people from the community hang out on Stack Overflow and will be able to see your question. Using Stack Overflow for questions also helps us use Github issues to keep track of bugs that need to be fixed.

@satya164

This comment has been minimized.

Copy link
Contributor Author

@satya164 satya164 commented Sep 24, 2015

@mkonicek Hmm... I guess no menu component exists for Android? May be I should change the title. This is more of a feature request than just a question.

@satya164 satya164 changed the title Overflow icon in Navigator.NavigationBar [Android] Overflow icon in Navigator.NavigationBar Sep 24, 2015
@satya164 satya164 closed this Sep 24, 2015
@satya164 satya164 reopened this Sep 24, 2015
@mkonicek

This comment has been minimized.

Copy link
Contributor

@mkonicek mkonicek commented Sep 24, 2015

@mkonicek

This comment has been minimized.

@mkonicek

This comment has been minimized.

Copy link
Contributor

@mkonicek mkonicek commented Sep 24, 2015

You probably mean this one, right? http://i.stack.imgur.com/j67fB.gif

@satya164

This comment has been minimized.

Copy link
Contributor Author

@satya164 satya164 commented Sep 24, 2015

@mkonicek Yes. I'm talking about the popup menu. I should change my title :)

Adding an overflow icon is not an issue since I can add any custom view. Popup menu is the one. Thanks :)

@satya164 satya164 changed the title [Android] Overflow icon in Navigator.NavigationBar [Android] Provide a PopupMenu component Sep 24, 2015
@hedgerwang

This comment has been minimized.

Copy link
Contributor

@hedgerwang hedgerwang commented Sep 24, 2015

For now, you can make your own custom button for the navigation bar.

Speaking of the menu, you'd need to build a separate menu or modal dialog separately and use the button as a trigger to open a menu.

@satya164

This comment has been minimized.

Copy link
Contributor Author

@satya164 satya164 commented Sep 25, 2015

@hedgerwang Unfortunately, the Modal component is not yet implemented for Android.

I cannot build a menu either, as everything is overflow: hidden and cannot be changed. Hence there cannot be content larger than the container.

@ide

This comment has been minimized.

Copy link
Contributor

@ide ide commented Sep 25, 2015

You can make a large container that is transparent and has pointerEvents="box-none" on it, and put a smaller, visible view inside.

Also Modal is intended for hybrid apps. If you are using only React Native, I recommend you use a Navigator w/out NavigationBar.

@satya164

This comment has been minimized.

Copy link
Contributor Author

@satya164 satya164 commented Sep 26, 2015

@ide I'll try it out. I actually need a PopupMenu, not a modal. I'll try to make a native component and send a pull request.

@niftylettuce

This comment has been minimized.

Copy link
Contributor

@niftylettuce niftylettuce commented Oct 31, 2015

@ide @satya164 Why don't the React Native docs for Modal say "Android is not supported"? This is frustrating.

@ide

This comment has been minimized.

Copy link
Contributor

@ide ide commented Nov 1, 2015

@niftylettuce want to send a PR to clarify this in Modal's docblock?

@niftylettuce

This comment has been minimized.

Copy link
Contributor

@niftylettuce niftylettuce commented Nov 2, 2015

@ide Don't really have time, trying to crank out a project.

@prashanthmerugucs

This comment has been minimized.

Copy link

@prashanthmerugucs prashanthmerugucs commented Nov 18, 2015

When Modal component is worked for android also.Thanks

@leeight

This comment has been minimized.

Copy link
Contributor

@leeight leeight commented Nov 21, 2015

+1

@pewh

This comment has been minimized.

Copy link

@pewh pewh commented Dec 10, 2015

+1

@blahoink

This comment has been minimized.

Copy link

@blahoink blahoink commented Dec 11, 2015

+1

For anyone looking for a quick replacement, react-native-dialogs is a good solution that plugs into native dialogs.

@Ehesp

This comment has been minimized.

Copy link
Contributor

@Ehesp Ehesp commented Dec 14, 2015

+1

Some way to force a component to the front of the "stack" would be even more helpful, since it'd apply to more than just the Dialog spec.

@mkonicek

This comment has been minimized.

Copy link
Contributor

@mkonicek mkonicek commented Dec 18, 2015

@Ehesp Totally agree. We used to have a JS-based solution internally but later realized a native implementation works better in hybrid apps (apps where only parts are built with React Native).
Here is the JS implementation, feel free to try it out: https://gist.github.com/mkonicek/1a8bd7253e3257687228

It hooks into the Portal here: https://github.com/facebook/react-native/blob/master/Libraries/ReactIOS/renderApplication.android.js#L92

I believe we started working on a native implementation of Modals internally. @AaaChiuuu do we use it in any fb app it ready to be open sourced?

@AaaChiuuu

This comment has been minimized.

Copy link
Contributor

@AaaChiuuu AaaChiuuu commented Dec 19, 2015

Oh man, I don't think anyone currently uses it. In fact, it got broken when we removed BaseViewPropertyApplicator so styles weren't properly applied to the host view. I really, really wish I could get on this to unblock you guys but my hands are all tied with internal integration and it sounds like the London side of our team is getting stretched too. Krzysztof attempted a fix before he left but it seemed pretty hard to him.

If the community could take this on that would be amazing. The gist of the current implementation before the breakage is creating an Android Dialog in the ReactModalHostView extends ViewGroup and attaching a newly defined DismissEvent to the Dialog in the addEventEmitters(...) of ReactModalHostManager extends ViewGroupManager<ReactModalHostView>.

@mkonicek

This comment has been minimized.

Copy link
Contributor

@mkonicek mkonicek commented Jan 6, 2016

Thanks for the update @AaaChiuuu!

Here's the code, if anyone has bandwidth to ship it that would be awesome!

https://gist.github.com/mkonicek/00453ec3f6c965b93afd
https://gist.github.com/mkonicek/58c7c9824987a54bfc54

Then Modal might just work on Android :)

@niftylettuce

This comment has been minimized.

Copy link
Contributor

@niftylettuce niftylettuce commented Jan 10, 2016

Lets get it in!

@Ehesp

This comment has been minimized.

Copy link
Contributor

@Ehesp Ehesp commented Jan 10, 2016

I'm confused here... How does a Modal differ from the Alert API?

@satya164

This comment has been minimized.

Copy link
Contributor Author

@satya164 satya164 commented Jan 10, 2016

@Ehesp You can render views inside a Modal.

@satya164

This comment has been minimized.

Copy link
Contributor Author

@satya164 satya164 commented Jan 15, 2016

@alvaromb Yeah, it's on the roadmap, so it'll be worked on eventually :)

PR is much welcome. But first let's confirm if this component exists internally, then someone could share the code which will make it easier for you.

cc @mkonicek

@satya164

This comment has been minimized.

Copy link
Contributor Author

@satya164 satya164 commented Jan 15, 2016

@alvaromb Ok, so seems this component existed internally and was just open sourced - 1843709

@Ehesp

This comment has been minimized.

Copy link
Contributor

@Ehesp Ehesp commented Jan 15, 2016

@satya164 +1 that stuff all day long. This should be in 0.18, if it works fine :D

@Ehesp

This comment has been minimized.

Copy link
Contributor

@Ehesp Ehesp commented Jan 15, 2016

@satya164 How are you getting on with implementing the Android Modal?

@satya164

This comment has been minimized.

Copy link
Contributor Author

@satya164 satya164 commented Jan 15, 2016

@Ehesp PR is here - #5320

@terrysahaidak

This comment has been minimized.

Copy link

@terrysahaidak terrysahaidak commented Feb 17, 2016

Hey @satya164, how it is goin' with PopupMenu?

@wvengen

This comment has been minimized.

Copy link

@wvengen wvengen commented Feb 17, 2016

We have a Picker now, since 0.19.
Haven't put it into a NavigationBar yet, but it looks like that could already work.

@terrysahaidak

This comment has been minimized.

Copy link

@terrysahaidak terrysahaidak commented Feb 17, 2016

@wvengen yup, but how it can be used with the button instead of picker text field (or what it is)?

@wvengen

This comment has been minimized.

Copy link

@wvengen wvengen commented Feb 17, 2016

@terrysahaidak That's a good point. As a somewhat ugly workaround I'm now using a Picker with an opacity of zero and a fixed width, positioning it on top of an icon (though not in a NavigationBar). I'd love it to be possible to specify an element for rendering the Picker button, perhaps something for a new issue.

@chirag04

This comment has been minimized.

Copy link
Contributor

@chirag04 chirag04 commented Mar 28, 2016

context popupMenu is already exposed on UIManager. I have a small wrapper that adds a vertical hamburger menu and shows the popup on it like the youtube app.

import React from 'react-native';
import Icon from 'react-native-vector-icons/Ionicons';

import styles from './styles';

const {
  View,
  UIManager,
  findNodeHandle,
  TouchableOpacity,
} = React;

const ICON_SIZE = 24;

class PopupMenu extends React.Component {
  handleShowPopupError = () => {
    // show error here
  };

  handleMenuPress = () => {
    const { actions, onPress } = this.props;

    UIManager.showPopupMenu(
      findNodeHandle(this.refs.menu),
      actions,
      this.handleShowPopupError,
      onPress,
    );
  };

  render() {
    return (
      <View>
        { this.props.children }
        <TouchableOpacity onPress={this.handleMenuPress} style={styles.touchableContainer}>
          <Icon
            name="android-more-vertical"
            size={ICON_SIZE}
            color={'grey'}
            ref="menu"
          />
        </TouchableOpacity>
      </View>
    );
  }
}

PopupMenu.propTypes = {
  actions: React.PropTypes.array.isRequired,
  onPress: React.PropTypes.func.isRequired,
  children: React.PropTypes.object.isRequired,
};

export default PopupMenu;
<PopupMenu actions=['1', '2'] onPress={() => { // }}>
      <YourListItem .... />
</PopupMenu>
@terrysahaidak

This comment has been minimized.

Copy link

@terrysahaidak terrysahaidak commented Mar 28, 2016

@chirag04 AWESOME! Thanks a lot!

@chirag04

This comment has been minimized.

Copy link
Contributor

@chirag04 chirag04 commented Mar 28, 2016

@mkonicek @satya164 I will let you guys close this.

@terrysahaidak

This comment has been minimized.

Copy link

@terrysahaidak terrysahaidak commented Mar 28, 2016

@chirag04 this should be mentioned in the docs I think.

@chirag04

This comment has been minimized.

Copy link
Contributor

@chirag04 chirag04 commented Mar 28, 2016

@terrysahaidak can you PR?

@kkgelu

This comment has been minimized.

Copy link

@kkgelu kkgelu commented Mar 30, 2016

@wvengen is it possible to invoke the click/tap programmatically for the picker? If so, we could have a zero sized picker, and prompt it by hooking any other events (instead of overlapping views).

Sorry for hunting workaround here, urgently need such an option menu (as an equivalent to actionsheet in iOS), and the picker has all the right attributes I need.

@xotahal

This comment has been minimized.

Copy link

@xotahal xotahal commented Mar 30, 2016

@kkgelu What kind of problem do you have with @chirag04's solution? I use it in react-native-material-ui and it works well.

@kkgelu

This comment has been minimized.

Copy link

@kkgelu kkgelu commented Mar 31, 2016

@xotahal my bad... I rushed to try wvengen's solution. @chirag04 's solution is absolutely brilliant.

For next person: if you don't want that wrapper, this is a minimal example you can try:

      UIManager.showPopupMenu(
        findNodeHandle(this.refs.viewOnWhichToPopup),
        ["Option 1", "Option 2"],
        () => console.log("something went wrong with the popup menu"),
        (e, i)=> console.log(e + " : " + i),
      );

Output:

03-30 20:29:56.522  4023  4275 I ReactNativeJS: itemSelected : 0
03-30 20:29:59.085  4023  4275 I ReactNativeJS: itemSelected : 1

It works everywhere!

Last, I'll remember to turn to UIManager for things next time, let's hope the team don't change it.. ^_^

@satya164 satya164 closed this May 4, 2016
@warmhug

This comment has been minimized.

Copy link

@warmhug warmhug commented Jul 20, 2016

Why the actions argument of UIManager.showPopupMenu() must be array of strings? And can I set style for item?

@hungdev

This comment has been minimized.

Copy link

@hungdev hungdev commented Apr 19, 2017

thank @chirag04 but It's in UIManagerModule.java of the Android part of React Native, so this will only work on Android.

@Palisand

This comment has been minimized.

Copy link

@Palisand Palisand commented Jul 25, 2017

As @warmhug mentioned, since actions must be an array of strings, styling a menu item appears to be impossible. This makes UIManager.showPopupMenu unusable when you need to indicate which item is active. Furthermore, it seems that the menu can only fly in from the top left and there are no customization options available to change this. @chirag04 any solutions to these issues? For the time being, I am going to try and use Modal.

@facebook facebook locked as resolved and limited conversation to collaborators Jul 21, 2018
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Projects
None yet
You can’t perform that action at this time.