├── .gitignore
├── LICENSE
├── README.md
├── button.js
├── fade_in_view.js
├── index.js
└── package.json


/.gitignore:
--------------------------------------------------------------------------------
 1 | # Logs
 2 | logs
 3 | *.log
 4 | 
 5 | # Runtime data
 6 | pids
 7 | *.pid
 8 | *.seed
 9 | 
10 | # Directory for instrumented libs generated by jscoverage/JSCover
11 | lib-cov
12 | 
13 | # Coverage directory used by tools like istanbul
14 | coverage
15 | 
16 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
17 | .grunt
18 | 
19 | # node-waf configuration
20 | .lock-wscript
21 | 
22 | # Compiled binary addons (http://nodejs.org/api/addons.html)
23 | build/Release
24 | 
25 | # Dependency directory
26 | # https://www.npmjs.org/doc/misc/npm-faq.html#should-i-check-my-node_modules-folder-into-git
27 | node_modules
28 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | The MIT License (MIT)
 2 | 
 3 | Copyright (c) 2015 Eyal Eizenberg
 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 | 
23 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | ## React Native custom action sheet
 2 | 
 3 | ### What is this?
 4 | This component will fade in/out an overlay and will pop in a modal with a cancel button. You can pass any view that you want to the component and it will be shown in the modal. In the example below I am passing a date picker.
 5 | 
 6 | <p align="center">
 7 |     <img src ="http://i.imgur.com/Iq6YZGj.gif" />
 8 | </p>
 9 | 
10 | ### Installation
11 | ```npm install react-native-custom-action-sheet --save```
12 | 
13 | ### Usage example
14 | 
15 | ```javascript
16 | var CustomActionSheet = require('react-native-custom-action-sheet');
17 | 
18 | var SomeComponent = React.createClass({
19 |   render: function() {
20 |     return (
21 |       <View>
22 |         <CustomActionSheet modalVisible={this.state.modalVisible} onCancel={this.toggleModal}>
23 |           <View style={styles.datePickerContainer}>
24 |             <DatePickerIOS mode={"date"} date={@state.dateForPicker} onDateChange={@dateChanged} />
25 |           </View>
26 |         </CustomActionSheet>
27 |       </View>
28 |     );
29 |   }
30 | });
31 | ```
32 | 
33 | ### Component props
34 | - `modalVisible` (Boolean) - Decide if the component should be visible or not.
35 | - `onCancel` (Function) - Function to run when the cancel button/background has been pressed.
36 | - `buttonText` (String) - The text of the onCancel button. Defaults to Cancel.
37 | - `backgroundColor` (String) - The color of the fade-in effect background. Defaults to 'black'.
38 | 
39 | 
40 | ### Questions/Bugs/Ideas?
41 | Feel free to open an issue on github, send suggestions, fork this repository or contact me at eyal.eizenberg@samanage.com
42 | 
43 | This package was developed during my work at [Samanage](http://www.samanage.com/).
44 | 
45 | Thanks and Enjoy! :)
46 | 


--------------------------------------------------------------------------------
/button.js:
--------------------------------------------------------------------------------
 1 | 'use strict'
 2 | 
 3 | var React = require('react');
 4 | var ReactNative = require('react-native');
 5 | var { StyleSheet, Text, TouchableOpacity, View } = ReactNative;
 6 | 
 7 | var Button = React.createClass({
 8 |   render: function() {
 9 |     return (
10 |       <TouchableOpacity style={styles.button} onPress={this.props.onPress}>
11 |         <Text style={styles.buttonText}>
12 |           {this.props.text}
13 |         </Text>
14 |       </TouchableOpacity>
15 |     );
16 |   }
17 | });
18 | 
19 | var styles = StyleSheet.create({
20 |   buttonText: {
21 |     color: '#0069d5',
22 |     alignSelf: 'center',
23 |     fontSize: 18
24 |   },
25 |   button: {
26 |     height: 36,
27 |     backgroundColor: 'white',
28 |     borderColor: 'white',
29 |     borderWidth: 1,
30 |     borderRadius: 6,
31 |     marginBottom: 10,
32 |     alignSelf: 'stretch',
33 |     justifyContent: 'center'
34 |   }
35 | });
36 | 
37 | module.exports = Button
38 | 


