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 });