GitPlanet

Cheap and reliable Node.js hosting starts at $3/month, and $1/month static HTML hosting

Created with love in Canada, visit hostnodejs.com today

Feel like to post an Ad? Learn Details
All Projects → gaetanozappi → react-native-navigation-drawer-layout

gaetanozappi / react-native-navigation-drawer-layout

Licence: Apache-2.0 license
React Native library to generate navigation drawer layout.

Programming Languages

javascript
184084 projects - #8 most used programming language

Labels

react-nativenavigationdrawerdrawerlayoutdrawer-layoutdrawernavigatordrawer-navigationdrawer-androiddrawer-menunavigation-drawer-layout

Projects that are alternatives of or similar to react-native-navigation-drawer-layout

minavdrawer
Easy to add different animations into standard NavigationDrawer.
Stars: ✭ 93 (+257.69%)
Mutual labels:  drawer, drawerlayout, drawer-android
drawer-with-bottom-navigation-architecture
Sample android kotlin project with both drawer and bottom navigation together
Stars: ✭ 42 (+61.54%)
Mutual labels:  navigation, drawer
Materialdrawer
The flexible, easy to use, all in one drawer library for your Android project. Now brand new with material 2 design.
Stars: ✭ 11,498 (+44123.08%)
Mutual labels:  drawer, drawerlayout
React Native Navigation Drawer Extension
Drawer API built on top of wix react-native-navigation for iOS and Android (with TypeScript!)
Stars: ✭ 98 (+276.92%)
Mutual labels:  navigation, drawer
Duo Navigation Drawer
A flexible, easy to use, unique drawer library for your Android project.
Stars: ✭ 986 (+3692.31%)
Mutual labels:  drawer, drawerlayout
Vue Drawer
vue.js drawer drawerlayout aside 侧边栏 抽屉
Stars: ✭ 81 (+211.54%)
Mutual labels:  drawer, drawerlayout
Xam.plugin.simplebottomdrawer
Just a nice and simple BottomDrawer for your Xamarin Forms project
Stars: ✭ 92 (+253.85%)
Mutual labels:  navigation, drawer
Slidingrootnav
DrawerLayout-like ViewGroup, where a "drawer" is hidden under the content view, which can be shifted to make the drawer visible.
Stars: ✭ 2,939 (+11203.85%)
Mutual labels:  drawerlayout, drawer-layout
Jvfloatingdrawer
An easy to use floating drawer view controller.
Stars: ✭ 1,424 (+5376.92%)
Mutual labels:  navigation, drawer
Mmenu Js
The best javascript plugin for app look-alike on- and off-canvas menus with sliding submenus for your website and webapp.
Stars: ✭ 2,535 (+9650%)
Mutual labels:  navigation, drawer
hipsbarjs
Hipsbarjs is a javascript plugin for easily creating drawers in web apps
Stars: ✭ 17 (-34.62%)
Mutual labels:  navigation, drawer
Drawer Behavior
Drawer behavior is a library that provide an extra behavior on drawer, such as, move view or scaling view's height while drawer on slide.
Stars: ✭ 394 (+1415.38%)
Mutual labels:  drawer, drawerlayout
Vue Drawer Layout
A simple DrawerLayout component for Vue.js.
Stars: ✭ 392 (+1407.69%)
Mutual labels:  drawer, drawerlayout
Drawer Behavior Flutter
Drawer behavior is a library that provide an extra behavior on drawer, such as, move view or scaling view's height while drawer on slide.
Stars: ✭ 110 (+323.08%)
Mutual labels:  drawer, drawerlayout
FilterDrawer
Android plug-and-play filter that slides
Stars: ✭ 17 (-34.62%)
Mutual labels:  drawer, drawer-layout
react-native-navigation-drawer-extension
Drawer API built on top of wix react-native-navigation for iOS and Android (with TypeScript!)
Stars: ✭ 151 (+480.77%)
Mutual labels:  navigation, drawer
Nativescript App Templates
Monorepo for NativeScript app templates
Stars: ✭ 108 (+315.38%)
Mutual labels:  navigation, drawer
NewsHub
News Hub display news of different category (Entertainment, Business, International, Sports, Medical, Technology, Global) and news can be saved as bookmark
Stars: ✭ 16 (-38.46%)
Mutual labels:  navigation, drawerlayout
drawer
A touch-enabled drawer component for the modern web.
Stars: ✭ 26 (+0%)
Mutual labels:  drawer, drawer-layout
MVVMJetpack
JectpackDemo
Stars: ✭ 37 (+42.31%)
Mutual labels:  navigation
View All Similar Projects ➔

