├── .gitignore
├── .npmignore
├── LICENSE
├── README.md
├── button.js
├── index.js
├── overlay.js
├── package.json
├── screencasts
    └── demo.gif
└── sheet.js


/.gitignore:
--------------------------------------------------------------------------------
 1 | *.[aod]
 2 | *.DS_Store
 3 | .DS_Store
 4 | *Thumbs.db
 5 | *.iml
 6 | .gradle
 7 | .idea
 8 | node_modules
 9 | npm-debug.log
10 | /android/build
11 | /ios/**/*xcuserdata*
12 | /ios/**/*xcshareddata*
13 | 


--------------------------------------------------------------------------------
/.npmignore:
--------------------------------------------------------------------------------
 1 | *.DS_Store
 2 | .DS_Store
 3 | *Thumbs.db
 4 | .gradle
 5 | .idea
 6 | *.iml
 7 | npm-debug.log
 8 | node_modules
 9 | /android/build
10 | /ios/**/*xcuserdata*
11 | /ios/**/*xcshareddata*
12 | 
13 | 


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


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # React Native ActionSheet (remobile)
 2 | A pure js ActionSheet like ios ActionSheet, support ios and android
 3 | 
 4 | ## Installation
 5 | ```sh
 6 | npm install @remobile/react-native-action-sheet --save
 7 | ```
 8 | 
 9 | ## Usage
