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

Comments

Projects
None yet
@satya164
Collaborator

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.

Show comment
Hide comment
@mkonicek

mkonicek Sep 24, 2015

Contributor

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.

Contributor

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.

Show comment
Hide comment
@satya164

satya164 Sep 24, 2015

Collaborator

@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.

Collaborator

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 from Overflow icon in Navigator.NavigationBar to [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.

Show comment
Hide comment
@mkonicek
Contributor

mkonicek commented Sep 24, 2015

@mkonicek

This comment has been minimized.

Show comment
Hide comment
@mkonicek

This comment has been minimized.

Show comment
Hide comment
@mkonicek

mkonicek Sep 24, 2015

Contributor

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

Contributor

mkonicek commented Sep 24, 2015

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

@satya164

This comment has been minimized.

Show comment
Hide comment
@satya164

satya164 Sep 24, 2015

Collaborator

@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 :)

Collaborator

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 from [Android] Overflow icon in Navigator.NavigationBar to [Android] Provide a PopupMenu component Sep 24, 2015

@hedgerwang

This comment has been minimized.

Show comment
Hide comment
@hedgerwang

hedgerwang Sep 24, 2015

Contributor

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.

Contributor

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.

Show comment
Hide comment
@satya164

satya164 Sep 25, 2015

Collaborator

@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.

Collaborator

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.

Show comment
Hide comment
@ide

ide Sep 25, 2015

Collaborator

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.

Collaborator

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.

Show comment
Hide comment
@satya164

satya164 Sep 26, 2015

Collaborator

@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.

Collaborator

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.

Show comment
Hide comment
@niftylettuce

niftylettuce Oct 31, 2015

Contributor

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

Contributor

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.

Show comment
Hide comment
@ide

ide Nov 1, 2015

Collaborator

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

Collaborator

ide commented Nov 1, 2015

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

@niftylettuce

This comment has been minimized.

Show comment
Hide comment
@niftylettuce

niftylettuce Nov 2, 2015

Contributor

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

Contributor

niftylettuce commented Nov 2, 2015

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

@prashanthnani

This comment has been minimized.

Show comment
Hide comment
@prashanthnani

prashanthnani Nov 18, 2015

When Modal component is worked for android also.Thanks

prashanthnani commented Nov 18, 2015

When Modal component is worked for android also.Thanks

@leeight

This comment has been minimized.

Show comment
Hide comment
@leeight

leeight Nov 21, 2015

Contributor

+1

Contributor

leeight commented Nov 21, 2015

+1

@pewh

This comment has been minimized.

Show comment
Hide comment
@pewh

pewh commented Dec 10, 2015

+1

@blahoink

This comment has been minimized.

Show comment
Hide comment
@blahoink

blahoink Dec 11, 2015

+1

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

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.

Show comment
Hide comment
@Ehesp

Ehesp Dec 14, 2015

Contributor

+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.

Contributor

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.

Show comment
Hide comment
@mkonicek

mkonicek Dec 18, 2015

Contributor

@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?

Contributor

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.

Show comment
Hide comment
@AaaChiuuu

AaaChiuuu Dec 19, 2015

Contributor

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>.

Contributor

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.

Show comment
Hide comment
@mkonicek

mkonicek Jan 6, 2016

Contributor

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 :)

Contributor

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.

Show comment
Hide comment
@niftylettuce

niftylettuce Jan 10, 2016

Contributor

Lets get it in!

Contributor

niftylettuce commented Jan 10, 2016

Lets get it in!

@Ehesp

This comment has been minimized.

Show comment
Hide comment
@Ehesp

Ehesp Jan 10, 2016

Contributor

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

Contributor

Ehesp commented Jan 10, 2016

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

@satya164

This comment has been minimized.

Show comment
Hide comment
@satya164

satya164 Jan 10, 2016

Collaborator

@Ehesp You can render views inside a Modal.

Collaborator

satya164 commented Jan 10, 2016

@Ehesp You can render views inside a Modal.

@Ehesp

This comment has been minimized.

Show comment
Hide comment
@Ehesp

Ehesp Jan 10, 2016

Contributor

Ah nice. What about the original request here though? If we want a popout menu/spinner coming from the navbar, do we achieve that with positioning a Modal, or is it a separate thing?

image

Contributor

Ehesp commented Jan 10, 2016

Ah nice. What about the original request here though? If we want a popout menu/spinner coming from the navbar, do we achieve that with positioning a Modal, or is it a separate thing?

image

@satya164

This comment has been minimized.

Show comment
Hide comment
@satya164

satya164 Jan 10, 2016

Collaborator

@Ehesp I doubt it'll be easy. BTW there is a third party component available for dropdowns - https://www.npmjs.com/package/react-native-dropdown-android , if it serves your purpose

Collaborator

satya164 commented Jan 10, 2016

@Ehesp I doubt it'll be easy. BTW there is a third party component available for dropdowns - https://www.npmjs.com/package/react-native-dropdown-android , if it serves your purpose

@Ehesp

This comment has been minimized.

Show comment
Hide comment
@Ehesp

Ehesp Jan 10, 2016

Contributor

Yeah I've taken a look at that, not very customisable though by the looks of it.

I think the main problem is there seems to be no way to "force to front". Things like FABs, Spinners, Bottom Sheets are possible but are always required to be at the end of the render stack, rather than being able to "pop to top".

