React Native Drawer Navigator with Custom Sidebar Menu with Icons Tutorial

Drawer Navigator also known as Navigation drawer is one of the most useful infrastructure to hold activities in both android and iOS applications. Drawer Navigator manages all the screens into sequential way with a customized sidebar menu panel. We have already make a tutorial on Drawer Navigator but in our previous tutorial we haven’t create the customized sidebar menu panel so this tutorial is the second part of Drawer Navigator tutorial. In this tutorial we would going to create fully customized Drawer Navigator with Custom Sidebar Menu with Icons Tutorial in react native Android iOS Example.

Contents in this project Drawer Navigator with Custom Sidebar Menu with Icons React Native iOS Android Example Tutorial:

Note: Before getting started you need to read our previous tutorial on Drawer Navigator , In this tutorial i have explained all the contents or navigational drawer .

1. First step is to install the React Navigation library in our current react native project, This step is must because using the react navigation library we can use Drawer Navigator component in our current project including Activities. So open your current react native current project folder in command prompt(Terminal) and execute below command.

<br />
npm install –save react-navigation

1	npm install —save react–navigation

Screenshot:

Screenshot of CMD after successfully installed the library:

2. Import StyleSheet, Platform, View, Text, Image, TouchableOpacity, YellowBox and Dimensions component in your project.

<br />
import React, { Component } from ‘react’;</p>
<p>import { StyleSheet, Platform, View, Text, Image, TouchableOpacity, YellowBox, Dimensions } from ‘react-native’;

import React, { Component } from ‘react’;

import { StyleSheet, Platform, View, Text, Image, TouchableOpacity, YellowBox, Dimensions } from ‘react-native’;

3. Import DrawerNavigator component from react navigation library.

<br />
import { DrawerNavigator } from ‘react-navigation’;

1	import { DrawerNavigator } from ‘react-navigation’;

4. Import StackNavigator component from react navigation library into your project. Without the StackNavigator we cannot use the multiple activities into your project.

<br />
import { StackNavigator } from ‘react-navigation’

1	import { StackNavigator } from ‘react-navigation’

5. Create a new class in your App.js file named as HamburgerIcon . This class is used to put a Hamburger Icon into our navigational drawer.

toggleDrawer : This function is used to open and close the drawer navigator with its own this.props.navigationProps.toggleDrawer() inbuilt function.

<br />
class HamburgerIcon extends Component {</p>
<p>  toggleDrawer = () => {</p>
<p>    console.log(this.props.navigationProps);</p>
<p>    this.props.navigationProps.toggleDrawer();</p>
<p>  }</p>
<p>  render() {</p>
<p>    return (</p>
<p>      <View style={{ flexDirection: ‘row’ }}></p>
<p>        <TouchableOpacity onPress={this.toggleDrawer.bind(this)} ></p>
<p>          <Image<br />
            source={{ uri: ‘/wp-content/uploads/2018/04/hamburger_icon.png’ }}<br />
            style={{ width: 25, height: 25, marginLeft: 5 }}<br />
          /></p>
<p>        </TouchableOpacity></p>
<p>      </View></p>
<p>    );</p>
<p>  }<br />
}