10 | 
11 | ### Example
12 | ```js
13 | 'use strict';
14 | 
15 | var React = require('react');
16 | var ReactNative = require('react-native');
17 | var {
18 |     StyleSheet,
19 |     TouchableOpacity,
20 |     View,
21 | } = ReactNative;
22 | 
23 | var ActionSheet = require('@remobile/react-native-action-sheet');
24 | var Button = require('@remobile/react-native-simple-button');
25 | 
26 | module.exports = React.createClass({
27 |     getInitialState() {
28 |         return {
29 |             show: false
30 |         };
31 |     },
32 |     onCancel() {
33 |         this.setState({show:false});
34 |     },
35 |     onOpen() {
36 |         this.setState({show:true});
37 |     },
38 |     render() {
39 |         return (
40 |             <View style={styles.container}>
41 |                 <Button onPress={this.onOpen}>Photo</Button>
42 |                 <ActionSheet
43 |                     visible={this.state.show}
44 |                     onCancel={this.onCancel} >
45 |                     <ActionSheet.Button>Capture</ActionSheet.Button>
46 |                     <ActionSheet.Button>Photo</ActionSheet.Button>
47 |                     <ActionSheet.Button>Camera</ActionSheet.Button>
48 |                 </ActionSheet>
49 |             </View>
50 |         );
51 |     },
52 | });
53 | 
54 | var styles = StyleSheet.create({
55 |     container: {
56 |         flex: 1,
57 |         justifyContent: 'center'
58 |     },
59 | });
60 | ```
61 | 
62 | ## Screencasts
63 | 
64 | ![loading](https://github.com/remobile/react-native-action-sheet/blob/master/screencasts/demo.gif)
65 | 
66 | ##ActionSheet
67 | #### Props
68 | - `visible : PropTypes.boolean.isRequired` - must use state to control ActionSheet visible
69 | - `onCancel : PropTypes.func.isRequired` - use to hide ActionSheet
70 | - `cancelText : PropTypes.string` - default is 'Cancel'
71 | 
72 | ##ActionSheet.Button
73 | #### Props
74 | - `buttonStyle : TouchableOpacity.propTypes.style` - set button style
75 | - `textStyle : Text.propTypes.style` - set button text style
76 | - `onPress : PropTypes.func` - callback for button click
77 | 


--------------------------------------------------------------------------------
/button.js:
--------------------------------------------------------------------------------
 1 | /*
 2 | * (The MIT License)
 3 | * Copyright (c) 2015-2016 YunJiang.Fang <42550564@qq.com>
 4 | */
 5 | 'use strict';
 6 | 
 7 | const React = require('react');
 8 | const ReactNative = require('react-native');
 9 | const { StyleSheet, Text, TouchableOpacity, View } = ReactNative;
10 | 
11 | module.exports = React.createClass({
12 |     render: function () {
13 |         return (
14 |             <TouchableOpacity
15 |                 activeOpacity={0.5}
16 |                 style={[styles.button, this.props.buttonStyle]}
17 |                 onPress={this.props.onPress}>
18 |                 <Text style={[styles.buttonText, this.props.textStyle]}>
19 |                     {this.props.children}
20 |                 </Text>
21 |             </TouchableOpacity>
22 |         );
23 |     },
24 | });
25 | 
26 | const styles = StyleSheet.create({
27 |     buttonText: {
28 |         color: '#0069d5',
29 |         alignSelf: 'center',
30 |         fontSize: 18,
31 |     },
32 |     button: {
33 |         height: 40,
34 |         backgroundColor: 'white',
35 |         borderColor: 'gray',
36 |         borderBottomWidth: 1,
37 |         alignSelf: 'stretch',
38 |         justifyContent: 'center',
39 |     },
40 | });
41 | 


--------------------------------------------------------------------------------
/index.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | const React = require('react');
 4 | const ReactNative = require('react-native');
 5 | const {
 6 |     StyleSheet,
 7 |     TouchableOpacity,
 8 |     View,
 9 | } = ReactNative;
10 | 
11 | const Button = require('./button.js');
12 | const Overlay = require('./overlay.js');
13 | const Sheet = require('./sheet.js');
14 | 
15 | module.exports = React.createClass({
16 |     getDefaultProps: function () {
17 |         return {
18 |             cancelText: 'Cancel',
19 |         };
20 |     },
21 |     render () {
22 |         return (
23 |             <Overlay visible={this.props.visible}>
24 |                 <View style={styles.actionSheetContainer}>
25 |                     <TouchableOpacity
26 |                         style={{ flex:1 }}
27 |                         onPress={this.props.onCancel} />
28 |                     <Sheet visible={this.props.visible}>
29 |                         <View style={styles.buttonContainer}>
30 |                             {this.props.children}
31 |                         </View>
32 |                         <Button
33 |                             buttonStyle={{ marginTop:6, borderRadius:6 }}
34 |                             textStyle={{ color:'red' }}
35 |                             onPress={this.props.onCancel}>{this.props.cancelText}</Button>
36 |                     </Sheet>
37 |                 </View>
38 |             </Overlay>
39 |         );
40 |     },
41 | });
42 | module.exports.Button = Button;
43 | 
44 | const styles = StyleSheet.create({
45 |     actionSheetContainer: {
46 |         flex: 1,
47 |         padding: 10,
48 |         paddingBottom: 6,
49 |         justifyContent: 'flex-end',
50 |         backgroundColor: 'rgba(0, 0, 0, 0.5)',
51 |     },
52 |     buttonContainer: {
53 |         borderRadius:6,
54 |         overflow: 'hidden',
55 |     },
56 | });
57 | 


--------------------------------------------------------------------------------
/overlay.js:
--------------------------------------------------------------------------------
 1 | /*
 2 | * (The MIT License)
 3 | * Copyright (c) 2015-2016 YunJiang.Fang <42550564@qq.com>
 4 | */
 5 | 'use strict';
 6 | 
 7 | const React = require('react');
 8 | const ReactNative = require('react-native');
 9 | const { Animated, StyleSheet, View, Dimensions } = ReactNative;
10 | 
11 | const DEFAULT_ANIMATE_TIME = 300;
12 | 
13 | module.exports = React.createClass({
14 |     getInitialState () {
15 |         return {
16 |             fadeAnim: new Animated.Value(0),
17 |             overlayStyle: styles.emptyOverlay, //on android opacity=0 also can cover screen, so use overlayStyle fix it
18 |         };
19 |     },
20 |     onAnimatedEnd () {
21 |         !this.props.visible && this.setState({ overlayStyle:styles.emptyOverlay });
22 |     },
23 |     componentWillReceiveProps (newProps) {
24 |         newProps.visible && this.setState({ overlayStyle: styles.fullOverlay });
25 |         return Animated.timing(this.state.fadeAnim, {
26 |             toValue: newProps.visible ? 1 : 0,
27 |             duration: DEFAULT_ANIMATE_TIME,
28 |         }).start(this.onAnimatedEnd);
29 |     },
30 | 
31 |     render () {
32 |         return (
33 |             <Animated.View style={[this.state.overlayStyle, { opacity: this.state.fadeAnim }]}>
34 |                 {this.props.children}
35 |             </Animated.View>
36 |         );
37 |     },
38 | });
39 | 
40 | const styles = StyleSheet.create({
41 |     fullOverlay: {
42 |         top: 0,
43 |         bottom: 0,
44 |         left: 0,
45 |         right: 0,
46 |         backgroundColor: 'transparent',
47 |         position: 'absolute',
48 |     },
49 |     emptyOverlay: {
50 |         backgroundColor: 'transparent',
51 |         position: 'absolute',
52 |     },
53 | });
54 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |     "name": "@remobile/react-native-action-sheet",
 3 |     "version": "1.0.2",
 4 |     "description": "A pure js ActionSheet like ios ActionSheet, support ios and android",
 5 |     "main": "index.js",
 6 |     "author": {
 7 |         "name": "YunJiang.Fang",
 8 |         "email": "42550564@qq.com"
 9 |     },
10 |     "license": "MIT",
11 |     "keywords": [
12 |         "react-native",
13 |         "react-component",
14 |         "ios",
15 |         "android",
16 |         "action sheet",
17 |         "ActionSheet",
18 |         "animation",
19 |         "remobile",
20 |         "mobile"
21 |     ],
22 |     "homepage": "https://github.com/remobile/react-native-action-sheet",
23 |     "bugs": {
24 |         "url": "https://github.com/remobile/react-native-action-sheet/issues"
25 |     },
26 |     "repository": {
27 |         "type": "git",
28 |         "url": "git://github.com/remobile/react-native-action-sheet.git"
29 |     }
30 | }
31 | 


