CODEWITHSUNDEEP
iosreact-nativereact-native-router-flux
Bikram Thapa
Bikram Thapa

Reputation: 1339

Make scene available in other tabs - React Native Router Flux

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?

Upvotes: 1

Views: 672

Answers (1)

Mohammad Abbas
Mohammad Abbas

Reputation: 574

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.

Upvotes: 4

Related Questions