Skip to content

Latest commit

 

History

History
73 lines (52 loc) · 2.55 KB

README.md

File metadata and controls

73 lines (52 loc) · 2.55 KB

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

License

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