Description

This is a Drawer for React-Native inspired by Karan Shah Navigation Index Concept

Karan Shah Dribbble account

Karan Shah Navigation Index Concept

Installation

npm install --save react-native-circle-drawer

or

yarn add react-native-circle-drawer

Use

import Drawer from 'react-native-circle-drawer'

render(){
    return(
        <Drawer sideMenu={this.renderSideMenu()}>
            <App/>
        </Index>
    )
}

Props

name	type	default	description
primaryColor	string	#731ED2
secondaryColor	string	#9646EC
cancelColor	string	#731ED2
sideMenu	React.Component
topRightView	React.Component
marginLeft	number	0	left margin starting from the middle of the circle
marginTop	number	0	top margin starting from the middle of the circle
openStart	function		callback when the open animation begin
openEnd	function		callback when the open animation end
closeStart	function		callback when the close animation begin
closeEnd	function		callback when the close animation end

Functions

name	description
open	open the drawer
close	close the drawer

Example

    openDrawer(){
        this.refs.DRAWER.open;
    }
    
    renderSideMenu(){
        return(
            <View style={{flex:1}}>
                <Text>Item 1 </Text>
                <Text>Item 2 </Text>
            </View>
        )
    }
    
    renderTopRightView(){
        return(
            <View>
                <Text>Hello</Text>
            </View>
        )
    }
    
    render(){
        <Drawer
            ref="DRAWER"
            sideMenu={this.renderSideMenu()}
            topRightView={this.renderTopRightView()}
        >
          <Button title="open drawer" onPress={()=>this.openDrawer()} />
          <Text>Main application here!!</Text>
        </Drawer>
    
    }
    

Licence

MIT

Credit

Karan Shah