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.
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
: CompontentleftSidebarWidth
: Number (callbacksidebarWidth
: Number, otherwise use default 280)leftThreshold
: Number (callbackthreshold
: Number, otherwise use default 30)rightSidebar
: CompontentrightSidebarWidth
: Number (callbacksidebarWidth
: Number, otherwise use default 280)rightThreshold
: Number (callbackthreshold
: Number, otherwise use default 30)overlayColor
: Color- childrens: Compontent[]
More effects coming soon! Input / ideas (as issue) or PR are welcome. ๐
- Native but Android-only DrawerLayoutAndroid
- react-native-side-menu
- react-native-drawer
This project is released under the MIT License. See the LICENSE file for further details.