react-native-sidebar

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

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

• Native but Android-only DrawerLayoutAndroid
• react-native-side-menu
• react-native-drawer

License

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