--------------------------------------------------------------------------------
/screencasts/demo.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/remobile/react-native-action-sheet/cf9899fdedf3e8f4eb6a315ec3593d29419c0c0b/screencasts/demo.gif


--------------------------------------------------------------------------------
/sheet.js:
--------------------------------------------------------------------------------
 1 | /*
 2 | * (The MIT License)
 3 | * Copyright (c) 2015-2016 YunJiang.Fang <42550564@qq.com>
 4 | */
 5 | 'use strict';
 6 | 
 7 | const React = require('react');
 8 | const ReactNative = require('react-native');
 9 | const { Animated, StyleSheet, View, Dimensions } = ReactNative;
10 | 
11 | const DEFAULT_BOTTOM = -300;
12 | const DEFAULT_ANIMATE_TIME = 300;
13 | 
14 | module.exports = React.createClass({
15 |     getInitialState: function () {
16 |         return {
17 |             bottom: new Animated.Value(DEFAULT_BOTTOM),
18 |         };
19 |     },
20 |     componentWillReceiveProps: function (newProps) {
21 |         return Animated.timing(this.state.bottom, {
22 |             toValue: newProps.visible ? 0 : DEFAULT_BOTTOM,
23 |             duration: DEFAULT_ANIMATE_TIME,
24 |         }).start();
25 |     },
26 | 
27 |     render: function () {
28 |         return (
29 |             <Animated.View style={{ bottom: this.state.bottom }}>
30 |                 {this.props.children}
31 |             </Animated.View>
32 |         );
33 |     },
34 | });
35 | 


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