React Native: react-native-navigation-drawer-layout

GitHub package version github home platforms github home npm

github issues github closed issues Issue Stats github license

📖 Getting started

$ npm install react-native-navigation-drawer-layout --save

$ react-native link react-native-material-letter-icon

$ react-native link react-native-vector-icons

💻 Usage

import * as React from 'react';
import { StyleSheet, View, Text } from 'react-native';
import NavigationDrawerLayout from 'react-native-navigation-drawer-layout';

export default class App extends React.Component {
  constructor() {
    super();
    this.state = {
      menu: '',
      type: ''
    };
  }

  render() {
    return (
      <NavigationDrawerLayout
        percent={75}
        //statusBar="#008cff"
        //statusBarTransparency={0.3}
        type={this.state.type}
        drawerPosition="left"
        selected="opt0"
        window="menu"
        color="#fff"
        backgroundColor="#fff" //303030
        imageBackground={{ uri: "https://c.wallhere.com/photos/aa/44/glare_colorful_bright_circles-679384.jpg!d" }}
        first={'username'}
        second={'joined'}
        account={[
          {
            username: 'james.bond',
            name: 'James Bond',
            email: '[email protected]',
            image:
              {{ uri: 'https://cdn1.iconfinder.com/data/icons/avatar-2-2/512/Casual_Man_2-512.png' }},
            joined: 'Joined at Jun 21, 2021',
            badgeText: '100',
            badgeColor: '#fff',
            badgeBackground: '#303030',
            circle: ['transparent', 'transparent'],
          },
          {
            username: 'sherlock.holmes',
            name: 'Sherlock Holmes',
            email: '[email protected]',
            badgeText: '100',
            badgeColor: '#fff',
            badgeBackground: '#303030',
            circle: ['#fff000', 'transparent', '#00ffd0'],
          },
          {
            name: 'Shinichi Kudo',
            email: '[email protected]',
            image:
              {{ uri: 'https://cdn1.iconfinder.com/data/icons/avatar-2-2/512/Casual_Man_3-512.png' }},
            badgeText: '21',
            badgeColor: '#fff',
            badgeBackground: '#25dbd2',
            joined: 'Joined at Jun 31, 2021',
            circle: ['transparent', 'transparent'],
          },
          {
            name: 'Arthur Conan Doyle',
            email: '[email protected]',
            image:
              {{ uri: 'https://cdn0.iconfinder.com/data/icons/user-interface-vol-3-12/66/68-512.png' }},
            circle: ['transparent', 'transparent'],
          },
        ]}
        badgeFunction={e => {
          return e > 99 ? '99+' : e;
        }}
        menu={[
          {
            type: 'menu',
            name: 'opt0',
            title: 'Le mie app e i miei giochi',
            icon: 'apps',
            colorText: '#000',
            colorTextFocus: '#4CAF50',
            colorIcon: '#c1c1c1',
            colorIconFocus: '#4CAF50',
            background: 'transparent',
            backgroundFocus: '#e8e8e8',
            badgeText: '100',
            badgeColor: '#fff',
            badgeBackground: '#1194ff',
          },
          {
            type: 'menu',
            name: 'opt1',
            title: 'Le mie notifiche',
            icon: 'add-alert',
            colorText: '#000',
            colorTextFocus: '#607D8B',
            colorIcon: '#c1c1c1',
            colorIconFocus: '#607D8B',
            background: 'transparent',
            backgroundFocus: '#e8e8e8',
            badgeText: '31+',
          },
          {
            type: 'menu',
            name: 'opt2',
            title: 'Abbonamenti',
            icon: 'refresh',
            colorText: '#000',
            colorTextFocus: '#607D8B',
            colorIcon: '#c1c1c1',
            colorIconFocus: '#607D8B',
            background: 'transparent',
            backgroundFocus: '#e8e8e8',
          },
          { type: 'divider' },
          {
            type: 'title',
            title: 'App Google',
            colorText: '#000',
          },
          {
            type: 'menu',
            name: 'opt3',
            title: 'Home page',
            icon: 'home',
            colorText: '#000',
            colorTextFocus: '#4CAF50',
            colorIcon: '#4CAF50',
            colorIconFocus: '#4CAF50',
            background: 'transparent',
            backgroundFocus: '#e8e8e8',
          },
          {
            type: 'collapse',
            name: 'opt4',
            title: 'Film',
            iconCollapsingName: 'local-movies',
            iconColor: "#ccc",
            colorText: '#000',
            colorTextFocus: '#4CAF50',
            colorIcon: '#f44336',
            colorIconFocus: '#f44336',
            background: 'transparent',
            backgroundFocus: '#e8e8e8',
            menu: [
              {
                name: 'sub0',
                title: "Apri l'app Film",
                icon: 'film',
                colorText: '#000',
                colorTextFocus: '#f44336',
                colorIcon: '#f44336',
                colorIconFocus: '#f44336',
                background: 'transparent',
                backgroundFocus: '#e8e8e8',
              },
            ],
          },
          {
            type: 'collapse',
            name: 'opt4',
            title: 'Libri',
            showOnStart: true,
            rippleColor:"#000",
            backgroundBarNormal: "#545a63",
            backgroundBarFocus: "#22252A",
            iconBarNameNormal: 'book',
            iconBarNameFocus: 'book',
            iconBarColorNormal: "#1194ff",
            iconBarColorFocus: "#ffb600",
            textBarColorNormal: "#1194ff",
            textBarColorFocus: "#ffb600",
            animateIconColorNormal:"#1194ff",
            animateIconColorFocus:"#ffb600",
            iconColor: "#ccc",
            colorText: '#000',
            colorTextFocus: '#4CAF50',
            colorIcon: '#f44336',
            colorIconFocus: '#f44336',
            background: 'transparent',
            badgeText: "100",
            badgeColor: "#fff",
            badgeBackground: "#1194ff",
            badgeRadius: 4,
            badgeStyle: {},
            menu: [
              {
                name: 'sub1',
                title: "Apri l'app Libri",
                icon: 'book',
                colorText: '#000',
                colorTextFocus: '#2196F3',
                colorIcon: '#2196F3',
                colorIconFocus: '#2196F3',
                background: 'transparent',
                backgroundFocus: '#e8e8e8',
                badgeText: '100',
                badgeColor: '#fff',
                badgeBackground: '#1194ff',
                badgeRadius: 4,
                close: true
              },
            ],
          },
          { type: 'divider' },
          {
            type: 'menu',
            name: 'opt9',
            title: 'Account',
            icon: 'person-pin',
            colorText: '#000',
            colorTextFocus: '#607D8B',
            colorIcon: '#c1c1c1',
            colorIconFocus: '#607D8B',
            background: 'transparent',
            backgroundFocus: '#e8e8e8',
          },
          {
            type: 'menu',
            name: 'opt10',
            title: 'Utilizza codice',
            icon: 'code',
            colorText: '#000',
            colorTextFocus: '#607D8B',
            colorIcon: '#c1c1c1',
            colorIconFocus: '#607D8B',
            background: 'transparent',
            backgroundFocus: '#e8e8e8',
          },
          {
            type: 'menu',
            name: 'opt11',
            title: 'Lista desideri',
            icon: 'check-circle',
            colorText: '#000',
            colorTextFocus: '#607D8B',
            colorIcon: '#c1c1c1',
            colorIconFocus: '#607D8B',
            background: 'transparent',
            backgroundFocus: '#e8e8e8',
          },
          {
            type: 'menu',
            name: 'opt12',
            title: 'Play Protect',
            icon: 'verified-user',
            colorText: '#000',
            colorTextFocus: '#607D8B',
            colorIcon: '#c1c1c1',
            colorIconFocus: '#607D8B',
            background: 'transparent',
            backgroundFocus: '#e8e8e8',
          },
          {
            type: 'menu',
            name: 'opt13',
            title: 'Impostazioni',
            icon: 'settings',
            colorText: '#000',
            colorTextFocus: '#607D8B',
            colorIcon: '#c1c1c1',
            colorIconFocus: '#607D8B',
            background: 'transparent',
            backgroundFocus: '#e8e8e8',
          },
          {
            type: 'menu',
            name: 'opt14',
            title: 'Close Drawer',
            icon: 'exit-to-app',
            colorText: '#000',
            colorTextFocus: '#607D8B',
            colorIcon: '#c1c1c1',
            colorIconFocus: '#607D8B',
            background: 'transparent',
            backgroundFocus: '#e8e8e8',
            close: true
          },
        ]}
        changeAccount={e => {
          console.log('Account:', e);
        }}
        onPress={e => {
          this.setState({ menu: e.title });
          var type = e.name == 'opt2' ? 'simple' : '';
          this.setState({ type });
          alert("Title:"+e.title+" - "+"Name:"+e.name);
          console.log('Menu:', e);
        }}>
        <View
          style={{
            flex: 1,
            //alignItems: 'flex-end',
          }}>
          <Text style={{ marginTop: 25, marginRight: 5 }}>Hello World!</Text>
          <Text style={{ marginTop: 25, marginRight: 5 }}>
            {this.state.menu}!
          </Text>
        </View>
      </NavigationDrawerLayout>
    );
  }
}

