I adding image of screen, this work in part of screen. The Contacts screen need to be main page and not screen1 but its didn't work if i replace between them. I adding the code, in 'LogedInNavigator' have there TabNavigator and DrawerNavigator - the 'Contants' page initializing from TabNavigator and part two - Screen1 with the side menu it's from DrawerNavigator - maybe it's doing the problem?

LogedInNavigator.js

import.......
styles......

const LoggedInNavigator = TabNavigator(
  {
    Contacts: {screen: ContactScreen,},
    Chat: {screen: ChatScreen,},
    Dashbaord: {screen: DashbaordScreen,},
    Profile: {screen: ProfileScreen,},
    Search: {screen: SearchScreen,},
  }, 
  {
    initialRouteName: "Contacts", 
    tabBarPosition: "bottom",
    tabBarOptions: {
      showIcon: true,
      activeTintColor: 'white',
    }
  }
);

export default () => <LoggedInNavigator onNavigationStateChange={null} />

export const Drawer = DrawerNavigator ({
  Home:{
    screen: Screen1,
    navigationOptions: {
      drawer:{
        label: 'Home',
      },
    }
  },  
  Camera: {
    screen: Screen2,
    navigationOptions: {
      drawer:{
        label: 'Camera',
      },
    }
  }, 
}) 

Contants.js

class Contacts extends Component {
  ponentDidMount() {
    // TBD loggedin should e from login process and removed from here
    const { loggedIn, getContacts } = this.props;
    loggedIn(1);
    getContacts();
  }

  render() {
    const Router = createRouter( () => ({})); //IDAN 
    const { navigation, avatar, contacts } = this.props;
    return (
      <NavigationProvider router={Router}>
        <View style={{flex:1}}>
          <ContactView
            navigation={navigation}
            avatar={avatar}
            contacts={contacts}
          />
         <Drawer />
        </View>
      </NavigationProvider>
    );
  }
}

const mapStateToProps = (state) => {
  return (
    {
      avatar: state.user.user.avatar,
      contacts: state.contacts.contacts,
    }
  );
};

export default connect(mapStateToProps, { loggedIn, getContacts })(Contacts);

Help me please..

I adding image of screen, this work in part of screen. The Contacts screen need to be main page and not screen1 but its didn't work if i replace between them. I adding the code, in 'LogedInNavigator' have there TabNavigator and DrawerNavigator - the 'Contants' page initializing from TabNavigator and part two - Screen1 with the side menu it's from DrawerNavigator - maybe it's doing the problem?

LogedInNavigator.js

import.......
styles......

const LoggedInNavigator = TabNavigator(
  {
    Contacts: {screen: ContactScreen,},
    Chat: {screen: ChatScreen,},
    Dashbaord: {screen: DashbaordScreen,},
    Profile: {screen: ProfileScreen,},
    Search: {screen: SearchScreen,},
  }, 
  {
    initialRouteName: "Contacts", 
    tabBarPosition: "bottom",
    tabBarOptions: {
      showIcon: true,
      activeTintColor: 'white',
    }
  }
);

export default () => <LoggedInNavigator onNavigationStateChange={null} />

export const Drawer = DrawerNavigator ({
  Home:{
    screen: Screen1,
    navigationOptions: {
      drawer:{
        label: 'Home',
      },
    }
  },  
  Camera: {
    screen: Screen2,
    navigationOptions: {
      drawer:{
        label: 'Camera',
      },
    }
  }, 
}) 

Contants.js

class Contacts extends Component {
  ponentDidMount() {
    // TBD loggedin should e from login process and removed from here
    const { loggedIn, getContacts } = this.props;
    loggedIn(1);
    getContacts();
  }

  render() {
    const Router = createRouter( () => ({})); //IDAN 
    const { navigation, avatar, contacts } = this.props;
    return (
      <NavigationProvider router={Router}>
        <View style={{flex:1}}>
          <ContactView
            navigation={navigation}
            avatar={avatar}
            contacts={contacts}
          />
         <Drawer />
        </View>
      </NavigationProvider>
    );
  }
}

