CODEWITHSUNDEEP
clickside-menureact-native-navigation-v2
anna
anna

Reputation: 95

How navigate to a page from side menu in react native navigation Wix V2

I am new in react native. I want to navigate to a screen from side menu.I have used react-native-navigation Wix V2 library. I would be thankful if some one could help me with a simple example.

Upvotes: 0

Views: 509

Answers (2)

Mohsen Zia
Mohsen Zia

Reputation: 444

First you need to set ID for center stack of sideMenu. e.g.:

Navigation.events().registerAppLaunchedListener(() => {
Navigation.setRoot({
    root: {
        sideMenu: {
            right: {
                component: {
                    name: 'SideMenu',
                },
            },
            center: {
                stack: {
                    id: 'STACK_ROOT_ID',
                    children: [
                        {
                            component: {
                                name: 'Login',
                            },
                        },
                    ],
                },
            },
        },
    },
});

then in your side menu you can push your registered screen like this on onPress menu for example. like this:

Navigation.push('STACK_ROOT_ID', {
    component: {
        name: 'REGISTERED_SCREEN_NAME',
        options: {
            sideMenu: {
                right: {
                    visible: false,
                },
            },
        },
    },
});

Upvotes: 0

Husain Khanbahadur
Husain Khanbahadur

Reputation: 489

There is a builtin navigation for react native to use as it provides the react-native navigation (stack navigation). in that one can easily make the navigation from the side menu

// Below is the code for creating side menu. 

const RootDrawer = DrawerNavigator({
  demo: { screen: demo },
  demo2: { screen: demo2 },
  
}, {
  contentComponent: NavigationDrawer
})

// Below is the side menu view and the links provided for navigating from the screen.

 <TouchableOpacity onPress = {() => this.props.navigation.navigate('demo')}>
          <View style = {{height: responsiveHeight(8), justifyContent:'center'}}>
            <Text style = {{fontSize: responsiveFontSize(2), color: 'black', fontFamily: 'Nunito-Regular', paddingLeft: 30 }} >My Cart</Text>
          </View>
        </TouchableOpacity>
        
        {this.state.customer &&
          <TouchableOpacity onPress = {() => this.props.navigation.navigate('demo1')}>
                  <View style = {{height: responsiveHeight(8), justifyContent:'center'}}>
                    <Text style = {{fontSize: responsiveFontSize(2), color: 'black', fontFamily: 'Nunito-Regular', paddingLeft: 30 }} >Account</Text>
                  </View>
          </TouchableOpacity>}

Upvotes: -1

Related Questions