doberdog / react-native-sidemenu

A template for react native apps with sidemenu.

React Native Side Menu Template

A starting point for react native apps with side menu for Android.

1. Motivation
2. Get started
3. Project Structure
4. License
5. Considerations

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, 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.

Get started

This is the Version 2.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 and the Icon.ToolbarAndroid component with the new React Navigation component. The Redux library was also added.

In order to start a brand new project with react native vector icons, you should follow the instalation steps, which is not necessary for this template that already has the library installed. So, to get started with react native side menu template just follow the steps below:

New Features

1. Old React Native Navigator component replaced with the new React Navigation component.
2. Simplified image references system.
3. Redux library added.

Installation with npm

1. clone this repo or download the zip file and unzip it.
2. Make sure you have both NodeJS and npm installed.
3. In a terminal, inside the project directory, type npm install.
4. Open your AVD emulator, or set up a real device in order to work with react native projects.
5. Run react-native link to load custom fonts
6. In a terminal, inside the root directory, type npm start.
7. After npm start run successfully, in the same directory type react-native run-android.

Installation with yarn (Recommended)

1. clone this repo or download the zip file and unzip it.
2. Make sure you have both NodeJS and yarn installed.
3. In a terminal, inside the project directory, type yarn install.
4. Open your emulator or set up a real device in order to work with react native projects.
5. Run react-native link to load custom fonts
6. In a terminal, inside the root directory, type yarn start.
7. After yarn start run successfully, in the same directory, type react-native run-android.

That's all, now you can change the project according to your needs. If you prefer, you can start a brand new project typing react-native init myApp, install the react native vector icons, and copy all the app folder to your project, as well change the index.android.js and package.json files accordingly.

Project Structure

Basically, this is a default React Native project created by the command line react-native init react-native-sidemenu. The core of the template is:

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.

Considerations

It's relatively easy to make some changes if you cannot use react native vector icons and use the built in ToolbarAndroid, although, according the author:

Icon.ToolbarAndroid is a composition of the underlying ToolbarAndroid component.

Hope this template can help you in some way.

Thank you