How to create a Drawer Component and adding it to multiple screens - react-native

Question

Hi i want to create a component by using a createDrawerNavigator, and want to add it all screens could you help me.

Answer 1

In the below example don't copy all the syntax understand the concept from my explanation I have configured redux and many other imports you may not need so configure and include content in below files as you need.
File name - BurgerMenu.js
import React, { Component } from "react";
import SideBar from "./SideBar.js";
import News from "../../Containers/News"; // import your screens instead
import Copyright from '../../Containers/Gallery' // import your screens instead
import { DrawerNavigator } from "react-navigation";
const BurgerMenu = DrawerNavigator(
{
News: { screen: News },
RulesOfUse: { screen: RulesOfUse },
Copyright: { screen: Copyright }
},
{
contentComponent: props => <SideBar {...props} />
}
);
export default BurgerMenu;
File name - SideBar.js
In this file specify the layout, any actions like navigation, api call etc of drawer as you want which is imported to above BurgerMenu.js file
/*
SideBar.js
Component used to render contents of SideBar
*/
import React from 'react';
import { View, Modal, Text, Linking } from 'react-native';
const {
modalBackground,
topContentStyle,
bottomContentStyle
} = styles;
class SideBar extends React.Component {
constructor(props) {
super(props);
this.state = {
};
}
componentDidMount() {
}
render() {
return (
<View
elevation={5}
style={modalBackground}
>
</View>
);
}
}
export default SideBar;
And in the App.js import Burgermenu.js to StackNavigator
import React, { Component } from 'react'
import { Provider } from 'react-redux';
import { StackNavigator } from 'react-navigation';
import Splash from './src/App/Containers/Splash';
import Login from './src/App/Containers/Login';
import InformationPage from './src/App/Containers/Gallery'
import BurgerMenu from './src/App/Components/BurgerMenu/index'
import configureStore from './src/RNRedux/ConfigureStore';
// Manifest of possible screens
const PrimaryNav = StackNavigator({
Splash: { screen: Splash },
Login: { screen: Login },
Home: { screen: BurgerMenu },
InformationPage: { screen: InformationPage }
}, {
// Default config for all screens
headerMode: 'none',
initialRouteName: 'Splash',
});
export default class App extends Component {
constructor(props) {
super(props);
this.state = {
channelId: ""
};
this.store = configureStore();
}
componentDidMount() {
}
componentWillMount() {
}
render() {
return (
<Provider store={this.store}>
<PrimaryNav />
</Provider>
);
}
}
Just open the burger menu from any the screens imported to BurgerMenu.js
In my example you can open it from news.js and gallery.js which are imported to BurgerMenu.js.
Just use below functions for open and close
openBurgerMenu() {
this.props.navigation.openDrawer();
}
closeBurgerMenu() {
this.props.navigation.closeDrawer();
}