javascriptreact-nativenavigationnavigation-drawerside-menu

Side menu not covering all screen (DrawerNavigator - React Native)


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? enter image description here

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 {
  componentDidMount() {
    // TBD loggedin should come 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..


Solution

  • 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,
                },
            },
        },
    )