Drawer / hamburger menu in React Native

react-native drawer hamburger-menu
user3521011 picture user3521011 · Mar 7, 2017 · Viewed 11.6k times · Source

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

Gabriel Mesquita picture Gabriel Mesquita · Mar 7, 2017

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

Related questions

implementing sideBar/hamburger menu with react-native drawer

I'm quite new to React-Native. I'm trying to add sideBar/hamburger menu to my application with implementing 'react-native drawer' component. Firstly, I'm trying to add the example code from GitHub to my new test project just to understand how it …

Read More
React Navigation (V2): How to set the Icon and the label of a stack Navigator inside a Drawer Navigator?

I'm trying to customize my StackNavigator within my DrawerNavigator. Here is my code: const HomeStack = createStackNavigator( { HomeScreen, HomeDetailScreen, InteriorScreen, InteriorDetailScreen }, { initialRouteName: "HomeScreen", navigationOptions: { headerTitleStyle: { color: headerColor }, headerBackTitleStyle: { color: headerColor }, headerTintColor: headerColor } } const MainStack = createStackNavigator( { HomeStack, ChooseLocationScreen, FilterHomesScreen }, { initialRouteName: "HomeStack", mode: "…

Read More
How can I insert a line break into a <Text> component in React Native?

I want to insert a new line (like \r\n, <br />) in a Text component in React Native. If I have: <text> <br /> Hi~<br /> this is a test message.<br /&…

Read More