Contributor

Ehesp commented Jan 10, 2016

Yeah I've taken a look at that, not very customisable though by the looks of it.

I think the main problem is there seems to be no way to "force to front". Things like FABs, Spinners, Bottom Sheets are possible but are always required to be at the end of the render stack, rather than being able to "pop to top".

@niftylettuce

This comment has been minimized.

Show comment
Hide comment
@niftylettuce

niftylettuce Jan 11, 2016

Contributor

Modal does not work for Android -- you just have to use Portal instead and sniff the Platform.

Check out what I did with https://github.com/niftylettuce/react-native-loading-spinner-overlay - it overlays a spinner (basically a modal) on top of both Android and iOS platforms

Contributor

niftylettuce commented Jan 11, 2016

Modal does not work for Android -- you just have to use Portal instead and sniff the Platform.

Check out what I did with https://github.com/niftylettuce/react-native-loading-spinner-overlay - it overlays a spinner (basically a modal) on top of both Android and iOS platforms

@niftylettuce

This comment has been minimized.

Show comment
Hide comment
@niftylettuce
Contributor

niftylettuce commented Jan 11, 2016

@satya164

This comment has been minimized.

Show comment
Hide comment
@satya164

satya164 Jan 11, 2016

Collaborator

BTW I'm currently working on making <Modal /> work on Android. Will post soon.

Collaborator

satya164 commented Jan 11, 2016

BTW I'm currently working on making <Modal /> work on Android. Will post soon.

@alvaromb

This comment has been minimized.

Show comment
Hide comment
@alvaromb

alvaromb Jan 14, 2016

Contributor

@mkonicek do you have an approximate release date for Android's Spinner component? I'm porting an app to Android and I would like to leverage if I have to drop a custom solution or not.

Or if you need help I could give a hand, although I do not have any Android experience.

Contributor

alvaromb commented Jan 14, 2016

@mkonicek do you have an approximate release date for Android's Spinner component? I'm porting an app to Android and I would like to leverage if I have to drop a custom solution or not.

Or if you need help I could give a hand, although I do not have any Android experience.

@satya164

This comment has been minimized.

Show comment
Hide comment
@satya164

satya164 Jan 15, 2016

Collaborator

@alvaromb I don't think anyone is working on it.

Collaborator

satya164 commented Jan 15, 2016

@alvaromb I don't think anyone is working on it.

@alvaromb

This comment has been minimized.

Show comment
Hide comment
Contributor

alvaromb commented Jan 15, 2016

@satya164

This comment has been minimized.

Show comment
Hide comment
@satya164

satya164 Jan 15, 2016

Collaborator

@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

Collaborator

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.

Show comment
Hide comment
@satya164

satya164 Jan 15, 2016

Collaborator

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

Collaborator

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.

Show comment
Hide comment
@Ehesp

Ehesp Jan 15, 2016

Contributor

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

Contributor

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.

Show comment
Hide comment
@Ehesp

Ehesp Jan 15, 2016

Contributor

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

Contributor

Ehesp commented Jan 15, 2016

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

@satya164

This comment has been minimized.

Show comment
Hide comment
@satya164

satya164 Jan 15, 2016

Collaborator

@Ehesp PR is here - #5320

Collaborator

satya164 commented Jan 15, 2016

@Ehesp PR is here - #5320

@terrysahaidak

This comment has been minimized.

Show comment
Hide comment
@terrysahaidak

terrysahaidak Feb 17, 2016

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

terrysahaidak commented Feb 17, 2016

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

@wvengen

This comment has been minimized.

Show comment
Hide comment
@wvengen

wvengen 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.

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.

Show comment
Hide comment
@terrysahaidak

terrysahaidak Feb 17, 2016

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

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.

Show comment
Hide comment
@wvengen

wvengen 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.

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.

Show comment
Hide comment
@chirag04

chirag04 Mar 28, 2016

Collaborator

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>
Collaborator

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.

Show comment
Hide comment
@terrysahaidak

terrysahaidak Mar 28, 2016

@chirag04 AWESOME! Thanks a lot!

terrysahaidak commented Mar 28, 2016

@chirag04 AWESOME! Thanks a lot!

@chirag04

This comment has been minimized.

Show comment
Hide comment
@chirag04

chirag04 Mar 28, 2016

Collaborator

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

Collaborator

chirag04 commented Mar 28, 2016

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

@terrysahaidak

This comment has been minimized.

Show comment
Hide comment
@terrysahaidak

terrysahaidak Mar 28, 2016

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

terrysahaidak commented Mar 28, 2016

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

@chirag04

This comment has been minimized.

Show comment
Hide comment
@chirag04

chirag04 Mar 28, 2016

Collaborator

@terrysahaidak can you PR?

Collaborator

chirag04 commented Mar 28, 2016

@terrysahaidak can you PR?

@kkgelu

This comment has been minimized.

Show comment
Hide comment
@kkgelu

kkgelu 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.

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.

Show comment
Hide comment
@xotahal

xotahal 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.

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.

Show comment
Hide comment
@kkgelu

kkgelu 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.. ^_^

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.

Show comment
Hide comment
@warmhug

warmhug Jul 20, 2016

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

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.

Show comment
Hide comment
@hungdev

hungdev 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.

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.

Show comment
Hide comment
@Palisand

Palisand 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.

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.