React-native-router-flux: Can't create dropdown button in navbar

[FlaviooLima]

Hi, i'm trying to create a dropdown button on the navBar, to do this i pass a function to the prop renderRightButton to create a button that when pressed will show a list of elements.
In iOS it works perfectly and as expected but in android doesn't work.

Version

• react-native-router-flux v3.33.2
• react-native v0.31.0
  -Mac OS
  

  Expected behaviour (prints from iOS. Tested in Emulator iPhone 6, real device iPhone 6s)

Actual behaviour (Prints from Android. Tested in Samsung Galaxy S4 mini)

Steps to reproduce

1. Create a function that will render a button that on press will show a dropdown view.
2. pass the function to renderRightButton, to render the button as a right button in navBar

[sheparddw]

Are you using a package for the dropdown menu functionality?
Have you tried with the following package?
https://github.com/instea/react-native-popup-menu
Make sure your Menu Context is in the root view of your app (a parent of Router).
For example:

<MenuContext style={styles.container}>
        <Router
          navigationBarStyle={styles.navBar}
          titleStyle={styles.title}
          sceneStyle={styles.scene}
          scenes={Scenes}
          leftButtonStyle={styles.backButton}
        />
</MenuContext>

[FlaviooLima]

@sheparddw thanks for the reply :) , i already solved the problem, but from what you said i believe that i was doing this in the wrong way.
Any way i'm gonna save what you said and when i have the chance i will try it :)

[edy]

After wrapping the Router with MenuContext i got a white screen. The solution was to add {flex: 1} to the style property of MenuContext.

[vinayr]

@flaviotobi may I know how you solved this issue? I have exactly same problem where dropdown cuts off beyond navbar (android only, works fine in iOS). I am using just ListView for dropdown.

[FlaviooLima]

@vinayr Yes, no problem.
To start the reason that this is happening is because overflow:"visible" doesn't work in React-Native Android.
I advice to try to follow @sheparddw response to solve the problem. but for reference i'm gonna try to explain what i did.

1- So i render the right button in navBar as the docs says to do it ( renderRightButton={yourFunction()} ).

2- Than i created a component as you usually create, and i call them in every view that i want the menu (don't forget to give the menu component position absolute or zIndex depending in what you desire ).

3-in menu component i have a prop.showMenu that if true the menu Height is 560( this value can be anything you want) and if false the menu Height is 0.

4- ok now the only thing that you need to do is to communicate between the button in nav bar and the menu component, in a way that when you click the button it opens/close the menu.
for this i use the Actions.refresh() where i pass the key of the component and the prop like this:
Actions.refresh({key: "yourKeyName", showMenu:true })

this is line of communication:
navbar (do the refresh function) ---> AnyViewWhereCOmponentIs --> menu component

So from navBar i refresh the view and pass the prop showMenu to that view as a prop, and in the view i pass again the prop showMenu that i received from the refresh to menu component as a prop, and than you open or close the menu.

This response is bad but i don't have much time to explain in a better way, later tonight i'm gonna try to edit and explain it better. In the meantime try to see if you understand what i did from what i said above.

If in the meantime you have any question please post here, so later tonight i can respond.

[vinayr]

@flaviotobi Thanks for your response. I am not using any external modules for dropdown, just built-in ListView. So there is no height involved. I have already tried with absolute position and zIndex but no luck. I have pasted complete code at https://github.com/aksonov/react-native-router-flux/issues/1152. Could you please check if I am doing something wrong?

[FlaviooLima]

@vinayr Hi, sorry for not reply any sooner, but unfortunately i didn't had the time.
Did you solve the problem ?

[vinayr]

@flaviotobi yes I resolved it https://github.com/aksonov/react-native-router-flux/issues/1152#issuecomment-245876550. Thanks for your inputs though.

[wkwyatt]

@flaviotobi Would you provide some example code of your menu dropdown? I have been trying to get this menu dropdown to work for a week now and I haven't been able to figure out how to display the dropdown or connect the redux actions to the nav button or the dropdown. I know it's been some time since you posted but hopefully it would help out :)

[FlaviooLima]

@wkwyatt have you tried @sheparddw and @edy solution?
:)

[wkwyatt]

@flaviotobi I haven't, I didn't think to see if it was compatible with RNRF. I guess the only way to know for sure is to try it

[DivyanshuAlok]

@vinayr Yes, no problem.
To start the reason that this is happening is because overflow:"visible" doesn't work in React-Native Android.
I advice to try to follow @sheparddw response to solve the problem. but for reference i'm gonna try to explain what i did.

1- So i render the right button in navBar as the docs says to do it ( renderRightButton={yourFunction()} ).

2- Than i created a component as you usually create, and i call them in every view that i want the menu (don't forget to give the menu component position absolute or zIndex depending in what you desire ).

3-in menu component i have a prop.showMenu that if true the menu Height is 560( this value can be anything you want) and if false the menu Height is 0.

4- ok now the only thing that you need to do is to communicate between the button in nav bar and the menu component, in a way that when you click the button it opens/close the menu.
for this i use the Actions.refresh() where i pass the key of the component and the prop like this:
Actions.refresh({key: "yourKeyName", showMenu:true })

this is line of communication:
navbar (do the refresh function) ---> AnyViewWhereCOmponentIs --> menu component

So from navBar i refresh the view and pass the prop showMenu to that view as a prop, and in the view i pass again the prop showMenu that i received from the refresh to menu component as a prop, and than you open or close the menu.

This response is bad but i don't have much time to explain in a better way, later tonight i'm gonna try to edit and explain it better. In the meantime try to see if you understand what i did from what i said above.

If in the meantime you have any question please post here, so later tonight i can respond.

can you just share the code for the same (I am new to RNRF)