Skip to content

christoph-jerolimov/react-native-sidebar

Repository files navigation

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.

About

No description, website, or topics provided.

Resources

License

Stars

Watchers

Forks

Packages

No packages published