Giter VIP home page Giter VIP logo

react-native-sidemenu's Introduction

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.

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

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.

React Navigation with React Readux Diagram: Simple integration of the React Navigation with React Redux.

This project uses:

  1. react native vector icons library
  2. React Native DrawerLayoutAndroid component.
  3. Icon.ToolbarAndroid component
  4. React Navigation component
  5. React Redux

Get started

To get started with react native side menu template just follow the steps below:

Requirements

  1. Ensure you have both NodeJS and npm (or yarn) installed.
  2. clone this repo or download the zip file and unzip it.
  3. In a terminal, inside the project directory, type npm install or yarn for yarn users.
  4. Open your AVD emulator, or set up a real device in order to work with react native projects.
  5. In a terminal, inside the root directory, type npm start or yarn 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 |

|Project structure | |

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.

react-native-sidemenu's People

Contributors

darde avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

react-native-sidemenu's Issues

Could not find iPhone X simulator

Hi, M getting Could not find iPhone X simulator while running the project. Could you please lemme know the reason for this ? Seems some version issues but not sure project will work after upgrading react-native in your project.

IOs Version

Hey, thanks for the example. It's very good. Are you thinking in upload the IOs version? Thanks

Passing Value

Hi! You did a great work and verry helping me.

So, in my project before I show up Home Screen, Login Sceen will appear.

I think this is the stucture: App->ReduxNavigation->AppNavigation->Home

My question is, how I pass USER_ID through App to Home Sceen? let say I would to display 'Welcome "USER_ID"' in Home Screen, and how to pass value between views?

Thanks.

Blank page appear when keep App.js file data in Main.js file and imported in Login file

I wanted to call this slid bar once after login. If I do so, I want to display any content. It shows only a blank page. But I can print all the statements which are in console.log where It went wrong I did not get it. Can you help me to solve this?

Main.js file contians App.js data

In App.js file ,

import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View,
Image,
NetInfo
} from 'react-native';
import Main from './src/components/Main';

export default class App extends Component {
render() {
return (
//call this inside if the condition


);
}
}

AppRegistry.registerComponent('App', () => App);

I must call this inside in if only.

How to load and use in my project

Can you please provide docs on how to include and use in my project?

I tried to copy DrawerMenu.js and render it like in app.js, but I'm getting a lot of errors.

Hardware back button click event

I have implemented drawer menu using this code.Not able to handle hardware back button click event.When i click back button screen goes to previouse screen but toolbar back arrow not changing into menu icon.Any idea

React Form

Hi,

I love this project. Do you mind to provide example on how to use form in this project? Thanks!

Why not use createDrawerNavigator ?

First, thanks for this demo projet, helped me out quite a bit ๐Ÿ‘

React navigation offers a built in side menu using createDrawerNavigator. It uses DrawerLayout under the hood. Was wondering if you have tried it out, and if your implementation has any benefits over it?

TypeError:undefined is not a function

Hi,Thanks for your wonderful theme.
I am newbie to react-native,just wanted to use this app but I followed same steps but when I launch app, iam facing this error as shown in image,could you help me to resolve it.
Thank you
image

Unexpected identifier 'str'

I tried to run the app. Build was fine but afterwards while starting the app on my device i got the folowing error

image

menuItems and LighthouseBody get database ?

export const menuItems = [
{
thumb: 'lighthouse_lindau',
index: 1,
label: 'Lindau Lighthouse, Germany',
},
....
];
Can I get it from the database menuItems,LighthouseBody ??

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.