react native - how to use stackNavigator and Drawe

Question

I am trying to use react native DrawerNavigator and StackNavigator together but for some reason I can't make it work.

Below is my code:

import {DrawerNavigator,StackNavigator, } from 'react-navigation'

class App extends Component {
  render(){
    return(
      <View style={{flex:1,backgroundColor:'transparent'}}>
        <AppStackNavigator/>
        <AppDrawerNavigator/>
       </View>
    )
  }
}

const AppDrawerNavigator = DrawerNavigator({
  Home:HomeScreen,
  Price:PriceScreen,
  Info:InfoScreen,
  Login:LoginScreen
})

const  AppStackNavigator = StackNavigator({
  Home:HomeScreen,
  Price:PriceScreen,
  Info:InfoScreen,
  Login:LoginScreen
})

export default App

When I run this code my app screen is split into half, top have shows stackNavigator screen and the bottom half shows DrawerNavigator screen. Is there a way I can make these two work together?

Also, what is the difference between stackNavigator and createStack Navigator? I don't see the diffence when I run these.

Answer 1

You need to nest the Navigators to get the result you are asking for. For example if you want a stack navigation inside one of the screens in your drawer navigation you can do this:

import {DrawerNavigator, StackNavigator} from 'react-navigation'
class App extends Component {
    render() {
        return (
            <View style={{ flex: 1, backgroundColor: 'transparent' }}>
                <AppDrawerNavigator />
            </View>
        )
    }
}

const AppStackNavigator = StackNavigator({
    Home: HomeScreen,
    Price: PriceScreen,
    Info: InfoScreen,
    Login: LoginScreen
})

const AppDrawerNavigator = DrawerNavigator({
    Home: AppStackNavigator,
    // Price: PriceScreen,
    // Info: InfoScreen,
    // Login: LoginScreen
})

 export default App

The important part is

const AppDrawerNavigator = DrawerNavigator({
    Home: AppStackNavigator, <--- This
    // Price: PriceScreen,
    // Info: InfoScreen,
    // Login: LoginScreen
})

Now the "Home" Screen in your Drawer Navigation has the ability to use the stack navigation. You can do this for the others screens as well.