https://github.com/christoph-jerolimov/react-native-sidebar

https://github.com/christoph-jerolimov/react-native-sidebar

Last synced: about 2 months ago
JSON representation

• Host: GitHub
• URL: https://github.com/christoph-jerolimov/react-native-sidebar
• Owner: christoph-jerolimov
• License: mit
• Created: 2016-02-11T08:03:17.000Z (almost 9 years ago)
• Default Branch: master
• Last Pushed: 2018-07-02T08:14:01.000Z (over 6 years ago)
• Last Synced: 2024-11-14T10:58:31.562Z (about 2 months ago)
• Language: JavaScript
• Size: 99.6 KB
• Stars: 27
• Watchers: 6
• Forks: 13
• Open Issues: 5
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# react-native-sidebar

> A [react-native](https://facebook.github.io/react-native/) Animated based sidebar (aka drawer) solution.

[![Build status][travis-image]][travis-url] [![Test coverage][coveralls-image]][coveralls-url] [![Dependency Status][dependency-image]][dependency-url]

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](https://facebook.github.io/react-native/docs/animated.html) framework.

## Getting started

```bash

npm install --save react-native-sidebar

```

Usage:

```js

import Sidebar from 'react-native-sidebar';

render() {

	return (

		 this._drawer = ref}

				leftSidebar={ this.renderLeftSidebar() }

				rightSidebar={ this.renderRightSidebar() }

				style={{ flex: 1, backgroundColor: 'black' }}>

			{ this.renderContent() }

		

	)

}

```

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. :+1:

### Default

## Alternatives

* Native but Android-only [DrawerLayoutAndroid](https://facebook.github.io/react-native/docs/drawerlayoutandroid.html)

* [react-native-side-menu](https://github.com/react-native-fellowship/react-native-side-menu)

* [react-native-drawer](https://github.com/root-two/react-native-drawer)

## License

This project is released under the MIT License.

See the LICENSE file for further details.

[travis-image]: https://img.shields.io/travis/bringnow/react-native-autopilot/master.svg?style=flat-square

[travis-url]: https://travis-ci.org/bringnow/react-native-autopilot

[coveralls-image]: https://img.shields.io/coveralls/bringnow/react-native-autopilot/master.svg?style=flat-square

[coveralls-url]: https://coveralls.io/r/bringnow/react-native-autopilot

[dependency-image]: http://img.shields.io/david/bringnow/react-native-autopilot.svg?style=flat-square

[dependency-url]: https://david-dm.org/bringnow/react-native-autopilot