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
				ref={(ref) => this._drawer = ref}
				leftSidebar={ this.renderLeftSidebar() }
				rightSidebar={ this.renderRightSidebar() }
				style={{ flex: 1, backgroundColor: 'black' }}>
			{ this.renderContent() }
		</Sidebar>
	)
}

Supported properties:

• use like this -> this._drawer.open("left")

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