How to implement Tabs inside a component with react-native-router-flux

Question

I'm trying to implement Tabs Navigation inside one of my component in React Native. I have a drawer that wraps some components, but I want the tabs navigation inside only one of the components. This is my Router/Scene structure

Router.js

import React from 'react';
import { Router, Scene, Drawer, Tabs } from 'react-native-router-flux';

import About from './components/About';
import Contact from './components/Contact';
import Home from './components/Home';
import SideBar from './components/SideBar';
import StoreOffers from './components/StoreOffers';


import Local from './components/Local';
import Snack from './components/Snack';
import Continental from './components/Continental';


const RouterComponent = () => {
    return(
        <Router>
            <Scene key="root">
                <Drawer
                    open={false}
                    key="Drawer"
                    contentComponent={SideBar}
                    drawerWidth={300}
                    hideNavBar
                    drawerPosition="right"
                >
                    <Scene key="rootScene">
                        <Scene 
                            key="Home" 
                            component={Home}
                            title="What Would you like to order today ?"
                            initial
                            style={{fontSize: 10}}
                        />

                        <Scene 
                            key="About" 
                            component={About}
                            title="About"
                        />

                        <Scene 
                            key="Contact" 
                            component={Contact}
                            title="Contact US"
                        />
                    </Scene>
               </Drawer>

                <Scene
                    key="StoreOffers" 
                    component={StoreOffers}
                    title="What We Have Available"
                >
                    <Scene 
                        key="Tabs"
                        tabBarPosition="bottom"
                        tabs
                        
                    >
                        <Scene
                            key="Local" 
                            component={Local}
                            title="Local"
                            initial
                        />
                        <Scene
                            key="Snack" 
                            component={Snack}
                            title="Snack"
                            initial
                        />
                    </Scene>
                </Scene>


            </Scene>
        </Router>
    )
}

export default RouterComponent;

Inside my component Store Offer, how do I display the tabs there?

Answer 1

For me it worked like that, I wrapped the component I want with <Tabs> and the every scene inside Tabs should be wrapped with another <Scene>.

import React from 'react';
import { Router, Scene, Drawer, Tabs } from 'react-native-router-flux';

import About from './components/About';
import Contact from './components/Contact';
import Home from './components/Home';
import SideBar from './components/SideBar';
import StoreOffers from './components/StoreOffers';


import Local from './components/Local';
import Snack from './components/Snack';
import Continental from './components/Continental';


const RouterComponent = () => {
    return(
        <Router>
            <Scene key="root">
                <Drawer
                    open={false}
                    key="Drawer"
                    contentComponent={SideBar}
                    drawerWidth={300}
                    hideNavBar
                    drawerPosition="right"
                >
                    <Scene key="rootScene">
                        <Tabs tabs lazy swipeEnabled tabBarPosition="top" tabBarComponent={() => null}>
                           <Scene key="homeScene" type={ActionConst.PUSH}>
                              <Scene 
                                  key="Home" 
                                  component={Home}
                                  title="What Would you like to order today ?"
                                  initial
                                  style={{fontSize: 10}}
                              />
                           </Scene>
                           <Scene key="homeScene" type={ActionConst.PUSH}>
                              <Scene 
                                  key="otherSceneInsideTab"
                                  component={OtherComponent}
                              />
                           </Scene>
                        </Tabs>


                        <Scene 
                            key="About" 
                            component={About}
                            title="About"
                        />

                        <Scene 
                            key="Contact" 
                            component={Contact}
                            title="Contact US"
                        />
                    </Scene>
               </Drawer>

                <Scene
                    key="StoreOffers" 
                    component={StoreOffers}
                    title="What We Have Available"
                >
                    <Scene 
                        key="Tabs"
                        tabBarPosition="bottom"
                        tabs
                        
                    >
                        <Scene
                            key="Local" 
                            component={Local}
                            title="Local"
                            initial
                        />
                        <Scene
                            key="Snack" 
                            component={Snack}
                            title="Snack"
                            initial
                        />
                    </Scene>
                </Scene>


            </Scene>
        </Router>
    )
}

export default RouterComponent;