How to make navigation inside react-native-drawer using react-native-router-flux

Question

I have created drawer using react-native-drawer. drawer View contains ListView. Whenever click the renderRow method need to show navigation inside the drawer itself instead of top of the Welcome screen stack.

Right now: Check the Screenshot here

Expected: want to achieve something like this - Multi Level Menu

File: Component/welcome.js

render(){
  var settingPanel = <Setting closeDrawer={ () => {
    this.drawer.close();
  }} />
  return(
     <Drawer
       ref={c => this.drawer = c}
       type='overlay'
       content={settingPanel}
       ...>
        <Home />
     </Drawer>
  );
}

File: Component/setting.js

render(){
  return(
    <ListView
     dataSource={this.state.dataSource}
     renderRow={this.renderRow.bind(this)}
    />
  );
}

renderRow (items) {
    return(
        <View>
            <Text style={styles.rowText}>{items.name}</Text>
            <ImageButton onPress={Actions.trans()} img={fb} />
        </View>
    )
};

Its navigating on top of the Welcome screen. I need to navigate on the drawer itself. How could I achieve this?

Answer 1

from it's documentation here

options to open drawer Three options:

1. Use the open prop (controlled mode):

   <Drawer
     open={true}
   

2. Using the Drawer Ref:

   // assuming ref is set up on the drawer as (ref) => this._drawer = ref
   onPress={() => {this._drawer.open()}}
   

3. Using Context

   contextTypes = {drawer: React.PropTypes.object}
   // later...
   this.context.drawer.open()
   

then to navigate to another component using react-native-router-flux you can add a TouchableOpacity component insted of <home /> then in onPress add actions.home() and home is the key of react-native-router-flux scene component