Then you need to copy the font files (of Icons) from [YourAppRoot]/node_modules/react-native-vector-icons/Fonts to [YourAppRoot]/android/app/src/main/assets/fonts (create the folder if it doesn't exists). This is how you can use any custom font with your react-native app. Since we treat icons as fonts too, the process is same.

After installing components (or any library/component) and adding font's to your the assets folder, you need to restart the server and start the app again, otherwise they won't have any effect on the app. Now you have complete setup to use the component.

Component Props

active

This is a Boolean type prop. It is required ( React.PropTypes.bool.isRequired ). It is the open and close state of the menu. You can use it for ..... only opening and closing the menu :-p

onMenuPress

This is a function type prop. It is required ( React.PropTypes.func.isRequired ). This is the function which you need to pass to the component to let it close the menu when a menu item is pressed. This is React after all :D

backgroundColor

This is a string type prop. It is not required ( React.PropTypes.string ). The default value is #222222 (which is a nice color for background).

menuTextStyles

This is a object type prop. It is not required ( React.PropTypes.object ). The default object is { color: 'white' } . Since the menu title is a <Text> component, you can use any styling that is compatible with it.

handleBackPress

This is a magic! Not really :-). This is a Boolean type prop. It is not required ( React.PropTypes.bool ). It adds a listener for the back button of Android devices when menu is opened and removes the listener when menu is closed. Default value is true .

menuItems

This is where the magic happens, really!!!. It is an array type prop and oh yes, it is required ( React.PropTypes.array.isRequired ). You just need to pass an array of title , icon and component object, and boom, you got a navigation system with your menu! Here is the structure:

Example:

License

Credits

Thanks to React Native team for their awesome animation library. And thanks to all the online tutorial creators and blog writers who helped me a lot to learn stuffs.

I will be keep adding more variations of the component. So keep in touch with the repo. If you like the component, please show some love. If you discover any bug, please make an issue. I would really appreciate if anyone wants contribute to this repository.