How to have a global view component like a notification bar

[isAlmogK]

I'm using the latest version of the package and I would like to use the following package https://github.com/KBLNY/react-native-message-bar

and have a notification bar that is global to the entire app but I'm not sure the correct way to do this with scenes

I have tried the following but this does not render or load the rest of the routes

return (
            <Provider store={store}>
                <View>
                    <ConnectedRouter>
                        <Scene key="root" hideNavBar hideTabBar>
                            <Scene key="public">
                                <Scene key="login" component={Login} initial={true} title={'Login'} />
                                <Scene key="ResetPassword" component={ResetPassword} title={'Reset Password'} />
                            </Scene>
                            <Scene key="tabBar" tabs lazy>
                                <Scene key="tab1" title="Home" tabBarLabel="Home" icon={HomeTabIcon}>
                                    <Scene key='Home' component={Home} title='Home' initial={true}  panHandlers={null}/>
                                    <Scene key='Teams' component={Teams} title='Teams' initial={false} />
                                </Scene>
                                <Scene key="tab2" title="Photos" tabBarLabel="Photos" icon={PhotosTabIcon}>
                                    <Scene key='Photos' component={Photos} title='Photos' back backTitle='Back' initial={false} />
                                    <Scene key='SinglePhoto' component={SinglePhoto} title='' back backTitle='Back' initial={false} />
                                </Scene>
                                <Scene key="tab3" title="Site Diary" tabBarLabel="Site Diary" icon={SiteDiaryTabIcon}>
                                    <Scene key='SiteDiary' component={SiteDiary} title='SiteDiary' initial={false} />
                                </Scene>
                            </Scene>
                        </Scene>
                    </ConnectedRouter>
                    <MessageBar/>
                </View>
            </Provider>
        );

I have then tried the following way but this never loads the message bar

<Scene key="messageBar" component={MessageBar} initial={true} />

[aksonov]

What do you think if we will add overlay attribute for new container OverlayNavigator that will just simply render all children - similar to current LightboxNavigator (but lightboxnavigator displays initial + active only)

[aksonov]

Please check Example project from latest master. I think now RNRF allows very powerful techniques with overlay stacks (i.e. scene decomposition)

[aksonov]

Should be fixed with 4.0.0-beta.13, Example project contains alert on launch screen.

[isAlmogK]

I just tested it based on the example you provided with overlay it did not work for me I got the following error

There is no route defined for key messageBar.

I was able to get it to work by doing the following

<View style={styles.container}>
                <Provider store={store}>
                    <ConnectedRouter>
                        <Scene key="root" hideNavBar hideTabBar>
                            <Scene key="public">
                                <Scene key="login" component={Login} initial={true} title={'Login'} />
                                <Scene key="ResetPassword" component={ResetPassword} title={'Reset Password'} />
                            </Scene>
                            <Scene key="tabBar" tabs lazy>
                                <Scene key="tab1" title="Home" tabBarLabel="Home" icon={HomeTabIcon}>
                                    <Scene key='Home' component={Home} title='Home' initial={true}  panHandlers={null}/>
                                    <Scene key='Teams' component={Teams} title='Teams' initial={false} />
                                </Scene>
                                <Scene key="tab2" title="Photos" tabBarLabel="Photos" icon={PhotosTabIcon}>
                                    <Scene key='Photos' component={Photos} title='Photos' back backTitle='Back' initial={false} />
                                    <Scene key='SinglePhoto' component={SinglePhoto} title='' back backTitle='Back' initial={false} />
                                </Scene>
                                <Scene key="tab3" title="Site Diary" tabBarLabel="Site Diary" icon={SiteDiaryTabIcon}>
                                    <Scene key='SiteDiary' component={SiteDiary} title='SiteDiary' initial={false} />
                                </Scene>
                            </Scene>
                        </Scene>
                    </ConnectedRouter>
                </Provider>
                <MessageBar/>
            </View>