React-native-navigation: Open a modal from tab bar

[adnanbabar]

https://stackoverflow.com/questions/48857262/open-modal-from-tab-bar

Issue Description

I have 3 tabs and I want to open a modal when the user presses on the second tab at the moment it just navigates to the screen.

There was another issue raised for this but was closed without any solution.
https://github.com/wix/react-native-navigation/issues/55

I really like this library and don't want to switch because of this issue so any help would be greatly appreciated.

Thanks

[etabard]

You could listen for visibility event in the second tab component : https://wix.github.io/react-native-navigation/#/screen-api?id=listen-visibility-events-in-onnavigatorevent-handler

On willAppear, you can open your modal. I don't know if it would flicker a bit.

If you don't want the second tab to be selected, you'll have to hack something with the selectedTabIndex event.

I hope it helped

[guyca]

I suggest following @etabard approach. In v2 we will probably support handling bottom tab click in js so you'd be able to easily run some logic and handle click accordingly.

[adnanbabar]

@etabard

Thanks for your response. Already implemented what you suggested but you are right I get the flicker which is not good!

Implementing this feature is quite key so I have to use a different navigation library now.

[guyca]

There's an open PR for that.. https://github.com/wix/react-native-navigation/pull/1578 perhaps you can merge it into your fork for now.

[adnanbabar]

@guyca thanks for pointing out.

Have done exactly that and it's working perfectly!

[akshit5230]

You can do it by replacing the tabbar icon component with a TouchableOpacity rather than a View then onPress will do whatever you want to.

[jeffy7]

willAppear

how to know viewwillAppear