Make scene available in other tabs - React Native Router Flux

Question

I got my tabbar setup as follows:

<Router>
            <Stack key="root">
                <Scene
                    key="tabbar"
                    tabs
                    tabBarStyle={styles.tabBar}
                >
                    <Scene 
                        key="home" 
                        title="HOME"
                    >
                        <Scene 
                            key="home"
                            component={Home}
                        />
                        <Scene 
                            key="audioPlayer"
                            component={AudioPlayer}
                            title="AUDIO PLAYER"
                        />
                        <Scene 
                            key="notification"
                            component={Notification}
                            title="NOTIFICATIONS"
                        />

                        <Scene 
                            key="search"
                            component={Search}
                            title="SEARCH"
                        />

                    </Scene>                

                    <Scene 
                            key="latest"
                            title="LATEST"
                            component={Latest}
                    />

                    <Scene 
                            key="offline"
                            component={Offline}
                            title="OFFLINE"
                    />

                    <Scene
                        key="more"
                        component={More}
                        title="MORE"
                    />

                </Scene> 
            </Stack>
        </Router>

CASE :

I got 4 tabs named as : Home, Latest, Offline & More.

I can navigate to audioPlayer scene easily from Home tab.

 Actions.audioPlayer();

Because I have added audioPlayer scene inside that Home tab scene.

PROBLEM :

How to navigate to that audioPlayer scene inside of Home scene from the latest scene?

Any Suggestions. Should I have to add audioPlayer scene inside Latest scene for navigation?

Thanks.

P.S: I don't want to put that audioPlayer scene inside my latest tab. I don't know if that's the only solution.

UPDATE:

If I do ,

Actions.audioPlayer();

from latest tab , I am navigated to home tab and from there to audioPlayer scene.

I want to have that navigation inside of Latest tab . :)

UPDATE 2:

If I put audioPlayer scene outside of tabbar . I can navigate to audioPlayer scene like I want. But I got one problem. How can I get that bottom tabbar in that audioPlayer scene?

@WaheedAkhtar can you please write an answer or you have a link to example? — Bikram Thapa, Feb 20 '19 at 11:36
Did you try this? https://stackoverflow.com/questions/39206782/react-native-router-flux-navigate-from-main-scene-to-child — Waheed Akhtar, Feb 20 '19 at 11:39
@WaheedAkhtar on trying that I am moved to Home tab. What I want is , I want to be on the same tab and move to audioPlayer scene . Just like our native iOS. — Bikram Thapa, Feb 20 '19 at 11:43

Mohammad Abbas · Accepted Answer · 2019-02-28T22:22:52.083

Based on your second update (putting the audioPlayer scene outside of the tabs), try that approach while adding the prop clone to the AudioPlayer scene.

<Scene 
  key="audioPlayer"
  component={AudioPlayer}
  title="AUDIO PLAYER"
  clone
 />

Edit: To explain what clone does

From the docs

Scenes marked with clone will be treated as templates and cloned into the current scene's parent when pushed.

That means the pushed scene audioPlayer will be rendered using the parent tab scene as template thus rendering the tab buttons.

Make scene available in other tabs - React Native Router Flux

1 Answers1

Edit: To explain what clone does