Want to open two separate menus in my app?

Asked

Viewed 31 times

0

I have a tab that opens my drawer:

<Tab NavMenu={() => this.props.navigation.openDrawer()}
     NavProfile={() => this.toggleOpenProfile()} 
/>

In my navigation it’s like this

const AppDrawer = createDrawerNavigator(
{
    App: AppStack
},
{
    contentComponent: MenuComponent,
        drawerWidth: 290,
    },
);

const Navigator = createSwitchNavigator(
{
    AuthLoading: AuthLoadingScreen,
    App: AppDrawer,
    Auth: AuthStack,
},
{
    initialRouteName: 'AuthLoading',
});

When you click on mine profile, i want to open a new type of menu this is possible?

react react-native react-navigation

  • Yes it is possible, but, the problem of your question that you should have put a minimal example only with these codes becomes complicated to say any answer ... Set a mini example and edit your question

1 answer

0


import { createStackNavigator, createAppContainer, createSwitchNavigator, createDrawerNavigator } from 'react-navigation';

import LoginScreen from './screens/LoginScreen';
import RegisterScreen from './screens/RegisterScreen';
import HomeScreen from './screens/HomeScreen';
import MenuScreen from './screens/MenuScreen';
import ProfileScreen from './screens/ProfileScreen';
import PostScreen from './screens/PostScreen';
import MenuComponent from './components/MenuComponent';
import ProfileComponent from './components/ProfileComponent';

import AuthLoadingScreen from './utils/AuthLoading';

// Screens when user is logged
const AppStack = createStackNavigator(
    {
        Home: HomeScreen,
        Menu: MenuScreen,
        Post: PostScreen,
    },
    {
        headerMode: 'none',
        navigationOptions: {
            headerVisible: false,
        },
    }
);
const AppProfile = createStackNavigator(
    {
        Profile: ProfileScreen,
    },
    {
        headerMode: 'none',
        navigationOptions: {
            headerVisible: false,
        },
    }
);

// Screens when user is not logged
const AuthStack = createStackNavigator(
    {
        Login: LoginScreen,
        Register: RegisterScreen,
    },
    {
        headerMode: 'none',
        navigationOptions: {
            headerVisible: false,
        },
    }
);

const AppDrawer = createDrawerNavigator(
    {
        App: AppStack
    },
    {
        contentComponent: MenuComponent,
        drawerWidth: 290,
    },
);

const ProfileDrawer = createDrawerNavigator(
    {
        App: AppProfile
    },
    {
        contentComponent: ProfileComponent,
        drawerWidth: 290,
    },
);

const Navigator = createSwitchNavigator(
    {
        AuthLoading: AuthLoadingScreen,
        App: AppDrawer,
        Auth: AuthStack,
        App2: ProfileDrawer,
    },
    {
        initialRouteName: 'AuthLoading',
    }
);

export default Navigator;

Browser other questions tagged react react-native react-navigation

You are not signed in. Login or sign up in order to post.