Awesome
React Native Side Menu Template
A starting point for react native apps with side menu for Android.
This version works with Redux. You can find a version without Redux here.
Motivation
When I worked with ionic framework, one of the better cool features in my opinion, was the ionic default templates. If I wanted to set up a new side menu ionic app, my only work was type ionic start myApp sidemenu
in a terminal, and voalla. Unfortunately, until the release of this project, I could not find any complete side menu template for react native (I mean, both Drawer and Toolbar working together), because of this, I decide to do my own template. Feel free to collaborate or suggest any changes, I'm sure that many things can be improved.
New features
This is the Version 3.0 of the original React Native Sidemenu Template. This template uses the beauty project react native vector icons that allow us to use font icons collections such as FontAwesome, Ionicons, MaterialIcons and many others. In this version I replaced some components such as the old React Native Navigator with the new React Navigation component. To allow both Toolbar and Drawer components to work together, I combined Redux with React Navigation in a simple way. See the diagram below for more information.
If you are looking for a pure solution without Redux, checkout this branch.
Diagram: Simple integration of the React Navigation with React Redux.
This project uses:
- react native vector icons library
- React Native DrawerLayoutAndroid component.
- Icon.ToolbarAndroid component
- React Navigation component
- React Redux
Get started
To get started with react native side menu template just follow the steps below:
Requirements
- Ensure you have both NodeJS and npm (or yarn) installed.
- clone this repo or download the zip file and unzip it.
- In a terminal, inside the project directory, type
npm install
oryarn
for yarn users. - Open your AVD emulator, or set up a real device in order to work with react native projects.
- In a terminal, inside the root directory, type
npm start
oryarn start
for yarn users. The App should open up in your AVD or real device.
That's all, now you can change the project according to your needs.
Project Structure
Basically, this is a default React Native boilerplate created by the command line react-native init react-native-sidemenu
. The core of the template is in the app
folder:
You can modify the menu items in the app/Navigation/routes.js
file. You can also change the Overflow Menu Items navigation in the app/Navigation/Toolbar/index.js
file. All the screens are located in the app/Views
folder.
| Project Structure | Template animation |
| |
|
License
This project is licenced under the MIT License.
Any included software are copyright to their respective authors and mostly under MIT or SIL OFL.