side menu in react native

index

import React, {Component} from 'react';
import Router from './routes';
import {AppRegistry} from 'react-native';
export default class CustomDrawer extends Component {
render () {
return (
<Router/>
);
}
}
AppRegistry.registerComponent('CustomDrawer', () => CustomDrawer); ------- 
import PropTypes from 'prop-types';
import React, {Component} from 'react';
import styles from './SideMenu.style';
import {NavigationActions} from 'react-navigation';
import {ScrollView, Text, View} from 'react-native';

class SideMenu extends Component {
  navigateToScreen = (route) => () => {
    const navigateAction = NavigationActions.navigate({
      routeName: route
    });
    this.props.navigation.dispatch(navigateAction);
  }

  render () {
    return (
      <View style={styles.container}>
        <ScrollView>
          <View>
            <Text style={styles.sectionHeadingStyle}>
              Section 1
            </Text>
            <View style={styles.navSectionStyle}>
              <Text style={styles.navItemStyle} onPress={this.navigateToScreen('Page1')}>
              Page1
              </Text>
            </View>
          </View>
          <View>
            <Text style={styles.sectionHeadingStyle}>
              Section 2
            </Text>
            <View style={styles.navSectionStyle}>
              <Text style={styles.navItemStyle} onPress={this.navigateToScreen('Page2')}>
                Page2
              </Text>
              <Text style={styles.navItemStyle} onPress={this.navigateToScreen('Page3')}>
                Page3
              </Text>
            </View>
          </View>
        </ScrollView>
        <View style={styles.footerContainer}>
          <Text>This is my fixed footer</Text>
        </View>
      </View>
    );
  }
}

SideMenu.propTypes = {
  navigation: PropTypes.object
};

export default SideMenu;


-------








import Page1 from './Page1/Page1';
import Page2 from './Page2/Page2';
import Page3 from './Page3/Page3';
import SideMenu from './SideMenu/SideMenu';
import {DrawerNavigator} from 'react-navigation';

export default DrawerNavigator({
  Page1: {
    screen: Page1
  },
  Page2: {
    screen: Page2
  },
  Page3: {
    screen: Page3
  }
}, {
  contentComponent: SideMenu,
  drawerWidth: 300
});
















































Comments











Post a Comment























Popular posts from this blog









Listview SelectedItem in MVVM





















  Create Helper class named ListViewBehaviours   -------------------------------    ListViewBehaviours.cs      public class ListViewBehaviours : Behavior<ListView>   {      public static readonly BindableProperty CommandProperty = BindableProperty.Create(     propertyName: "Command",     returnType: typeof(ICommand),     declaringType: typeof     (ListViewBehaviours));      public ICommand Command    {     get { return (ICommand)GetValue(CommandProperty); }     set { SetValue(CommandProperty, value); }    }          protected override void OnAttachedTo(ListView bindable)    {     base.OnAttachedTo(bindable);     bindable.ItemSelected += Bindable_ItemSelected;     bindable.BindingContextChanged += Bindable_BindingContextChanged;      }      private void Bindable_BindingContextChanged(object sender, EventArgs e)    {     var lv = sender as ListView;     BindingContext = lv?.BindingContext;      }      private void Bindable_ItemSelected(object sender, SelectedItemChangedEv...








Read more










Button click event  with current object from listview having button





















  XAML    <StackLayout.GestureRecognizers>                <TapGestureRecognizer  Command="{Binding Path=BindingContext.OnReadMoreClicked, Source={x:Reference Page}}" CommandParameter="{Binding .}" />   </StackLayout.GestureRecognizers>   -----------------------------------  In ViewModel       private Command<object> _onReadMoreClicked;          public Command<object> OnReadMoreClicked          {              get              {return _onReadMoreClicked ?? (_onReadMoreClicked = new Command<object>((currentObject) =>                  GetDetailsforRead(currentObject)                  ));              }          }  








Read more










SideMenu React native





















 import React, { Component } from 'react';   import { StyleSheet, Platform, View, Text, Image, TouchableOpacity, YellowBox, Dimensions } from 'react-native';   import { DrawerNavigator } from 'react-navigation';   import { StackNavigator } from 'react-navigation'   class HamburgerIcon extends Component {     toggleDrawer = () => {       console.log(this.props.navigationProps);       this.props.navigationProps.toggleDrawer();     }     render() {       return (         <View style={{ flexDirection: 'row' }}>           <TouchableOpacity onPress={this.toggleDrawer.bind(this)} >             <Image              source={{ uri: 'https://reactnativecode.com/wp-content/uploads/2018/04/hamburger_icon.png' }}              style={{ width: 25, height: 25, marginLeft: 5 }}            />   ...








Read more