├── .gitattributes
├── .gitignore
├── LICENSE
├── README.md
├── close.png
├── img.gif
├── index.js
└── package.json


/.gitattributes:
--------------------------------------------------------------------------------
1 | *.pbxproj -text


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | 
 2 | # OSX
 3 | #
 4 | .DS_Store
 5 | 
 6 | # node.js
 7 | #
 8 | node_modules/
 9 | npm-debug.log
10 | yarn-error.log
11 |   
12 | 
13 | # Xcode
14 | #
15 | build/
16 | *.pbxuser
17 | !default.pbxuser
18 | *.mode1v3
19 | !default.mode1v3
20 | *.mode2v3
21 | !default.mode2v3
22 | *.perspectivev3
23 | !default.perspectivev3
24 | xcuserdata
25 | *.xccheckout
26 | *.moved-aside
27 | DerivedData
28 | *.hmap
29 | *.ipa
30 | *.xcuserstate
31 | project.xcworkspace
32 |       
33 | 
34 | # Android/IntelliJ
35 | #
36 | build/
37 | .idea
38 | .gradle
39 | local.properties
40 | *.iml
41 | 
42 | # BUCK
43 | buck-out/
44 | \.buckd/
45 | *.keystore
46 |       


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2018 Sajjad Asadi
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | 
  2 | # react-native-rounded-navigation-drawer [![npm version](https://img.shields.io/npm/v/react-native-rounded-navigation-drawer.svg)](https://www.npmjs.com/package/react-native-rounded-navigation-drawer)
  3 | <img src="https://raw.githubusercontent.com/lvlrSajjad/react-native-rounded-navigation-drawer/master/img.gif">
  4 | 
  5 | ## Getting started
  6 | 
  7 | `$ npm install react-native-rounded-navigation-drawer --save`
  8 | 
  9 | ## Props
 10 |     darkColor = String HexColorCode
 11 |     lightColor = String HexColorCode
 12 |     onItemPress= function like : {(item)=>console.log(item)}
 13 |     data = Array
 14 |     imageUri= String Image Link Uri
 15 | ## Usage
 16 | ```javascript
 17 | import React, {Component} from 'react';
 18 | import {Platform, StyleSheet, Text, View, TouchableOpacity} from 'react-native';
 19 | import {FancyNavigation,openNv,closeNv} from 'react-native-rounded-navigation-drawer';
 20 | 
 21 | const instructions = Platform.select({
 22 |     ios: 'Press Cmd+R to reload,\n' + 'Cmd+D or shake for dev menu',
 23 |     android:
 24 |     'Double tap R on your keyboard to reload,\n' +
 25 |     'Shake or press menu button for dev menu',
 26 | });
 27 | 
 28 | type Props = {};
 29 | export default class App extends Component<Props> {
 30 |     constructor(props) {
 31 |         super(props);
 32 |         this.state = {
 33 |             //id and title fields in datastructures is required
 34 |             data:[
 35 |                 {id: '1', title: "Red", color: "#f44336", span: 1},
 36 |                 {id: '2', title: "Pink", color: "#E91E63", span: 2},
 37 |                 {id: '3', title: "Purple", color: "#9C27B0", span: 3},
 38 |                 {id: '4', title: "Deep Purple", color: "#673AB7", span: 1},
 39 |                 {id: '5', title: "Indigo", color: "#3F51B5", span: 1},
 40 |                 {id: '6', title: "Blue", color: "#2196F3", span: 1},
 41 |                 {id: '7', title: "Light Blue", color: "#03A9F4", span: 3},
 42 |                 {id: '8', title: "Cyan", color: "#00BCD4", span: 2},
 43 |                 {id: '9', title: "Teal", color: "#009688", span: 1},
 44 |                 {id: '10', title: "Green", color: "#4CAF50", span: 1},
 45 |                 {id: '11', title: "Light Green", color: "#8BC34A", span: 2},
 46 |                 {id: '12', title: "Lime", color: "#CDDC39", span: 3},
 47 |                 {id: '13', title: "Yellow", color: "#FFEB3B", span: 2},
 48 |                 {id: '14', title: "Amber", color: "#FFC107", span: 1},
 49 |                 {id: '15', title: "Orange", color: "#FF5722", span: 3},
 50 |             ],
 51 | 
 52 |         }
 53 |     }
 54 | 
 55 |     render() {
 56 |         return (
 57 | 
 58 |             <View style={styles.container}>
 59 |                 <FancyNavigation
 60 |                     darkColor = "#1976D2"
 61 |                     lightColor = "#03A9F4"
 62 |                     onItemPress= {(item)=>console.log(item)}
 63 |                     data = {this.state.data}
 64 |                    imageUri='https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTwu7s_Ic3YioDVl9AmoJGsKbBuCKFVp2cD3KCPzdYlBLOcGmeV'
 65 |                 />
 66 | 
 67 |                 <TouchableOpacity
 68 |                     onPress={() => {
 69 |                         openNv();
 70 |                     }}
 71 |                     style={{width: 60,
 72 |                      height: 46,
 73 |                      position:'absolute',
 74 |                      top:16,
 75 |                      left:0,
 76 |                      backgroundColor: "#03A9F4",
 77 |                      borderBottomRightRadius: 8,
 78 |                      borderTopRightRadius: 8,
 79 |                      }}
 80 |                      />
 81 |                 <Text style={styles.welcome}>Welcome to React Native!</Text>
 82 |                 <Text style={styles.instructions}>To get started, edit App.js</Text>
 83 |             </View>
 84 |         );
 85 |     }
 86 | }
 87 | 
 88 | const styles = StyleSheet.create({
 89 |     container: {
 90 |         flex: 1,
 91 |         justifyContent: 'center',
 92 |         alignItems: 'center',
 93 |         backgroundColor: '#F5FCFF',
 94 |     },
 95 |     welcome: {
 96 |         fontSize: 20,
 97 |         textAlign: 'center',
 98 |         margin: 10,
 99 |     },
100 |     instructions: {
101 |         textAlign: 'center',
102 |         color: '#333333',
103 |         marginBottom: 5,
104 |     },
105 | });
106 | 
107 | ```
108 | 