class HamburgerIcon extends Component {

toggleDrawer = () => {

console.log(this.props.navigationProps);

this.props.navigationProps.toggleDrawer();

}

render() {

return (

<Image

source={{ uri: ‘/wp-content/uploads/2018/04/hamburger_icon.png’ }}

style={{ width: 25, height: 25, marginLeft: 5 }}

</TouchableOpacity>

</View>

);

}

6. Create a class named as Custom_Side_Menu . This class is our main drawer navigator side menus class, Inside this class we are creating all the menus we have wanted to show inside the side panel. If you want to modify the menus structure as your requirement then simply edit this class and put your design inside render’s return block.

this.props.navigation.navigate(”) : We are calling this inbuilt function on each menu item clicked, as you can see we pass a argument inside this function as First , Second and Third which would represents as our all 3 activities.

<br />
class Custom_Side_Menu extends Component {</p>
<p>  render() {</p>
<p>    return (</p>
<p>      <View style={styles.sideMenuContainer}></p>
<p>        <Image source={{ uri: ‘/wp-content/uploads/2017/10/Guitar.jpg’ }}<br />
          style={styles.sideMenuProfileIcon} /></p>
<p>        <View style={{ width: ‘100%’, height: 1, backgroundColor: ‘#e2e2e2’, marginTop: 15}} /></p>
<p>        <View style={{width: ‘100%’}}></p>
<p>            <View style={{flexDirection: ‘row’, alignItems: ‘center’, marginTop: 10}}></p>
<p>              <Image source={{ uri: ‘/wp-content/uploads/2018/08/social.jpg’ }}<br />
              style={styles.sideMenuIcon} /></p>
<p>              <Text style={styles.menuText} onPress={() => { this.props.navigation.navigate(‘First’) }} > First Activity </Text></p>
<p>            </View></p>
<p>            <View style={{flexDirection: ‘row’, alignItems: ‘center’, marginTop: 10}}></p>
<p>              <Image source={{ uri: ‘/wp-content/uploads/2018/08/promotions.jpg’ }}<br />
              style={styles.sideMenuIcon} /></p>
<p>              <Text style={styles.menuText} onPress={() => { this.props.navigation.navigate(‘Second’) }} > Second Activity </Text></p>
<p>            </View></p>
<p>            <View style={{flexDirection: ‘row’, alignItems: ‘center’, marginTop: 10}}></p>
<p>              <Image source={{ uri: ‘/wp-content/uploads/2018/08/outbox.jpg’ }}<br />
              style={styles.sideMenuIcon} /></p>
<p>              <Text style={styles.menuText} onPress={() => { this.props.navigation.navigate(‘Third’) }} > Third Activity </Text></p>
<p>            </View></p>
<p>       </View></p>
<p>       <View style={{ width: ‘100%’, height: 1, backgroundColor: ‘#e2e2e2’, marginTop: 15}} /></p>
<p>      </View><br />
    );<br />
  }<br />
}

class Custom_Side_Menu extends Component {

render() {

return (

<Image source={{ uri: ‘/wp-content/uploads/2017/10/Guitar.jpg’ }}

style={styles.sideMenuProfileIcon} />

<Image source={{ uri: ‘/wp-content/uploads/2018/08/social.jpg’ }}

style={styles.sideMenuIcon} />

<Text style={styles.menuText} onPress={() => { this.props.navigation.navigate(‘First’) }} > First Activity </Text>

</View>

<Image source={{ uri: ‘/wp-content/uploads/2018/08/promotions.jpg’ }}

style={styles.sideMenuIcon} />

<Text style={styles.menuText} onPress={() => { this.props.navigation.navigate(‘Second’) }} > Second Activity </Text>

</View>

<Image source={{ uri: ‘/wp-content/uploads/2018/08/outbox.jpg’ }}

style={styles.sideMenuIcon} />

<Text style={styles.menuText} onPress={() => { this.props.navigation.navigate(‘Third’) }} > Third Activity </Text>

</View>

</View>

);

}

Screenshot of Side Menu panel:

7. Create a new Activity class named as MainActivity. This is our main home screen activity .

YellowBox.ignoreWarnings : This function is used to remove the yellow box warning messages from your react native application screen.

<br />
class MainActivity extends Component {</p>
<p>  constructor(props) {</p>
<p>    super(props);</p>
<p>    YellowBox.ignoreWarnings([<br />
      ‘Warning: componentWillMount is deprecated’,<br />
      ‘Warning: componentWillReceiveProps is deprecated’,<br />
    ]);</p>
<p>  }</p>
<p>  render() {<br />
    return (</p>
<p>      <View style={styles.MainContainer}></p>
<p>        <Text style={{ fontSize: 23 }}> This is Activity – 1 </Text></p>
<p>      </View><br />
    );<br />
  }<br />
}

class MainActivity extends Component {

constructor(props) {

super(props);

YellowBox.ignoreWarnings([

‘Warning: componentWillMount is deprecated’,

‘Warning: componentWillReceiveProps is deprecated’,

]);

}

render() {

return (

<Text style={{ fontSize: 23 }}> This is Activity – 1 </Text>

</View>

);

}

Screenshot of MainActivity:

8. Create a new class named as SecondActivity, This would be our second activity screen.

<br />
class SecondActivity extends Component {</p>
<p>  constructor(props) {</p>
<p>    super(props);</p>
<p>    YellowBox.ignoreWarnings([<br />
      ‘Warning: componentWillMount is deprecated’,<br />
      ‘Warning: componentWillReceiveProps is deprecated’,<br />
    ]);</p>
<p>  }</p>
<p>  render() {<br />
    return (</p>
<p>      <View style={styles.MainContainer}></p>
<p>        <Text style={{ fontSize: 23 }}> This is Activity – 2 </Text></p>
<p>      </View><br />
    );<br />
  }<br />
}

class SecondActivity extends Component {

constructor(props) {

super(props);

YellowBox.ignoreWarnings([

‘Warning: componentWillMount is deprecated’,

‘Warning: componentWillReceiveProps is deprecated’,

]);

}

render() {

return (

<Text style={{ fontSize: 23 }}> This is Activity – 2 </Text>

</View>

);

}

Screenshot of Second Activity class:

9. Create a new activity class named as ThirdActivity, this would be our third and final activity in this project.

<br />
class ThirdActivity extends Component {</p>
<p>  constructor(props) {</p>
<p>    super(props);</p>
<p>    YellowBox.ignoreWarnings([<br />
      ‘Warning: componentWillMount is deprecated’,<br />
      ‘Warning: componentWillReceiveProps is deprecated’,<br />
    ]);</p>
<p>  }</p>
<p>  render() {<br />
    return (</p>
<p>      <View style={styles.MainContainer}></p>
<p>        <Text style={{ fontSize: 23 }}> This is Activity – 3 </Text></p>
<p>      </View><br />
    );<br />
  }<br />
}

class ThirdActivity extends Component {

constructor(props) {

super(props);

YellowBox.ignoreWarnings([

‘Warning: componentWillMount is deprecated’,

‘Warning: componentWillReceiveProps is deprecated’,

]);

}

render() {

return (

<Text style={{ fontSize: 23 }}> This is Activity – 3 </Text>

</View>

);

}

Screenshot of Third Activity:

10. Create 3 Constant objects named as FirstActivity_StackNavigator, SecondActivity_StackNavigator and ThirdActivity_StackNavigator. Inside each of them we would call the Hamburger Icon and define the Activity name and activity header style. This is used to call the activities from drawer navigator panel.

<br />
const FirstActivity_StackNavigator = StackNavigator({<br />
  First: {<br />
    screen: MainActivity,<br />
    navigationOptions: ({ navigation }) => ({<br />
      title: ‘MainActivity’,<br />
      headerLeft: <HamburgerIcon navigationProps={navigation} />,</p>
<p>      headerStyle: {<br />
        backgroundColor: ‘#FF9800’<br />
      },<br />
      headerTintColor: ‘#fff’,<br />
    })<br />
  },<br />
});</p>
<p>const SecondActivity_StackNavigator = StackNavigator({<br />
  Second: {<br />
    screen: SecondActivity,<br />
    navigationOptions: ({ navigation }) => ({<br />
      title: ‘SecondActivity’,<br />
      headerLeft: <HamburgerIcon navigationProps={navigation} />,</p>
<p>      headerStyle: {<br />
        backgroundColor: ‘#FF9800’<br />
      },<br />
      headerTintColor: ‘#fff’,<br />
    })<br />
  },<br />
});</p>
<p>const ThirdActivity_StackNavigator = StackNavigator({<br />
  Third: {<br />
    screen: ThirdActivity,<br />
    navigationOptions: ({ navigation }) => ({<br />
      title: ‘ThirdActivity’,<br />
      headerLeft: <HamburgerIcon navigationProps={navigation} />,</p>
<p>      headerStyle: {<br />
        backgroundColor: ‘#FF9800’<br />
      },<br />
      headerTintColor: ‘#fff’,<br />
    })<br />
  },<br />
});

const FirstActivity_StackNavigator = StackNavigator({

First: {

screen: MainActivity,

navigationOptions: ({ navigation }) => ({

title: ‘MainActivity’,

headerLeft: <HamburgerIcon navigationProps={navigation} />,

headerStyle: {

backgroundColor: ‘#FF9800’

headerTintColor: ‘#fff’,

})

});

const SecondActivity_StackNavigator = StackNavigator({

Second: {

screen: SecondActivity,

navigationOptions: ({ navigation }) => ({

title: ‘SecondActivity’,

headerLeft: <HamburgerIcon navigationProps={navigation} />,

headerStyle: {

backgroundColor: ‘#FF9800’

headerTintColor: ‘#fff’,

})

});

const ThirdActivity_StackNavigator = StackNavigator({

Third: {

screen: ThirdActivity,

navigationOptions: ({ navigation }) => ({

title: ‘ThirdActivity’,

headerLeft: <HamburgerIcon navigationProps={navigation} />,

headerStyle: {

backgroundColor: ‘#FF9800’

headerTintColor: ‘#fff’,

})

});

11. Create the DrawerNavigator calling panel and call all above three activities constants inside them .

contentComponent : Calling the Custom_Side_Menu class .

<br />
export default MyDrawerNavigator = DrawerNavigator({<br />
  MainStack: {<br />
    screen: FirstActivity_StackNavigator<br />
  },</p>
<p>  SecondStack: {<br />
    screen: SecondActivity_StackNavigator<br />
  },</p>
<p>  ThirdStack: {<br />
    screen: ThirdActivity_StackNavigator<br />
  }<br />
},<br />
  {<br />
    contentComponent: Custom_Side_Menu,<br />
    drawerWidth: Dimensions.get(‘window’).width – 130,<br />
  });

export default MyDrawerNavigator = DrawerNavigator({

MainStack: {

screen: FirstActivity_StackNavigator

SecondStack: {

screen: SecondActivity_StackNavigator

ThirdStack: {

screen: ThirdActivity_StackNavigator

}

{

contentComponent: Custom_Side_Menu,

drawerWidth: Dimensions.get(‘window’).width – 130,

});

12. Creating Style.

<br />
const styles = StyleSheet.create({</p>
<p>  MainContainer: {</p>
<p>    flex: 1,<br />
    paddingTop: (Platform.OS) === ‘ios’ ? 20 : 0,<br />
    alignItems: ‘center’,<br />
    justifyContent: ‘center’,</p>
<p>  },</p>
<p>  sideMenuContainer: {</p>
<p>    width: ‘100%’,<br />
    height: ‘100%’,<br />
    backgroundColor: ‘#fff’,<br />
    alignItems: ‘center’,<br />
    paddingTop: 20<br />
  },</p>
<p>  sideMenuProfileIcon:<br />
  {<br />
    resizeMode: ‘center’,<br />
    width: 150,<br />
    height: 150,<br />
    borderRadius: 150/2<br />
  },</p>
<p>  sideMenuIcon:<br />
  {<br />
    resizeMode: ‘center’,<br />
    width: 28,<br />
    height: 28,<br />
    marginRight: 10,<br />
    marginLeft: 20</p>
<p>  },</p>
<p>  menuText:{</p>
<p>    fontSize: 15,<br />
    color: ‘#222222’,</p>
<p>  }</p>
<p>});

const styles = StyleSheet.create({

MainContainer: {

flex: 1,

paddingTop: (Platform.OS) === ‘ios’ ? 20 : 0,

alignItems: ‘center’,

justifyContent: ‘center’,

sideMenuContainer: {

width: ‘100%’,

height: ‘100%’,

backgroundColor: ‘#fff’,

alignItems: ‘center’,

paddingTop: 20

sideMenuProfileIcon:

{

resizeMode: ‘center’,

width: 150,

height: 150,

borderRadius: 150/2

sideMenuIcon:

{

resizeMode: ‘center’,

width: 28,

height: 28,

marginRight: 10,

marginLeft: 20

menuText:{

fontSize: 15,

color: ‘#222222’,

}

});

13. Complete source code for App.js File :

<br />
import React, { Component } from ‘react’;</p>
<p>import { StyleSheet, Platform, View, Text, Image, TouchableOpacity, YellowBox, Dimensions } from ‘react-native’;</p>
<p>import { DrawerNavigator } from ‘react-navigation’;</p>
<p>import { StackNavigator } from ‘react-navigation’</p>
<p>class HamburgerIcon extends Component {</p>
<p>  toggleDrawer = () => {</p>
<p>    console.log(this.props.navigationProps);</p>
<p>    this.props.navigationProps.toggleDrawer();</p>
<p>  }</p>
<p>  render() {</p>
<p>    return (</p>
<p>      <View style={{ flexDirection: ‘row’ }}></p>
<p>        <TouchableOpacity onPress={this.toggleDrawer.bind(this)} ></p>
<p>          <Image<br />
            source={{ uri: ‘/wp-content/uploads/2018/04/hamburger_icon.png’ }}<br />
            style={{ width: 25, height: 25, marginLeft: 5 }}<br />
          /></p>
<p>        </TouchableOpacity></p>
<p>      </View></p>
<p>    );</p>
<p>  }<br />
}</p>
<p>class Custom_Side_Menu extends Component {</p>
<p>  render() {</p>
<p>    return (</p>
<p>      <View style={styles.sideMenuContainer}></p>
<p>        <Image source={{ uri: ‘/wp-content/uploads/2017/10/Guitar.jpg’ }}<br />
          style={styles.sideMenuProfileIcon} /></p>
<p>        <View style={{ width: ‘100%’, height: 1, backgroundColor: ‘#e2e2e2’, marginTop: 15}} /></p>
<p>        <View style={{width: ‘100%’}}></p>
<p>            <View style={{flexDirection: ‘row’, alignItems: ‘center’, marginTop: 10}}></p>
<p>              <Image source={{ uri: ‘/wp-content/uploads/2018/08/social.jpg’ }}<br />
              style={styles.sideMenuIcon} /></p>
<p>              <Text style={styles.menuText} onPress={() => { this.props.navigation.navigate(‘First’) }} > First Activity </Text></p>
<p>            </View></p>
<p>            <View style={{flexDirection: ‘row’, alignItems: ‘center’, marginTop: 10}}></p>
<p>              <Image source={{ uri: ‘/wp-content/uploads/2018/08/promotions.jpg’ }}<br />
              style={styles.sideMenuIcon} /></p>
<p>              <Text style={styles.menuText} onPress={() => { this.props.navigation.navigate(‘Second’) }} > Second Activity </Text></p>
<p>            </View></p>
<p>            <View style={{flexDirection: ‘row’, alignItems: ‘center’, marginTop: 10}}></p>
<p>              <Image source={{ uri: ‘/wp-content/uploads/2018/08/outbox.jpg’ }}<br />
              style={styles.sideMenuIcon} /></p>
<p>              <Text style={styles.menuText} onPress={() => { this.props.navigation.navigate(‘Third’) }} > Third Activity </Text></p>
<p>            </View></p>
<p>       </View></p>
<p>       <View style={{ width: ‘100%’, height: 1, backgroundColor: ‘#e2e2e2’, marginTop: 15}} /></p>
<p>      </View><br />
    );<br />
  }<br />
}</p>
<p>class MainActivity extends Component {</p>
<p>  constructor(props) {</p>
<p>    super(props);</p>
<p>    YellowBox.ignoreWarnings([<br />
      ‘Warning: componentWillMount is deprecated’,<br />
      ‘Warning: componentWillReceiveProps is deprecated’,<br />
    ]);</p>
<p>  }</p>
<p>  render() {<br />
    return (</p>
<p>      <View style={styles.MainContainer}></p>
<p>        <Text style={{ fontSize: 23 }}> This is Activity – 1 </Text></p>
<p>      </View><br />
    );<br />
  }<br />
}</p>
<p>class SecondActivity extends Component {</p>
<p>  constructor(props) {</p>
<p>    super(props);</p>
<p>    YellowBox.ignoreWarnings([<br />
      ‘Warning: componentWillMount is deprecated’,<br />
      ‘Warning: componentWillReceiveProps is deprecated’,<br />
    ]);</p>
<p>  }</p>
<p>  render() {<br />
    return (</p>
<p>      <View style={styles.MainContainer}></p>
<p>        <Text style={{ fontSize: 23 }}> This is Activity – 2 </Text></p>
<p>      </View><br />
    );<br />
  }<br />
}</p>
<p>class ThirdActivity extends Component {</p>
<p>  constructor(props) {</p>
<p>    super(props);</p>
<p>    YellowBox.ignoreWarnings([<br />
      ‘Warning: componentWillMount is deprecated’,<br />
      ‘Warning: componentWillReceiveProps is deprecated’,<br />
    ]);</p>
<p>  }</p>
<p>  render() {<br />
    return (</p>
<p>      <View style={styles.MainContainer}></p>
<p>        <Text style={{ fontSize: 23 }}> This is Activity – 3 </Text></p>
<p>      </View><br />
    );<br />
  }<br />
}</p>
<p>const FirstActivity_StackNavigator = StackNavigator({<br />
  First: {<br />
    screen: MainActivity,<br />
    navigationOptions: ({ navigation }) => ({<br />
      title: ‘MainActivity’,<br />
      headerLeft: <HamburgerIcon navigationProps={navigation} />,</p>
<p>      headerStyle: {<br />
        backgroundColor: ‘#FF9800’<br />
      },<br />
      headerTintColor: ‘#fff’,<br />
    })<br />
  },<br />
});</p>
<p>const SecondActivity_StackNavigator = StackNavigator({<br />
  Second: {<br />
    screen: SecondActivity,<br />
    navigationOptions: ({ navigation }) => ({<br />
      title: ‘SecondActivity’,<br />
      headerLeft: <HamburgerIcon navigationProps={navigation} />,</p>
<p>      headerStyle: {<br />
        backgroundColor: ‘#FF9800’<br />
      },<br />
      headerTintColor: ‘#fff’,<br />
    })<br />
  },<br />
});</p>
<p>const ThirdActivity_StackNavigator = StackNavigator({<br />
  Third: {<br />
    screen: ThirdActivity,<br />
    navigationOptions: ({ navigation }) => ({<br />
      title: ‘ThirdActivity’,<br />
      headerLeft: <HamburgerIcon navigationProps={navigation} />,</p>
<p>      headerStyle: {<br />
        backgroundColor: ‘#FF9800’<br />
      },<br />
      headerTintColor: ‘#fff’,<br />
    })<br />
  },<br />
});</p>
<p>export default MyDrawerNavigator = DrawerNavigator({<br />
  MainStack: {<br />
    screen: FirstActivity_StackNavigator<br />
  },</p>
<p>  SecondStack: {<br />
    screen: SecondActivity_StackNavigator<br />
  },</p>
<p>  ThirdStack: {<br />
    screen: ThirdActivity_StackNavigator<br />
  }<br />
},<br />
  {<br />
    contentComponent: Custom_Side_Menu,<br />
    drawerWidth: Dimensions.get(‘window’).width – 130,<br />
  });</p>
<p>const styles = StyleSheet.create({</p>
<p>  MainContainer: {</p>
<p>    flex: 1,<br />
    paddingTop: (Platform.OS) === ‘ios’ ? 20 : 0,<br />
    alignItems: ‘center’,<br />
    justifyContent: ‘center’,</p>
<p>  },</p>
<p>  sideMenuContainer: {</p>
<p>    width: ‘100%’,<br />
    height: ‘100%’,<br />
    backgroundColor: ‘#fff’,<br />
    alignItems: ‘center’,<br />
    paddingTop: 20<br />
  },</p>
<p>  sideMenuProfileIcon:<br />
  {<br />
    resizeMode: ‘center’,<br />
    width: 150,<br />
    height: 150,<br />
    borderRadius: 150/2<br />
  },</p>
<p>  sideMenuIcon:<br />
  {<br />
    resizeMode: ‘center’,<br />
    width: 28,<br />
    height: 28,<br />
    marginRight: 10,<br />
    marginLeft: 20</p>
<p>  },</p>
<p>  menuText:{</p>
<p>    fontSize: 15,<br />
    color: ‘#222222’,</p>
<p>  }</p>
<p>});

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

214

215

216

217

218

219

220

221

222

223

224

225

226

227

228

229

230

231

232

233

234

235

236

237

238

239

240

241

242

243

244

245

246

247

248

249

250

251

252

253

254

255

256

257

258

259

260

261

262

263

264

265

266

267

268

269

270

271

272

273

274

275

276

277

278

279

280

281

282

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 (

<Image

source={{ uri: ‘/wp-content/uploads/2018/04/hamburger_icon.png’ }}

style={{ width: 25, height: 25, marginLeft: 5 }}

</TouchableOpacity>

</View>

);

}

class Custom_Side_Menu extends Component {

render() {

return (

<Image source={{ uri: ‘/wp-content/uploads/2017/10/Guitar.jpg’ }}

style={styles.sideMenuProfileIcon} />

<Image source={{ uri: ‘/wp-content/uploads/2018/08/social.jpg’ }}

style={styles.sideMenuIcon} />

<Text style={styles.menuText} onPress={() => { this.props.navigation.navigate(‘First’) }} > First Activity </Text>

</View>

<Image source={{ uri: ‘/wp-content/uploads/2018/08/promotions.jpg’ }}

style={styles.sideMenuIcon} />

<Text style={styles.menuText} onPress={() => { this.props.navigation.navigate(‘Second’) }} > Second Activity </Text>

</View>

<Image source={{ uri: ‘/wp-content/uploads/2018/08/outbox.jpg’ }}

style={styles.sideMenuIcon} />

<Text style={styles.menuText} onPress={() => { this.props.navigation.navigate(‘Third’) }} > Third Activity </Text>

</View>

</View>

);

}

class MainActivity extends Component {

constructor(props) {

super(props);

YellowBox.ignoreWarnings([

‘Warning: componentWillMount is deprecated’,

‘Warning: componentWillReceiveProps is deprecated’,

]);

}

render() {

return (

<Text style={{ fontSize: 23 }}> This is Activity – 1 </Text>

</View>

);

}

class SecondActivity extends Component {

constructor(props) {

super(props);

YellowBox.ignoreWarnings([

‘Warning: componentWillMount is deprecated’,

‘Warning: componentWillReceiveProps is deprecated’,

]);

}

render() {

return (

<Text style={{ fontSize: 23 }}> This is Activity – 2 </Text>

</View>

);

}

class ThirdActivity extends Component {

constructor(props) {

super(props);

YellowBox.ignoreWarnings([

‘Warning: componentWillMount is deprecated’,

‘Warning: componentWillReceiveProps is deprecated’,

]);

}

render() {

return (

<Text style={{ fontSize: 23 }}> This is Activity – 3 </Text>

</View>

);

}

const FirstActivity_StackNavigator = StackNavigator({

First: {

screen: MainActivity,

navigationOptions: ({ navigation }) => ({

title: ‘MainActivity’,

headerLeft: <HamburgerIcon navigationProps={navigation} />,

headerStyle: {

backgroundColor: ‘#FF9800’

headerTintColor: ‘#fff’,

})

});

const SecondActivity_StackNavigator = StackNavigator({

Second: {

screen: SecondActivity,

navigationOptions: ({ navigation }) => ({

title: ‘SecondActivity’,

headerLeft: <HamburgerIcon navigationProps={navigation} />,

headerStyle: {

backgroundColor: ‘#FF9800’

headerTintColor: ‘#fff’,

})

});

const ThirdActivity_StackNavigator = StackNavigator({

Third: {

screen: ThirdActivity,

navigationOptions: ({ navigation }) => ({

title: ‘ThirdActivity’,

headerLeft: <HamburgerIcon navigationProps={navigation} />,

headerStyle: {

backgroundColor: ‘#FF9800’

headerTintColor: ‘#fff’,

})

});

export default MyDrawerNavigator = DrawerNavigator({

MainStack: {

screen: FirstActivity_StackNavigator

SecondStack: {

screen: SecondActivity_StackNavigator

ThirdStack: {

screen: ThirdActivity_StackNavigator

}

{

contentComponent: Custom_Side_Menu,

drawerWidth: Dimensions.get(‘window’).width – 130,

});

const styles = StyleSheet.create({

MainContainer: {

flex: 1,

paddingTop: (Platform.OS) === ‘ios’ ? 20 : 0,

alignItems: ‘center’,

justifyContent: ‘center’,

sideMenuContainer: {

width: ‘100%’,

height: ‘100%’,

backgroundColor: ‘#fff’,

alignItems: ‘center’,

paddingTop: 20

sideMenuProfileIcon:

{

resizeMode: ‘center’,

width: 150,

height: 150,

borderRadius: 150/2

sideMenuIcon:

{

resizeMode: ‘center’,

width: 28,

height: 28,

marginRight: 10,

marginLeft: 20

menuText:{

fontSize: 15,

color: ‘#222222’,

}

});

Screenshots:

React Native Drawer Navigator with Custom Sidebar Menu with Icons Tutorial

Contents in this project Drawer Navigator with Custom Sidebar Menu with Icons React Native iOS Android Example Tutorial:

Also Read :

Recent Posts

Search Here