react-native-sidebar

0.3.0 • Public • Published

react-native-sidebar

A react-native Animated based sidebar (aka drawer) solution.

Build status Test coverage Dependency Status

After testing several other sidebar implementation with different pitfalls we decided to implement a clean, easy-to-use and working sidebar based on the react-native Animated framework.

Getting started

npm install --save react-native-sidebar

Usage:

import Sidebar from 'react-native-sidebar';
 
render() {
    return (
        <Sidebar
                leftSidebar={ this.renderLeftSidebar() }
                rightSidebar={ this.renderRightSidebar() }
                style={{ flex: 1, backgroundColor: 'black' }}>
            { this.renderContent() }
        </Sidebar>
    )
}

Supported properties:

  • open: bool or string (bool true or string 'left' opens left sidebar, string 'right' opens right sidebar)
  • leftSidebar: Compontent
  • leftSidebarWidth: Number (callback sidebarWidth: Number, otherwise use default 280)
  • leftThreshold: Number (callback threshold: Number, otherwise use default 30)
  • rightSidebar: Compontent
  • rightSidebarWidth: Number (callback sidebarWidth: Number, otherwise use default 280)
  • rightThreshold: Number (callback threshold: Number, otherwise use default 30)
  • overlayColor: Color
  • childrens: Compontent[]

Effects

More effects coming soon! Input / ideas (as issue) or PR are welcome. 👍

Default

Alternatives

License

This project is released under the MIT License. See the LICENSE file for further details.

Install

npm i react-native-sidebar

DownloadsWeekly Downloads

147

Version

0.3.0

License

MIT

Last publish

Collaborators

  • jerolimov