--------------------------------------------------------------------------------
/close.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/lvlrSajjad/react-native-rounded-navigation-drawer/ae58b77303f1adc25d3107b9a741e62ea16c7f46/close.png


--------------------------------------------------------------------------------
/img.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/lvlrSajjad/react-native-rounded-navigation-drawer/ae58b77303f1adc25d3107b9a741e62ea16c7f46/img.gif


--------------------------------------------------------------------------------
/index.js:
--------------------------------------------------------------------------------
  1 | import React, {Component} from 'react';
  2 | import {Animated, StyleSheet, Text, View, TouchableOpacity, Dimensions, FlatList, Image} from 'react-native';
  3 | 
  4 | let {height, width} = Dimensions.get('window');
  5 | 
  6 | export class FancyNavigation extends Component {
  7 | 
  8 |     constructor(props) {
  9 |         super(props);
 10 |         this.state = {
 11 |             open: false,
 12 |             offsetY: new Animated.Value(100),
 13 |             fadeIn: new Animated.Value(0),
 14 |             innerOffsetX: new Animated.Value(-100),
 15 |             outerOffsetX: new Animated.Value(-150)
 16 |         };
 17 |         openNv = openNv.bind(this);
 18 |         closeNv = closeNv.bind(this);
 19 | 
 20 |     }
 21 | 
 22 |     render() {
 23 |         return (
 24 |             this.state.open ?
 25 |                 <View style={styles.container}>
 26 |                     <Animated.View style={[{
 27 |                         backgroundColor: this.props.lightColor, opacity: this.state.fadeIn,
 28 |                         transform: [{translateX: this.state.outerOffsetX}]
 29 |                     }, styles.listContainer]}>
 30 |                         <Animated.View style={[{
 31 |                             backgroundColor: this.props.darkColor, opacity: this.state.fadeIn,
 32 |                             transform: [{translateX: this.state.innerOffsetX}]
 33 |                         }, styles.listInnerContainer]}>
 34 | 
 35 |                         </Animated.View>
 36 |                     </Animated.View>
 37 |                     <Animated.View
 38 | 
 39 |                         style={[{
 40 |                             opacity: this.state.fadeIn,
 41 |                             transform: [{translateY: this.state.offsetY}],
 42 |                         }, styles.closeButtonContainer]}>
 43 |                         <TouchableOpacity
 44 |                             style={[{
 45 |                                 backgroundColor: this.props.darkColor
 46 |                             }, styles.closeButton]}
 47 |                             onPress={() => closeNv()}
 48 |                         >
 49 |                             <Image style={{alignSelf: 'center', width: 32, height: 32}}
 50 |                                    source={require('./close.png')}
 51 |                             />
 52 |                         </TouchableOpacity>
 53 |                     </Animated.View>
 54 |                     <FlatList
 55 |                         style={{width: width, height: height - 300, position: 'absolute', left: 42, top: 58}}
 56 |                         data={this.props.data}
 57 |                         extraData={this.props.data}
 58 |                         keyExtractor={(item, index) => item.id}
 59 |                         renderItem={this._renderItem}
 60 |                     />
 61 |                     <Animated.Image
 62 |                         style={{opacity: this.state.fadeIn,position: 'absolute', width: 84, height: 84, borderRadius: 42, top: 42, right: 42}}
 63 |                         source={{uri: this.props.imageUri}}
 64 |                     />
 65 |                 </View> :
 66 |                 null
 67 | 
 68 |         );
 69 |     }
 70 | 
 71 |     _renderItem = ({item}) => (
 72 |         <TouchableOpacity onPress={() => this.props.onItemPress(item)}>
 73 |             <Animated.View style={[{
 74 |                 opacity: this.state.fadeIn,
 75 |                 transform: [{translateX: this.state.outerOffsetX}]
 76 |             }]}>
 77 |                 <Text style={{color: '#FFFFFF', height: 58, width: width, textAlign: 'left', fontSize: 24}}>
 78 |                     {item.title}
 79 |                 </Text>
 80 |             </Animated.View>
 81 |         </TouchableOpacity>
 82 |     );
 83 | }
 84 | 
 85 | const styles = StyleSheet.create({
 86 |     container: {
 87 |         position: 'absolute',
 88 |         width: width,
 89 |         height: height,
 90 |         justifyContent: 'center',
 91 |         alignItems: 'center',
 92 |         backgroundColor: '#FFFFFFcc',
 93 |         zIndex: 1099
 94 |     },
 95 |     listContainer: {
 96 |         position: 'absolute',
 97 |         top: 0,
 98 |         height: height - 150,
 99 |         width: width * 2 - 100,
100 |         borderBottomRightRadius: width * 2,
101 |     },
102 |     listInnerContainer: {
103 |         position: 'absolute',
104 |         top: 0,
105 |         height: height - 150,
106 |         width: width * 2 - 170,
107 |         borderBottomRightRadius: width * 2,
108 |     },
109 |     welcome: {
110 |         fontSize: 20,
111 |         textAlign: 'center',
112 |         margin: 10,
113 |     },
114 |     closeButtonContainer: {
115 |         position: 'absolute',
116 |         bottom: 0,
117 |         width: width,
118 |         height: 150,
119 |         alignItems: 'center',
120 |         justifyContent: 'center'
121 |     },
122 |     closeButton: {
123 |         width: 64,
124 |         height: 64,
125 |         borderRadius: 32,
126 |         elevation: 8,
127 |         alignItems: 'center',
128 |         justifyContent: 'center'
129 |     },
130 | });
131 | 
132 | export function openNv() {
133 | 
134 |     this.setState({
135 |         open: true,
136 |         offsetY: new Animated.Value(100),
137 |         fadeIn: new Animated.Value(0),
138 |         innerOffsetX: new Animated.Value(-100),
139 |         outerOffsetX: new Animated.Value(-150)
140 |     }, () => {
141 |         Animated.parallel([
142 |             Animated.timing(
143 |                 this.state.offsetY,
144 |                 {
145 |                     toValue: 0,
146 |                     duration: 500,
147 |                     useNativeDriver: true
148 |                 }),
149 |             Animated.timing(
150 |                 this.state.fadeIn,
151 |                 {
152 |                     toValue: 1,
153 |                     duration: 500,
154 |                     useNativeDriver: true
155 |                 }
156 |             ),
157 |             Animated.timing(
158 |                 this.state.innerOffsetX,
159 |                 {
160 |                     toValue: 0,
161 |                     duration: 500,
162 |                     useNativeDriver: true
163 |                 }
164 |             ),
165 |             Animated.timing(
166 |                 this.state.outerOffsetX,
167 |                 {
168 |                     toValue: 0,
169 |                     duration: 500,
170 |                     useNativeDriver: true
171 |                 }
172 |             )
173 |         ]).start();
174 |     })
175 | 
176 | }
177 | 
178 | export function closeNv() {
179 |     Animated.parallel([
180 |         Animated.timing(
181 |             this.state.offsetY,
182 |             {
183 |                 toValue: 100,
184 |                 duration: 500,
185 |                 useNativeDriver: true
186 |             }),
187 |         Animated.timing(
188 |             this.state.fadeIn,
189 |             {
190 |                 toValue: 0,
191 |                 duration: 500,
192 |                 useNativeDriver: true
193 |             }
194 |         ),
195 |         Animated.timing(
196 |             this.state.innerOffsetX,
197 |             {
198 |                 toValue: -100,
199 |                 duration: 500,
200 |                 useNativeDriver: true
201 |             }
202 |         ),
203 |         Animated.timing(
204 |             this.state.outerOffsetX,
205 |             {
206 |                 toValue: -150,
207 |                 duration: 500,
208 |                 useNativeDriver: true
209 |             }
210 |         )
211 |     ]).start(()=>this.setState({open: false}));
212 | 
213 | }
214 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | 
 2 | {
 3 |   "name": "react-native-rounded-navigation-drawer",
 4 |   "version": "1.0.2",
 5 |   "description": "",
 6 |   "main": "index.js",
 7 |   "scripts": {
 8 |     "test": "echo \"Error: no test specified\" && exit 1"
 9 |   },
10 |   "author": {
11 |     "name": "Sajjad Asadi",
12 |     "email": "lvlr.xaus@gmail.com"
13 |   },
14 |   "keywords": [
15 |     "react-native",
16 |     "react-native-navigation-drawer",
17 | 	"navigation-drawer",
18 | 	"navigation drawer",
19 | 	"react native navigation drawer",
20 | 	"react-native-rounded-navigation-drawer",
21 | 	"react-native-round-navigation-drawer",
22 | 	"react-native-rounded",
23 | 	"react-native-round",
24 | 	"drawer"
25 |   ],
26 |   "license": "MIT",
27 |   "maintainers": [
28 |     {
29 |       "name": "lvlrsajjad",
30 |       "email": "lvlr.xaus@gmail.com"
31 |     }
32 |   ],
33 |   "homepage": "https://github.com/lvlrSajjad/react-native-rounded-navigation-drawer",
34 | 
35 |   "peerDependencies": {
36 |     "react-native": "^0.41.2",
37 |     "react-native-windows": "0.41.0-rc.1"
38 | 
39 |   }
40 | }
41 | 


--------------------------------------------------------------------------------