const styles = StyleSheet.create({});

💡 Props

Prop Type Default Note
percent number Length in percentage of the drawer.
statusBar string Color statusbar.
statusBarTransparency number Transparency statusbar.
type string simple
drawerPosition string left Position drawer.
selected string
window string menu It is used to define what to display in the drawer, types: menu or account
color string
backgroundColor string Background drawer.
imageBackground obj Image drawer.
first string It is used to define what to set as the first field.
second string It is used to define what to set as the second field.
account array It is used to define account.
menu array It is used to define the menu.
badgeFunction function: optional Use in case you want to define a function, for the badgeText attribute.
changeAccount function: optional When you change the primary user of this function returns the its information.
  • Account
Prop Type Default Note
name string
email string
image obj We need to pass an url image, as in the example, or a required local image.
badgeText string
badgeColor string
badgeBackground string

You can add any attribute, then using the first and second attributes you can use to show them in the drawer.

  • Menu type divider
Prop Type Default Note
type string Use divider.
color string #cccccc Color divider.
width number 1 Width divider.
style style: optional Style divider.
  • Menu type menu
Prop Type Default Note
type string menu
name string
title string
icon string
colorText string
colorTextFocus string
colorIcon string
colorIconFocus string
background string
backgroundFocus string
badgeText string
badgeColor string
badgeBackground string
close boolean false When it is set to true, if the item is clicked the drawer menu will close.
  • Menu type collapse
Prop Type Default Note
type string collapse
name string
title string
showOnStart bool
rippleColor string
backgroundBarNormal string
backgroundBarFocus string
iconBarNameNormal string
iconBarNameFocus string
iconBarColorNormal string
iconBarColorFocus string
textBarColorNormal string
textBarColorFocus string
animateIconColorNormal string
animateIconColorFocus string
iconColor string
colorText string
colorTextFocus string
colorIcon string
colorIconFocus string
background string
badgeText string
badgeColor string
badgeBackground string
badgeRadius number
badgeStyle string
menu array

📜 License

This library is provided under the Apache License.

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].