DrawerNavigator as Main Navigation

[oertels]

Hi there,

I've read the docs, but I don't understand how to build an app that contains a DrawerNavigator as Main navigation element, and which includes several StackedNavigators.

What I basically trying to achieve is a navigation tree like this:

DrawerNavigator
=> Screen 1
    => StackedNavigator
        => Screen 1.1
        => Screen 1.2
=> Screen 2
=> Screen 3

Could you give me a hint on how to implement this?

Thanks a lot!

[petroslafaz]

Hope this helps:

//  React imports
import React, { Component } from 'react';
import {
  AppRegistry,
  Text,
  Button,
  View
} from 'react-native';

// React navigation imports
import {
  StackNavigator,
  DrawerNavigator
} from 'react-navigation';

// Simple screens
const Screen11 = (props) => (
  <View>
    <Button
      title="Go to Screen12"
      onPress={() => props.navigation.navigate('Screen12')}
    />
    <Button
      onPress={() => props.navigation.navigate('DrawerOpen')}
      title="Open drawer"
    />
  </View>

)
Screen11.navigationOptions = {
  title:'Screen11',
}

const Screen12 = () => (
  <Text>Screen12</Text>
)
Screen12.navigationOptions = {
  title:'Screen12'
}
const Screen2 = () => (
  <Text>Screen2</Text>
)
const Screen3 = () => (
  <Text>Screen3</Text>
)

// Define our stack navigation
const Screen1Stack = StackNavigator({
  Screen11: {
    screen: Screen11,
  },
  Screen12: {
    screen: Screen12,
  },
});

const Screen2Stack = StackNavigator({
  Screen2: {
    screen: Screen2,
  }
});

const Screen3Stack = StackNavigator({
  Screen3: {
    screen: Screen3,
  }
});

// Define our main drawer navigation
const DrawerStack = DrawerNavigator({
  Screen1Stack: {
    screen: Screen1Stack,
  },
  Screen2Stack: {
    screen: Screen2Stack,
  },
  Screen3Stack: {
    screen: Screen3Stack,
  }
},

);

AppRegistry.registerComponent("Contour", () => DrawerStack);

[oertels]

Thank you, that looks great; one question about how to let the Drawer appear: Since the common way is to add a burger icon aside the title, I'm asking myself how to accomplish that, because as far as I see, it's not possible to add a custom icon to a stacked view, right?

[petroslafaz]

You're welcome. The header can be a function so you can do something like the following

MyScreen.navigationOptions = {
  title: 'Welcome',
  header: ({ navigate }) => ({
     left: <Image source={require("./menu.png")} onPress={() => navigate('DrawerOpen')} />,
  })
};

I have a small example that does this that you could refer to:
https://github.com/petroslafaz/Contour

[israel-tolu]

@petroslafaz in your stated example about the screen, in the drawer we have screen11, screen2Stack and screen3stack but the moment u navigate to screen12 then the screen 11 will be replaced with screen12 in the drawer, please is there a work around this ? I want the screen11 to remain in the drawer while I can still view screen12, am kinda new to reactnavigation incase if am not using the right words

[petroslafaz]

@israel-tolu Oh I see. I wasn't aware of this as I am making my own drawer view for my work. You might need to do this to fix it

// Define our drawer view as ours is a dummy screen
class DrawerView extends React.Component {
  render() {
    return (
     ....
    );
  }
}

const DrawerStack = DrawerNavigator({
  Main: {
    screen: SimpleStack,
  }},
  {
    contentComponent: DrawerView,
  }
);

[oertels]

Thanks a lot, works perfectly!

[j-mendez]

I get a attempted to update component TouchableOpacity error when DrawerNavigator is the initial stack.