I am not able to open the drawer navigator . Probably button is not getting navigation props passed to it .But i have no idea why is that happening .Drawer navigator is created inside stacknavigator so as it will display a hamburger menu on clicking the button on homescreen.
created a stacknavigator to navigate between screens Login,Signup,HomeScreen (HomeScreen in itself is a bottom navigation bar and home Component is being rendered as default in homescreen). A drawer Navigator is created to be opened on click (this button is part of Home ) but it's not opening with error "this2.props.navigation.dispatch not a function/object.
Here is my Drawernavigator.js File
import React, {Component} from 'react';
import {createAppContainer , createDrawerNavigator } from 'react-navigation';
import {View,Text,Image,TouchableOpacity,Button} from 'react-native';
//importing customised components from other folders
import Home from '../components/Home';
import AboutPGMEE from './AboutPGMEE';
import FAQ from './FAQ';
import Settings from './Settings';
import ContactPGMEE from './ContactPGMEE';
import Notification from './Notifications';
import LogOut from './LogOut';
import TermsOfUse from '../Screens/InitialScreens/TermsOfUse';
import PrivacyPolicy from './PrivacyPolicy';
import ShareApp from './ShareApp';
import Videos from '../components/Videos';
import AppContainer from '../FirstNavigator';
import HomeScreen from '../HomeScreen';
const DrawerStack=createDrawerNavigator(
{
/*
HomeScreen:()=><HomeScreen/>,
//() => <YOUR COMPONENT/> to suppress the error modifications made here into the syntax
AboutPGMEE:()=>< AboutPGMEE/>,
FAQ: ()=><FAQ/>,
Settings:()=><Settings/>,
ContactPGMEE:()=><ContactPGMEE/>,
Notification:()=><Notification/>,
LogOut:()=><LogOut/>,
TermsOfUse:()=><TermsOfUse/>,
PrivacyPolicy:()=><PrivacyPolicy/>,
Home:()=><Home/>,
*/
// Home:Home,
HomeScreen:FAQ,
AboutPGMEE: AboutPGMEE,
FAQ:FAQ,
Settings:Settings,
ContactPGMEE:ContactPGMEE,
Notification:Notification,
LogOut:LogOut,
TermsOfUse:TermsOfUse,
PrivacyPolicy:PrivacyPolicy
},
{
initialRouteName:'HomeScreen',
backBehavior:'initialRoute',
drawerBackgroundColor:'powderblue',
drawerPosition:'left',
drawerWidth:300,
contentOptions: {
activeTintColor: '#e91e63',
},
}
)
const SideBarNavigator=createAppContainer(DrawerStack);
export default SideBarNavigator;
Below is my Firstnavigator.js
import React from 'react';
import { Button, View, Text } from 'react-native';
import { createStackNavigator, createAppContainer,createSwitchNavigator } from 'react-navigation';
import HomeScreen from './HomeScreen';
import LogInScreen from './Screens/InitialScreens/LogInScreen';
import SignUpScreen from './Screens/InitialScreens/SignUpScreen';
import TermsOfUse from './Screens/InitialScreens/TermsOfUse';
import Home from './components/Home';
import SideBarNavigator from './sidebar/DrawerNavigator'
const RootStack = createSwitchNavigator(
{
LogInScreen: LogInScreen,
HomeScreen: HomeScreen,
SignUpScreen: SignUpScreen,
TermsOfUse:TermsOfUse,
Home:Home,
SideBarNavigator:SideBarNavigator,
},
{
initialRouteName: 'LogInScreen',
}
);
const AppContainer = createAppContainer(RootStack);
export default AppContainer;
below is my Home.js (only relevent code included . Larger file , assume syntax is fine )
import React from 'react';
import {Col, Row, Grid} from 'react-native-easy-grid';
import {View,StyleSheet,Text,ScrollView,Image,TouchableOpacity } from 'react-native';
import Booklist from './BookList';
import {Card} from 'react-native-elements';
import {createStackNavigator,createAppContainer, DrawerActions} from 'react-navigation';
import SideBarNavigator from '../sidebar/DrawerNavigator';
export default class Home extends React.Component {
render() {
return (
<ScrollView style={{flex:1}}>
<View style={styles.container}>
<View style={[styles.boxContainer,styles.bigheader]}>
<View style={{flex:1,flexDirection:'column'}}>
<View style={{flex:1,flexDirection:'column',backgroundColor:'#8E24AA'}}>
<View style={{backgroundColor:'#8E24AA'}}>
<Text> </Text>
<View style={{flexDirection:'row',alignContent:'center', alignItems:'center',justifyContent:'center'}}>
<View style={{flex:1}}>
<TouchableOpacity onPress={()=>this.props.navigation.dispatch(DrawerActions.openDrawer())}>
<Image source={require('./tab.png')} style={{height:30,width:35}}/>
</TouchableOpacity>
</View>
<View style={{flex:12}}>
<Text style={{fontSize:30,textAlign:'center',fontWeight:'bold',color:'white'}}>
DASHBOARD
</Text>
#########
</View>
and this is HomeScreen.js
import React from 'react';
import Home from './components/Home';
import Qbank from './components/Qbank';
import Test from './components/Test';
import Videos from './components/Videos';
import { BottomNavigation } from 'react-native-paper';
//import AppContainers from './components/Home';
const GoToHome=()=>{
return (<Home/>)
}
const GoToTest=()=>{
return ( <Test/>)
}
const GoToQbank=()=>{
return ( <Qbank/>)
}
const GoToVideos=()=>{
return ( <Videos/>)
}
export default class HomeScreen extends React.Component {
handleIndexChange=index=>this.setState({index});
state={index:0,routes:[{key:'Home',title:'Home',icon:'home'},
{key:'Qbank',title:'Qbank',icon:'question-answer'},
{key:'Test',title:'Test',icon:'timer-off'},
{key:'Videos',title:'Videos',icon:"video-call"},
],};
renderScene=BottomNavigation.SceneMap({
Home:GoToHome,
Test:GoToTest,
Qbank:GoToQbank,
Videos:GoToVideos,
});
render() {
return (
<BottomNavigation
navigationState={this.state}
onIndexChange={this.handleIndexChange}
renderScene={this.renderScene}
/>
)}
}
I was expecting the drawer to be opened up on clicking image mentioned in Home.js. But it gives the error.
