Posts

Showing posts from June, 2019

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 }}           /> ...

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> ...

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 {    nav...