Drawer / hamburger menu in React Native

Question

I need to create an app using react native in both android and iOS and i'm still a newbie. So,now i need to implement a drawer like shown in the image above.I've already searched for an example or project that meets with my needs but too badly, i couldn't find anything suitable for me.So can you help me and thank you

http://2.bp.blogspot.com/-1_Fi6T2l1LY/VUfHyQlwenI/AAAAAAAAC8g/wkWN42gNaDw/s320/device-2015-05-04-101820_1.gif

Answer 1

You could use this library:

https://github.com/react-native-material-design/react-native-material-design

I think it can solve your problem

This RN starter has an example as well:

https://github.com/infinitered/ignite

Answer 2

You should not implement it from scratch yourself but instead you can use a starter project like this. If you want these animations on the drawer icon you can also check the Airbnb's Lottie.

Answer 3

How to implement the hamburger menu with react-native-paper: https://callstack.github.io/react-native-paper/docs/guides/react-navigation/ (arhive.org)

Answer 4

https://medium.com/@mdeepikayadav029/side-menu-bar-after-login-screen-in-react-native-4cabee7ca2b0

At the time, this one worked for me (0.63.4). The others I found were from previous versions (0.45) and required a lot of adjustments regarding newer version implementations. No other extra files are needed except these ones after creating a unmanaged blank project:

App.js
LoginScreen.js
HeaderComponent.js
FirstScreen.js
SecondScreen.js