Drawer Navigation with Custom Side Menu — React Native

—————————
Primary nav

import React, { Component } from 'react';
import { AppRegistry, Dimensions } from 'react-native';
import { DrawerNavigator } from 'react-navigation';

import SideMenu from './SideMenu/SideMenu'
import stackNav from './app/stacknav';

const drawernav = DrawerNavigator({
  Item1: {
      screen: stackNav,
    }
  }, {
    contentComponent: SideMenu,
    drawerWidth: Dimensions.get('window').width - 120,  
});

AppRegistry.registerComponent('Demo', () => drawernav);




———————
SideMenu
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';
import { StackNavigator } from 'react-navigation';

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>
          <View>
            <Text style={styles.sectionHeadingStyle}>
              Section 3
            </Text>
            <View style={styles.navSectionStyle}>
              <Text style={styles.navItemStyle} onPress={this.navigateToScreen('Page4')}>
              Page4
              </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;
————————————————

SideMenu.Styles

export default {
  container: {
    paddingTop: 20,
    flex: 1
  },
  navItemStyle: {
    padding: 10
  },
  navSectionStyle: {
    backgroundColor: 'lightgrey'
  },
  sectionHeadingStyle: {
    paddingVertical: 10,
    paddingHorizontal: 5
  },
  footerContainer: {
    padding: 20,
    backgroundColor: 'lightgrey'
  }
};
————————————
stacknav


import React, { Component } from 'react';
import {
  Platform,
  StyleSheet,
  Text,
  View, TouchableOpacity
} from 'react-native';

import { StackNavigator } from  'react-navigation';
import IOSIcon from "react-native-vector-icons/Ionicons";
import MainScreen from "./MainScreen";
import DetailScreen from "./DetailScreen";

const stackNav = StackNavigator({
  Main : {
    screen: MainScreen,
    navigationOptions: ({navigation}) => ({
      title: "Main",
      headerLeft:(<TouchableOpacity onPress={() => navigation.navigate("DrawerOpen")}>
                    <IOSIcon name="ios-menu" size={30} />
                  </TouchableOpacity>
      ),
      headerStyle: { paddingRight: 10, paddingLeft: 15 }
    })
  },
  Detail: {
    screen: DetailScreen,
    navigationOptions: ({navigation}) => ({
      title: "Detail",
    })     
  }
});

export default stackNav;
———————————————

MainScreen

import React, {Component} from 'react';
import {
  Text,
  View,
  StyleSheet,
  Button
} from 'react-native';

class MainScreen extends Component {
  render () {
    return (
      <View style={styles.container}>
        <Text>Main</Text>
        <Button onPress={() => this.props.navigation.navigate("Detail")} title="Detail Page" />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
      flex: 1,
      justifyContent: 'center',
      alignItems: 'center'
  }
});

export default MainScreen;


————————

import React, {Component} from 'react';
import {
  Text,
  View,
  StyleSheet
} from 'react-native';

class DetailScreen extends Component {
  render () {
    return (
      <View style={styles.container}>
        <Text>Detail Screen</Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
      flex: 1,
      justifyContent: 'center',
      alignItems: 'center'
  }
});

export default DetailScreen;

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