The react-native-drawer module makes it easy to implement a side-menu in your React Native application.
In the article: “Getting Started with the Mapbox Maps SDK for React Native” I walked you through the basic steps needed to render a Mapbox Map in a React Native application. So, I thought this might be a good time to mention the side-menu, which is a fairly typical component in any mobile application, as it provides a container for critical tasks such as navigation or setting options. In this article, I will explain how to create a side-menu, using the react-native-drawer npm module. I’ll explain the basic syntax and make a few suggestions on how to format your code, and… spoiler alert: the react-native-drawer module is easy to implement and the syntax is very straightforward.
If you are just getting started with React Native, or building a new mobile application from scratch, the react-native CLI is incredibly helpful. By simply executing react-native init APPLICATION_NAME in your terminal, you’ll have a fully functional application in less than a few minutes. But what’s so magical is that for the entire few minutes, the react-native CLI is busy building that application for you. In fact, it even executes a first-time npm install for you. Pretty bad-ass.
But, I will mention that the application that the react-native CLI builds out for you consists of a simple view with some text. Of course we can’t complain; the react-native CLI has done a great deal of work, sparing us the tedious details of staring at a blank text file, wondering where to begin. So, one of the first steps in snazzing-up this “hello world” is to add a side menu, which will pretty much be a “hello world” side-menu, but you can copy-paste this code into your app and be up and running in minutes.
package.json
Above, we have our package.json file. Nothing too special going on here; we just need react, react-native and react-native-drawer. In the devDependencies section, babel-jest, babel-preset-react-native, jest and react-test-renderer were configured for us by the react-native CLI. You should be able to copy and paste this into your application, then fire up your emulator.
Example # 1
In Example # 1 you see the very basics of how the side-menu component is arranged in your code. In fact, it’s so basic that it won’t actually work yet. So what I’ll do is demonstrate how you wrap your application code in the Drawer component. Drawer is an object that we create by requiring the react-native-drawer module. (You’ll see the details for this in Example # 5.) Meanwhile, the main thing to keep in mind is that the Drawer component wraps your application code in your class’s render() method, and your application code would go where you see: “APPLICATION_CONTENT_GOES_HERE”.
Example # 2
Example # 2 is similar to Example # 1. The main difference here is the addition of two properties to the Drawer component. The content property is where you set the content for the Drawer component, which is where you see “CONTENT GOES HERE“. Now in theory, you could put a string there. I feel pretty sure, however, that you’ll never want to do that.
I suggest providing a reference to a method that will render your content. If you think about it, this is ALL of the content for your side-menu. I don’t think there is any chance that the side-menu content will be just a few words or something. So it makes sense to provide a method reference, and in that method you render your content. This way, you can break that method out accordingly into smaller sub-methods. You can then include any logic that is needed to properly render your content.
The styles property is where the styling for the side-menu component goes (i.e. where you see: “YOUR_CUSTOM_STYLES“). Now while you can provide an inline object literal here, again, I recommend you provide a reference to an object that contains your styles for cleaner and more manageable code.
Example # 3
In Example # 3, I added an event handler for the onClose() property. This is not a requirement, but I added this piece of code because you may want to know when the user closed the side-menu. For example, on menu closed, you may want to emphasize or deemphasize another element. Here too, you do not have to handle this event, but it’s just good to know that you can if needed.
Example # 4
In Example # 4, I’ve added more properties that give the side-menu a bit more of a finished feel. Take a look at line # 4: type=”overlay” tells react-native that we want this side menu to have an overlay look and feel. And setting tapToClose to true allows the user to close the menu simply by tapping anywhere outside of the menu. I’d recommend leveraging this feature, since you probably don’t want to require the user to click a dedicated button in order to close the menu. But that, of course, is your choice.
So, in an effort to keep things brief, I’ll skip the in-depth discussion of openDrawerOffset, panCloseMask, closedDrawerOffset, panOpenMask, captureGestures and acceptPan. They all have to do with visual aspects of the side-menu and are worth looking into when you have time.
Example # 5
There is a lot going on in Example # 5 as it is all the code for the working application. Take a look at the renderSideMenuContent() method on line # 13 and the renderMainContent() method on line # 23. In these methods, I’m rendering the content for both the side-menu and the rest of the application, because I wanted to keep the render() method on line # 39 as clean as possible. This way, you can get a sense of how the application is structured just by looking at the code between line # 39 and line # 66. And then, the implementation details for child components such as the side-menu content and the application content are broken out into their own methods.
