add support for actionSheet type

BaseRouter.js

@@ -150,9 +150,6 @@ export default class BaseRouter {
         if (!action){
             throw new Error("No type is defined for name="+name);
         }
-        if (!this["_"+action]){
-            throw new Error("No type="+action+" is supported");
-        }
         this.nextRoute = this.routes[name];
 
         const handler = "on"+capitalizeFirstLetter(action);
@@ -166,13 +163,12 @@ export default class BaseRouter {
         } else {
             throw new Error("No handler "+handler+" for route="+name);
         }
-        this["_"+action](name, props);
+        if (!this["_"+action]) {
+            this["_" + action](name, props);
+        }
         return true;
     }
 
-    _modal(name:string, props:{ [key: string]: any} ) {
-    }
-
     _push(name:string, props:{ [key: string]: any} ){
         this._stack.push(name);
     }

ExRouter.js

@@ -10,6 +10,7 @@ const {TouchableOpacity, Navigator, StyleSheet, View, Text} = React;
 import Router from './Router';
 import Actions from './Actions';
 import debug from './debug';
+import ActionSheet from '@exponent/react-native-action-sheet';
 
 function parentProps(props = {}){
     const {name, sceneConfig, title, children, router, initial, showNavigationBar, hideNavBar, footer, header, ...routerProps} = props;
@@ -187,6 +188,7 @@ export default class ExRouter extends React.Component {
         this.onReset = this.onReset.bind(this);
         this.onReplace = this.onReplace.bind(this);
         this.onJump = this.onJump.bind(this);
+        this.onActionSheet = this.onActionSheet.bind(this);
         this.state = {};
     }
 
@@ -278,6 +280,10 @@ export default class ExRouter extends React.Component {
         this.setState({modal: null});
     }
 
+    onActionSheet(route: Route, props:{ [key: string]: any}){
+        this.refs.actionsheet.showActionSheetWithOptions({...route.props, ...props}, props.callback);
+    }
+
     render() {
         const router = this.props.router;
         if (!router){
@@ -290,21 +296,23 @@ export default class ExRouter extends React.Component {
         const footer = Footer ? <Footer {...this.props} {...this.state}/> : null;
         debug("RENDER ROUTER:"+router.name);
         return (
-            <View style={styles.transparent}>
-                {header}
-                <ExNavigator ref="nav" initialRouteStack={router.stack.map(route => {
-                        const oldProps = router.routes[route].props
-                        router.routes[route].props = {...oldProps, ...parentProps(this.props)}
-                        return new ExRouteAdapter(router.routes[route])
-                    })}
-                    style={styles.transparent}
-                    sceneStyle={{ paddingTop: 0, backgroundColor:'transparent' }}
-                    renderNavigationBar={props=><ExNavigationBar {...props} router={router}/>}
-                    {...this.props}
-                />
-                {footer}
-                {this.state.modal}
-            </View>
+            <ActionSheet ref="actionsheet">
+                <View style={styles.transparent}>
+                    {header}
+                    <ExNavigator ref="nav" initialRouteStack={router.stack.map(route => {
+                            const oldProps = router.routes[route].props
+                            router.routes[route].props = {...oldProps, ...parentProps(this.props)}
+                            return new ExRouteAdapter(router.routes[route])
+                        })}
+                        style={styles.transparent}
+                        sceneStyle={{ paddingTop: 0, backgroundColor:'transparent' }}
+                        renderNavigationBar={props=><ExNavigationBar {...props} router={router}/>}
+                        {...this.props}
+                    />
+                    {footer}
+                    {this.state.modal}
+                </View>
+            </ActionSheet>
         );
     }
 

Example/Example.js

@@ -19,22 +19,22 @@ import { Provider, connect } from 'react-redux'
 function reducer(state = {}, action) {
     switch (action.type) {
         case Actions.BEFORE_ROUTE:
-            console.log("BEFORE_ROUTE:", action);
+            //console.log("BEFORE_ROUTE:", action);
             return state;
         case Actions.AFTER_ROUTE:
-            console.log("AFTER_ROUTE:", action);
+            //console.log("AFTER_ROUTE:", action);
             return state;
         case Actions.AFTER_POP:
-            console.log("AFTER_POP:", action);
+            //console.log("AFTER_POP:", action);
             return state;
         case Actions.BEFORE_POP:
-            console.log("BEFORE_POP:", action);
+            //console.log("BEFORE_POP:", action);
             return state;
         case Actions.AFTER_DISMISS:
-            console.log("AFTER_DISMISS:", action);
+            //console.log("AFTER_DISMISS:", action);
             return state;
         case Actions.BEFORE_DISMISS:
-            console.log("BEFORE_DISMISS:", action);
+            //console.log("BEFORE_DISMISS:", action);
             return state;
         default:
             return state;
@@ -70,6 +70,7 @@ export default class Example extends React.Component {
                     <Schema name="tab" type="switch" icon={TabIcon} />
 
                     <Route name="register" component={Register} title="Register"/>
+                    <Route name="showActionSheet" type="actionSheet" title="What do you want to do?" options={['Delete', 'Save', 'Cancel']} cancelButtonIndex={2} destructiveButtonIndex={0}/>
                     <Route name="home" component={Home} title="Replace" type="replace"/>
                     <Route name="login" schema="modal">
                         <Router name="loginRouter">

Example/components/Launch.js

@@ -15,6 +15,7 @@ class Launch extends React.Component {
                 <Button onPress={Actions.register2}>Go to Register page without animation</Button>
                 <Button onPress={()=>Actions.error("Error message")}>Popup error</Button>
                 <Button onPress={Actions.tabbar}>Go to TabBar page</Button>
+                <Button onPress={()=>Actions.showActionSheet({callback:index=>alert("Selected:"+index)})}>Show ActionSheet</Button>
             </View>
         );
     }

Example/package.json

@@ -8,7 +8,7 @@
   "dependencies": {
     "react-native": "^0.19.0",
     "react-native-button": "^1.2.1",
-    "react-native-router-flux": "^2.2.2",
+    "react-native-router-flux": "^2.2.3",
     "react-redux": "^4.4.0",
     "redux": "^3.3.1"
   }

README.md

@@ -38,7 +38,7 @@ npm i react-native-router-flux --save
 |-----------|--------|---------|--------------------------------------------|
 | name | string | required | Will be used to call screen transition, for example, `Actions.name(params)`. Must be unique. |
 | component | React.Component | semi-required | The `Component` to be displayed. Not required when defining a nested `Router` or child, see example |
-| type | string | optional | Defines how the new screen is added to the navigator stack. One of `push`, `modal`,`replace`, `switch`, `reset`.  Default is 'push'. `replace` tells navigator to replace current route with new route. `modal` type inserts its 'component' after navigator component. It could be used for popup alerts as well for various needed processes before any navigator transitions (like login auth process).``switch` is used for tab screens. `reset` is similar to replace except it unmounts the componets in the navigator stack. `modal` component could be dismissed by using Actions.dismiss() |
+| type | string | optional | Defines how the new screen is added to the navigator stack. One of `push`, `modal`,`actionSheet`,`replace`, `switch`, `reset`.  Default is 'push'. `replace` tells navigator to replace current route with new route. `actionSheet` shows Action Sheet popup, you must pass callback as callback function, check Example for details. `modal` type inserts its 'component' after navigator component. It could be used for popup alerts as well for various needed processes before any navigator transitions (like login auth process).``switch` is used for tab screens. `reset` is similar to replace except it unmounts the componets in the navigator stack. `modal` component could be dismissed by using Actions.dismiss() |
 | initial | bool | false | Set to `true` if this is the initial screen |
 | title | string | null | The title to be displayed in the navigation bar |
 | schema | string | optional | Set this property to the name of a previously defined `Schema` to inherit its properties |

ReactRouter.js

@@ -0,0 +1,38 @@
+/**
+ * Copyright (c) 2015-present, Pavel Aksonov
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+import React from 'react-native'
+import Router from './Router';
+import ExRouter from './ExRouter';
+const {StyleSheet, View} = React;
+import debug from './debug';
+import Actions from './Actions';
+export default class extends React.Component {
+
+    constructor(props){
+        super(props);
+        const createRouter = props.createRouter || this.createRouter;
+        this.router = createRouter(props);
+    }
+
+    createRouter(props){
+        const schemas = React.Children.map(props.children, child=>child).filter(child=>child.type.prototype.className() === "Schema").map(child=>child.props);
+        const routes = React.Children.map(props.children, child=>child).filter(child=>child.type.prototype.className() === "Route").map(child=>child.props);
+        return new Router(routes, schemas, props.initialRoutes || (props.initial && [props.initial]), props);
+    }
+
+    componentDidMount(){
+        this.router.delegate = this.refs.router;
+    }
+
+    render(){
+        const Component = this.props.router || ExRouter;
+        return (<Component ref="router" {...this.props} router={this.router} dispatch={this.props.dispatch}/>);
+    }
+}

Route.js

@@ -32,9 +32,6 @@ export default class Route {
         this.type = type || 'push';
         this.component = component;
         this.children = children;
-        if (!this.component && !this.children) {
-            throw new Error("component or children should be defined for route=" + name);
-        }
         if (!parent) {
             throw new Error("Parent router is not set!");
         }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-router-flux",
-  "version": "2.2.2",
+  "version": "2.2.3",
   "description": "React Native Router using Flux architecture",
   "repository": {
     "type": "git",