--------------------------------------------------------------------------------
/fade_in_view.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | var React = require('react');
 4 | var ReactNative = require('react-native');
 5 | var { Animated, Dimensions, StyleSheet, View } = ReactNative;
 6 | var window = Dimensions.get('window');
 7 | 
 8 | var FadeInView = React.createClass({
 9 |   getInitialState: function() {
10 |     return {
11 |       fadeAnim: new Animated.Value(0)
12 |     };
13 |   },
14 | 
15 |   componentDidMount() {
16 |     this._animate(this.props);
17 |   },
18 | 
19 |   componentWillReceiveProps: function(newProps) {
20 |     this._animate(newProps);
21 |   },
22 | 
23 |   _animate(newProps){
24 |     return Animated.timing(this.state.fadeAnim, {
25 |       toValue: newProps.visible ? 0.7 : 0,
26 |       duration: 300
27 |     }).start();
28 |   },
29 |   
30 |   render: function() {
31 |     return (
32 |       <Animated.View style={[styles.overlay,
33 |           {opacity: this.state.fadeAnim},
34 |           {backgroundColor: this.props.backgroundColor || 'black' }
35 |         ]}>
36 |         {this.props.children}
37 |       </Animated.View>
38 |     );
39 |   }
40 | });
41 | 
42 | var styles = StyleSheet.create({
43 |   overlay: {
44 |     top: 0,
45 |     bottom: 0,
46 |     left: 0,
47 |     right: 0,
48 |     height: window.height,
49 |     width: window.width,
50 |     position: 'absolute'
51 |   }
52 | });
53 | 
54 | module.exports = FadeInView;
55 | 


--------------------------------------------------------------------------------
/index.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | var React = require('react');
 4 | var ReactNative = require('react-native');
 5 | var Button = require('./button');
 6 | var FadeInView = require('./fade_in_view');
 7 | var { Modal, StyleSheet, TouchableOpacity, View } = ReactNative;
 8 | 
 9 | var ActionModal = React.createClass({
10 |   render: function() {
11 |     return (
12 |       <FadeInView visible={this.props.modalVisible} backgroundColor={this.props.backgroundColor}>
13 |         <Modal
14 |           animationType="slide"
15 |           transparent={true}
16 |           visible={this.props.modalVisible}
17 |           onRequestClose={this.props.onCancel}>
18 |           <View style={styles.modalContainer}>
19 |             <TouchableOpacity style={styles.container} onPress={this.props.onCancel}></TouchableOpacity>
20 |             {this.props.children}
21 |             <Button onPress={this.props.onCancel} text={this.props.buttonText || "Cancel"} />
22 |           </View>
23 |         </Modal>
24 |       </FadeInView>
25 |     );
26 |   }
27 | });
28 | 
29 | var styles = StyleSheet.create({
30 |   container: {
31 |     flex: 1
32 |   },
33 |   modalContainer: {
34 |     flex: 1,
35 |     padding: 8,
36 |     paddingBottom: 0,
37 |     justifyContent: "flex-end"
38 |   }
39 | });
40 | 
41 | module.exports = ActionModal;
42 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "react-native-custom-action-sheet",
 3 |   "version": "0.0.11",
 4 |   "description": "iOS custom sheet with fade in/out overlay",
 5 |   "main": "index.js",
 6 |   "scripts": {
 7 |     "test": "echo \"Error: no test specified\" && exit 1"
 8 |   },
 9 |   "repository": {
10 |     "type": "git",
11 |     "url": "git@github.com:eyaleizenberg/react-native-custom-action-sheet.git"
12 |   },
13 |   "keywords": [
14 |     "react-native",
15 |     "react-component",
16 |     "ios",
17 |     "action sheet"
18 |   ],
19 |   "author": "Eyal Eizenberg <eyal.eizenberg@samanage.com> (https://github.com/eyaleizenberg)",
20 |   "license": "MIT",
21 |   "bugs": {
22 |     "url": "https://github.com/eyaleizenberg/react-native-custom-action-sheet/issues"
23 |   },
24 |   "homepage": "https://github.com/eyaleizenberg/react-native-custom-action-sheet"
25 | }
26 | 


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