React-native-navigation: [v2] Open modal by clicking bottom tab icon

Created on 9 Jun 2019 · 8Comments · Source: wix/react-native-navigation

Issue Description

https://stackoverflow.com/questions/56513482/react-native-how-to-open-modal-or-action-sheet-on-clicking-a-button-tab-in-wix

[ENTER DESCRIPTION HERE]
I have a tab-based application with 3 tabs and i want to open a modal/actionsheet on clicking the middle tab rather than opening normal page. There has been multiple issue raised for the same but most of them are old and for v1 some are for V2 but doesn't have any proper solution or example on how to do so.
Here are the threads

2756 , #55

And a PR thread #1578

Any help suggestion on how to work with this is appreciated
Here is how my navigation structure is

Promise.all([
        Foundation.getImageSource("home", 40),
        FontAwesome5.getImageSource("user",30),
        Feather.getImageSource("camera",25),
    ]).then(sources => {
        Navigation.setRoot({
            root: {
                sideMenu: {
                    center: {
                        bottomTabs: {
                            options: {
                                bottomTabs: {
                                    backgroundColor: 'white',
                                    titleDisplayMode: 'alwaysHide'
                                },
                            },
                            children: [
                                {
                                    stack: {
                                        children: [{
                                            component: {
                                                name: 'HomeScreen',
                                                passProps: {
                                                    text: 'This is tab 1'
                                                }
                                            }
                                        }],
                                        options: {
                                            bottomTab: {
                                                testID: 'HOME_TAB',
                                                icon: sources[0],
                                            },

                                            topBar: {
                                                title: {
                                                    text: 'MyReactApp',
                                                }
                                            }
                                        }
                                    }
                                },
                                {
                                    component: {
                                        name: 'Camera',
                                        passProps: {
                                            text: 'This is tab 2'
                                        },
                                        options: {
                                            bottomTab: {
                                                testID: 'CAMERA_TAB',
                                                icon: sources[2]
                                            }
                                        }
                                    }
                                },
                                {
                                    stack: {
                                        children: [{
                                            component: {
                                                name: 'ProfileScreen',
                                                passProps: {
                                                    text: 'Profile Screen'
                                                }
                                            }
                                        }],
                                        options: {
                                            bottomTab: {
                                                testID: 'PROFILE_TAB',
                                                icon: sources[1],
                                            },
                                            topBar: {
                                                title: {
                                                    text: 'John Doe',
                                                }
                                            }
                                        }
                                    }
                                }
                                ]
                        },
                    },
                },
            }
        });
    });

Environment

React Native Navigation version: ^2.13.2
React Native version: 0.59.8
Platform(s) (iOS, Android, or both?): both
Device info (Simulator/Device? OS version? Debug/Release?): Device

🏚 stale

Source

ajitdas123

All 8 comments

https://github.com/wix/react-native-navigation/issues/2766#issuecomment-501520396

eightyfive on 13 Jun 2019

@eightyfive Yes, I saw and that thread at the end pointing to the PR thread #1578 . I am just wondering if anyone has any suggestion on how this can be done/implemented

ajitdas123 on 13 Jun 2019

👍1

Was just FYI, my comment was triggered by your issue.

eightyfive on 13 Jun 2019

o ok,

ajitdas123 on 13 Jun 2019

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs.
If you believe the issue is still relevant, please test on the latest Detox and report back. Thank you for your contributions.