CODEWITHSUNDEEP
navigation-drawerreact-nativereact-navigationstack-navigator
Ayan
Ayan

Reputation: 2918

Nesting Stack Navigator with Drawer Navigator

I am trying to have stack navigation along with drawer navigation. Basically I want the drawer to be in only one scene all time. I have tried to do so but nothing occurs. I am not being able to understand what I am doing wrong.

P.S: I am new to react-native.

ConversationListScreen.js

import React, { Component } from 'react';
import {
    View,
    Text,
    Button,
    TouchableNativeFeedback,
    Alert,
} from 'react-native';
import Icon from 'react-native-vector-icons/MaterialIcons';
import styles from './styles';

export default class ConversationListScreen extends Component
{
    static navigationOptions = {
        title: 'Hola',
        headerLeft: (
            <TouchableNativeFeedback onPress={() => Alert.alert('Hi!', 'I am a hamburger.')}>
                <View style={styles.toolBackground}>
                    <Icon name="menu" style={ styles.menuIcon }/>
                </View>
            </TouchableNativeFeedback>
        ),
        headerRight: (
            <TouchableNativeFeedback onPress={() => Alert.alert('Hi!', 'What you want to search?')}>
                <View style={styles.toolBackground}>
                    <Icon name="search" style={ styles.searchIcon }/>
                </View>
            </TouchableNativeFeedback>
        )
    };
    render() {
        return (
            <View>
            </View>
        );
    }
}

Drawer.js

import React, { Component } from 'react';
import {
    View,
    Text,
} from 'react-native';

export default class SideNav extends Component
{
    render() {
        return (
            <View>
                <Text>My first Drawer</Text>
            </View>
        );
    }
}

RouteConfig.js

import { StackNavigator, DrawerNavigator } from 'react-navigation';
import ConversationListScreen from './ConversationListScreen';
import Drawer from './Drawer';
import ChatScreen from './ChatScreen';

export const SideNav = DrawerNavigator({
    Drawer: { screen: Drawer},
});

export const Hola = StackNavigator({
    ConversationList: { screen: ConversationListScreen },
    Drawer: { screen: SideNav },
    Chat: { screen: ChatScreen },
});

Upvotes: 0

Views: 2263

Answers (3)

Sinapcs
Sinapcs

Reputation: 2745

Here is a workaround. We have two screens in HomeScreenNavigator which is a stackNavigator. in firstScreen we have a link to secondScreen. in secondScreen we have drawerNavigator which has a screen named ComponentWidthDrawer. this component has a button to open drawer. I tested it and it's working.

class FirstComponent extends Component{
  render () {
    return (
      <View>
        <TouchableOpacity onPress={() => 
this.props.navigation.navigate("SecondScreen")}>
          <Text>Go to Second Component</Text>
        </TouchableOpacity>
      </View>
    )
  }
}
class ComponentWidthDrawer extends Component{
  render () {
    return (
      <View>
        <TouchableOpacity onPress={() => this.props.navigation.navigate("DrawerOpen")}>
          <Text>Open Menu</Text>
        </TouchableOpacity>
      </View>
    )
  }
}
const SecondComponent = DrawerNavigator({
  Drawer: {
    screen: ComponentWidthDrawer,
    navigationOptions: {
      drawerLabel: 'Videos'
    },
  }
})

const HomeScreenNavigator = StackNavigator(
  {
    FirstScreen : {
      screen: FirstComponent,
      navigationOptions:{
        header: false
      }
    },
    SecondScreen: {
      screen: SecondComponent,
      navigationOptions:{
        header: false
      }
    }
  }
);

Upvotes: 0

Sinapcs
Sinapcs

Reputation: 2745

I guess you can't use drawer navigator in stack navigator as a scene. you should import SideNav in the component you want to use and try to render it as a component

Upvotes: 0

Alexander Vitanov
Alexander Vitanov

Reputation: 4141

I had a similar issue and what I ended up doing was using this drawer component and wrapping it around the component you want to access it with. For example if you want to access it only from ConversationListScreen you export it as <Drawer><ConversationListScreen></Drawer>

Upvotes: 1

Related Questions