react-native-circle-drawer's Introduction

Description

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

Installation

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

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

react-native-circle-drawer's People

Contributors

Stargazers

Watchers

react-native-circle-drawer's Issues

react-native-circle-drawer is not working

Here is the source code 👍
/**

Sample React Native App
https://github.com/facebook/react-native
@flow
*/

import React, { Component } from "react";
import { Platform, StyleSheet, View, Image, TouchableOpacity, Alert, Text, Button } from "react-native";
import Drawer from 'react-native-circle-drawer'

export default class App extends Component {

constructor(props) {
  super(props);
}

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() {
  return (
    <Drawer
        ref="DRAWER"
        sideMenu={this.renderSideMenu()}
        topRightView={this.renderTopRightView()}
    >
      <Button title="open drawer" onPress={()=>this.openDrawer()} />
      <Text>Main application here!!</Text>
    </Drawer>
  );
}

}

const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
backgroundColor: '#ecf0f1',
padding: 8,
},
});

Showing below error message 👍 ---------------------------------------------------------------------
TypeError: One of the sources for assign has an enumerable key on the prototype chain. Are you trying to assign a prototype property? We don't allow it, as this is an edge case that we do not support. This error is a performance optimization and not spec compliant.

This error is located at:
in Drawer (at App.js:41)
in App (at renderApplication.js:33)
in RCTView (at View.js:60)
in View (at AppContainer.js:102)
in RCTView (at View.js:60)
in View (at AppContainer.js:122)
in AppContainer (at renderApplication.js:32)
assign
D:\MobileApp56\node_modules\react-native\Libraries\polyfills\Object.es6.js:54:12
renderDrawer
D:\MobileApp56\node_modules\react-native-circle-drawer\Drawer.js:84:16
proxiedMethod
D:\MobileApp56\node_modules\react-proxy\modules\createPrototypeProxy.js:44:35
render
D:\MobileApp56\node_modules\react-native-circle-drawer\Drawer.js:148:9
proxiedMethod
D:\MobileApp56\node_modules\react-proxy\modules\createPrototypeProxy.js:44:35
finishClassComponent
D:\MobileApp56\node_modules\react-native\Libraries\Renderer\ReactNativeRenderer-dev.js:8811:23
updateClassComponent
D:\MobileApp56\node_modules\react-native\Libraries\Renderer\ReactNativeRenderer-dev.js:8762:6
beginWork
D:\MobileApp56\node_modules\react-native\Libraries\Renderer\ReactNativeRenderer-dev.js:9581:10
performUnitOfWork
D:\MobileApp56\node_modules\react-native\Libraries\Renderer\ReactNativeRenderer-dev.js:12924:25
workLoop
D:\MobileApp56\node_modules\react-native\Libraries\Renderer\ReactNativeRenderer-dev.js:12953:43
renderRoot
D:\MobileApp56\node_modules\react-native\Libraries\Renderer\ReactNativeRenderer-dev.js:12996:17
performWorkOnRoot
D:\MobileApp56\node_modules\react-native\Libraries\Renderer\ReactNativeRenderer-dev.js:13632:34
performWork
D:\MobileApp56\node_modules\react-native\Libraries\Renderer\ReactNativeRenderer-dev.js:13545:26
performSyncWork
D:\MobileApp56\node_modules\react-native\Libraries\Renderer\ReactNativeRenderer-dev.js:13506:16
requestWork
D:\MobileApp56\node_modules\react-native\Libraries\Renderer\ReactNativeRenderer-dev.js:13392:6
scheduleWorkImpl
D:\MobileApp56\node_modules\react-native\Libraries\Renderer\ReactNativeRenderer-dev.js:13259:24
scheduleWork
D:\MobileApp56\node_modules\react-native\Libraries\Renderer\ReactNativeRenderer-dev.js:13207:28
scheduleRootUpdate
D:\MobileApp56\node_modules\react-native\Libraries\Renderer\ReactNativeRenderer-dev.js:13930:17
_updateContainerAtExpirationTime
D:\MobileApp56\node_modules\react-native\Libraries\Renderer\ReactNativeRenderer-dev.js:13966:6
updateContainer
D:\MobileApp56\node_modules\react-native\Libraries\Renderer\ReactNativeRenderer-dev.js:13991:8
render
D:\MobileApp56\node_modules\react-native\Libraries\Renderer\ReactNativeRenderer-dev.js:14726:35
renderApplication
D:\MobileApp56\node_modules\react-native\Libraries\ReactNative\renderApplication.js:49:21
run
D:\MobileApp56\node_modules\react-native\Libraries\ReactNative\AppRegistry.js:102:10
runApplication
D:\MobileApp56\node_modules\react-native\Libraries\ReactNative\AppRegistry.js:194:26
__callFunction
D:\MobileApp56\node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:351:47

D:\MobileApp56\node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:116:26
__guardSafe
D:\MobileApp56\node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:314:6
callFunctionReturnFlushedQueue
D:\MobileApp56\node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:115:17

close button not working in ios

in android close button working fine. but in ios close button is not working..not even click is happening in touchableopacity

Add Icon along with items

Dear,

sweetest report ever

also can i add some icons left to the items listed in the drawer menu

Recommend Projects

dopey2 / react-native-circle-drawer Goto Github PK