const mapStateToProps = (state) => {
  return (
    {
      avatar: state.user.user.avatar,
      contacts: state.contacts.contacts,
    }
  );
};

export default connect(mapStateToProps, { loggedIn, getContacts })(Contacts);

Help me please..

• javascript
• react-native
• navigation
• navigation-drawer
• side-menu

• if you want your drawer to cover full screen, you will probably need to make a custom ponent for a drawer – Eduard Commented Nov 17, 2017 at 8:18
• And what be in this ponent? i need the Contacts page in main page.. – Idan Commented Nov 17, 2017 at 8:34
• whatever you need, check the official docs of react-navigation – Eduard Commented Nov 17, 2017 at 8:56
• what i can do to connect the Contacts page ? the TabNavigator initial page and DrawerNavigator initail too. – Idan Commented Nov 17, 2017 at 14:01

4 Answers 4

After a while, i want to answer on my own question (with react-navigation v2) everything inside <RootNavigator/>

const RootNavigator= createDrawerNavigator({ Tabs }, {
    contentComponent: SideMenu,
    drawerWidth: Dimensions.get('window').width * .75,
})

SideMenu:

class SideMenu extends Component {
   render() {
        return ( //...your side menu view )
   }
}

Tab:

export default createBottomTabNavigator({
    Menu: {
        screen: HomeStack,
        navigationOptions: {
            title: 'תפריט',
            tabBarIcon: ({ focused, tintColor }) => {
                return <Icon name={'home'} size={20} color={tintColor} />;
            },
        }
    },
    Dashboard: {
        screen: DashboardStack,
        navigationOptions: {
            title: 'בית',
            tabBarOnPress: ({ navigation, defaultHandler }) => handleTabPress(navigation, defaultHandler),
            tabBarIcon: ({ focused, tintColor }) => {
                return <Icon name={'dashboard'} size={20} color={'green'} />;
            },
        }
    },
    QuickView: {
        screen: QuickNav,
        navigationOptions: {
            title: 'מבט מהיר',
            tabBarIcon: ({ focused, tintColor }) => {
                return <Icon name={'short-list'} size={20} color={tintColor} />;
            },
        },
    },
    Chat: {
        screen: Chat,
        navigationOptions: {
            title: "צ'אט",
            tabBarIcon: ({ focused, tintColor }) => {
                return <Icon name={'chat'} size={20} color={tintColor} />;
            },
        },
    },
},
    {
        initialRouteName: 'Dashboard',
        tabBarOptions: {
            activeTintColor: 'green',
            labelStyle: {
                fontSize: 16,
                marginBottom: 3,
            },
        },
    },
)

For v5 onwards you can use drawer style

import deviceInfoModule from 'react-native-device-info';


 <Drawer.Navigator
          drawerStyle={{
            width: deviceInfoModule.isTablet()
              ? Dimensions.get('window').width * 0.55
              : Dimensions.get('window').width * 0.7,
          }}

In react-navigation version 6, you can use the drawerStyle in the screenOptions prop in the Drawer.Navigator ponent to change the width and add styles. This applies the applied style to all screens in the navigator.

<Drawer.Navigator
  screenOptions: {{
    drawerStyle: {
      width: 240
    }
  }}
>

If you want the drawer to cover the entire screen, then import Dimensions from the react-native library and use Dimensions.get('window').width

import { Dimensions } from 'react-native'

<Drawer.Navigator
  screenOptions: {{
    drawerStyle: {
      width: Dimensions.get('window').width
    }
  }}
>

Refer to react-navigation drawer for more.

You can set the drawer width using Dimensions width. See the docs here

https://reactnavigation/docs/navigators/drawer

import { Dimensions } from 'react-native';

...

const { width } = Dimensions.get('screen');

...

export const Drawer = DrawerNavigator (
{
  Home:{
    screen: Screen1,
    navigationOptions: {
      drawer:{
        label: 'Home',
      },
    }
  },  
  Camera: {
    screen: Screen2,
    navigationOptions: {
      drawer:{
        label: 'Camera',
      },
    }
  }, 
},
{
  drawerWidth: width
});