adding support for modals

.npmignore

@@ -1 +1,2 @@
 example/
+example-redux/

example/src/app.js

@@ -7,28 +7,28 @@ import './screens/ThirdTabScreen';
 Navigation.startTabBasedApp({
   tabs: [
     {
-      title: 'One',
+      label: 'One',
       screen: 'example.FirstTabScreen',
       icon: require('../img/one.png'),
       selectedIcon: require('../img/one_selected.png'),
-      screenTitle: 'Screen One'
+      title: 'Screen One'
     },
     {
-      title: 'Two',
+      label: 'Two',
       screen: 'example.SecondTabScreen',
       icon: require('../img/two.png'),
       selectedIcon: require('../img/two_selected.png'),
-      screenTitle: 'Screen Two'
+      title: 'Screen Two'
     },
     {
-      title: 'Three',
+      label: 'Three',
       screen: 'example.ThirdTabScreen',
       icon: require('../img/three.png'),
       selectedIcon: require('../img/three_selected.png'),
-      screenTitle: 'Screen Three',
+      title: 'Screen Three',
       navigatorStyle: {
-        navBarBackgroundColor: '#26ade4',
-        navBarTextColor: '#f0f0f0',
+        navBarBackgroundColor: '#4dbce9',
+        navBarTextColor: '#f7f7f7',
         navBarButtonColor: '#ffffff'
       }
     }

example/src/screens/FirstTabScreen.js

@@ -12,6 +12,7 @@ import { Navigation, Screen } from 'react-native-navigation';
 // need to import every screen we push
 import './PushedScreen';
 import './StyledScreen';
+import './ModalScreen';
 
 // instead of React.Component, we extend Screen (imported above)
 class FirstTabScreen extends Screen {
@@ -30,6 +31,10 @@ class FirstTabScreen extends Screen {
           <Text style={styles.button}>Push Styled Screen</Text>
         </TouchableOpacity>
 
+        <TouchableOpacity onPress={ this.onModalPress.bind(this) }>
+          <Text style={styles.button}>Show Modal Screen</Text>
+        </TouchableOpacity>
+
       </View>
     );
   }
@@ -41,10 +46,16 @@ class FirstTabScreen extends Screen {
   }
   onPushStyledPress() {
     this.navigator.push({
-      title: "More",
+      title: "Styled",
       screen: "example.StyledScreen"
     });
   }
+  onModalPress() {
+    this.navigator.showModal({
+      title: "Modal",
+      screen: "example.ModalScreen"
+    });
+  }
 }
 
 const styles = StyleSheet.create({

example/src/screens/ModalScreen.js

@@ -0,0 +1,68 @@
+import React, {
+  Text,
+  View,
+  ScrollView,
+  TouchableOpacity,
+  StyleSheet
+} from 'react-native';
+
+// important imports, the magic is here
+import { Navigation, Screen } from 'react-native-navigation';
+
+// need to import every screen we push
+import './PushedScreen';
+import './StyledScreen';
+
+// instead of React.Component, we extend Screen (imported above)
+class ModalScreen extends Screen {
+  constructor(props) {
+    super(props);
+  }
+  render() {
+    return (
+      <View style={{flex: 1, padding: 20}}>
+
+        <TouchableOpacity onPress={ this.onPushPress.bind(this) }>
+          <Text style={styles.button}>Push Plain Screen</Text>
+        </TouchableOpacity>
+
+        <TouchableOpacity onPress={ this.onPushStyledPress.bind(this) }>
+          <Text style={styles.button}>Push Styled Screen</Text>
+        </TouchableOpacity>
+
+        <TouchableOpacity onPress={ this.onClosePress.bind(this) }>
+          <Text style={styles.button}>Close Modal</Text>
+        </TouchableOpacity>
+
+      </View>
+    );
+  }
+  onPushPress() {
+    this.navigator.push({
+      title: "More",
+      screen: "example.PushedScreen"
+    });
+  }
+  onPushStyledPress() {
+    this.navigator.push({
+      title: "More",
+      screen: "example.StyledScreen"
+    });
+  }
+  onClosePress() {
+    this.navigator.dismissModal();
+  }
+}
+
+const styles = StyleSheet.create({
+  button: {
+    textAlign: 'center',
+    fontSize: 18,
+    marginBottom: 10,
+    marginTop:10,
+    color: 'blue'
+  }
+});
+
+// every screen must be registered with a unique name
+Navigation.registerScreen('example.ModalScreen', () => ModalScreen);

package.json

@@ -18,9 +18,9 @@
   "author": "Tal Kol <talkol@gmail.com>",
   "license": "MIT",
   "peerDependencies": {
-    "react-native": ">=0.16.0"
+    "react-native": ">=0.19.0"
   },
   "dependencies": {
-    "react-native-controllers": "^1.1.0"
+    "react-native-controllers": "^1.2.0"
   }
 }

src/Navigation.js

@@ -17,9 +17,19 @@ function getRegisteredScreen(screenID) {
   return generator();
 }
 
+function showModal(params = {}) {
+  return platformSpecific.showModal(params);
+}
+
+function dismissModal(params = {}) {
+  return platformSpecific.dismissModal(params);
+}
+
 export default Navigation = {
   registerScreen,
   getRegisteredScreen,
+  showModal,
+  dismissModal,
   startTabBasedApp: platformSpecific.startTabBasedApp,
   startSingleScreenApp: platformSpecific.startSingleScreenApp
 }

src/Screen.js

@@ -1,5 +1,6 @@
 import { Component } from 'react-native';
 import platformSpecific from './platformSpecific';
+import Navigation from './Navigation';
 
 class Navigator {
   constructor(navigatorID) {
@@ -11,6 +12,12 @@ class Navigator {
   pop(params = {}) {
     return platformSpecific.navigatorPop(this, params);
   }
+  showModal(params = {}) {
+    return Navigation.showModal(params);
+  }
+  dismissModal(params = {}) {
+    return Navigation.dismissModal(params);
+  }
 }
 
 export default class Screen extends Component {

src/platformSpecific.ios.js

@@ -1,6 +1,6 @@
 import utils from './utils';
 import Navigation from './Navigation';
-import Controllers from 'react-native-controllers';
+import Controllers, { Modal } from 'react-native-controllers';
 const React = Controllers.hijackReact();
 const {
   ControllerRegistry,
@@ -14,32 +14,24 @@ function startTabBasedApp(params) {
     console.error('startTabBasedApp(params): params.tabs is required');
     return;
   }
-  const appID = utils.getRandomId();
-  const App = Controllers.createClass({
+  const controllerID = utils.getRandomId();
+  const Controller = Controllers.createClass({
     render: function() {
       return (
-        <TabBarControllerIOS id={appID + '_tabs'}>
+        <TabBarControllerIOS id={controllerID + '_tabs'}>
         {
           params.tabs.map(function(tab, index) {
-            const navigatorID = appID + '_nav' + index;
+            const navigatorID = controllerID + '_nav' + index;
             if (!tab.screen) {
               console.error('startTabBasedApp(params): every tab must include a screen property, take a look at tab#' + (index+1));
               return;
             }
-            const screenClass = Navigation.getRegisteredScreen(tab.screen);
-            if (!screenClass) {
-              console.error('Cannot create screen ' + tab.screen + '. Are you it was registered with Navigation.registerScreen?');
-              return;
-            }
-            const navigatorStyle = Object.assign({}, screenClass.navigatorStyle);
-            if (tab.navigatorStyle) {
-              Object.assign(navigatorStyle, tab.navigatorStyle);
-            }
+            const { navigatorStyle } = _mergeScreenSpecificSettings(tab.screen, tab);
             return (
-              <TabBarControllerIOS.Item {...tab}>
+              <TabBarControllerIOS.Item {...tab} title={tab.label}>
                 <NavigationControllerIOS
                   id={navigatorID}
-                  title={tab.screenTitle}
+                  title={tab.title}
                   component={tab.screen}
                   passProps={{navigatorID: navigatorID}}
                   style={navigatorStyle}
@@ -52,8 +44,8 @@ function startTabBasedApp(params) {
       );
     }
   });
-  ControllerRegistry.registerController(appID, () => App);
-  ControllerRegistry.setRootController(appID);
+  ControllerRegistry.registerController(controllerID, () => Controller);
+  ControllerRegistry.setRootController(controllerID);
 }
 
 function startSingleScreenApp(params) {
@@ -61,28 +53,20 @@ function startSingleScreenApp(params) {
     console.error('startSingleScreenApp(params): params.screen is required');
     return;
   }
-  const appID = utils.getRandomId();
-  const App = Controllers.createClass({
+  const controllerID = utils.getRandomId();
+  const Controller = Controllers.createClass({
     render: function() {
       const screen = params.screen;
-      const navigatorID = appID + '_nav';
+      const navigatorID = controllerID + '_nav';
       if (!screen.screen) {
         console.error('startSingleScreenApp(params): screen must include a screen property');
         return;
       }
-      const screenClass = Navigation.getRegisteredScreen(screen.screen);
-      if (!screenClass) {
-        console.error('Cannot create screen ' + screen.screen + '. Are you it was registered with Navigation.registerScreen?');
-        return;
-      }
-      const navigatorStyle = Object.assign({}, screenClass.navigatorStyle);
-      if (screen.navigatorStyle) {
-        Object.assign(navigatorStyle, screen.navigatorStyle);
-      }
+      const { navigatorStyle } = _mergeScreenSpecificSettings(screen.screen, screen);
       return (
         <NavigationControllerIOS
           id={navigatorID}
-          title={screen.screenTitle}
+          title={screen.title}
           component={screen.screen}
           passProps={{navigatorID: navigatorID}}
           style={navigatorStyle}
@@ -90,25 +74,30 @@ function startSingleScreenApp(params) {
       );
     }
   });
-  ControllerRegistry.registerController(appID, () => App);
-  ControllerRegistry.setRootController(appID);
+  ControllerRegistry.registerController(controllerID, () => Controller);
+  ControllerRegistry.setRootController(controllerID);
 }
 
-function navigatorPush(navigator, params) {
-  if (!params.screen) {
-    console.error('Navigator.push(params): params.screen is required');
-    return;
-  }
-  const passProps = params.passProps || {};
-  const screenClass = Navigation.getRegisteredScreen(params.screen);
+function _mergeScreenSpecificSettings(screenID, params) {
+  const screenClass = Navigation.getRegisteredScreen(screenID);
   if (!screenClass) {
-    console.error('Cannot create screen ' + params.screen + '. Are you it was registered with Navigation.registerScreen?');
+    console.error('Cannot create screen ' + screenID + '. Are you it was registered with Navigation.registerScreen?');
     return;
   }
   const navigatorStyle = Object.assign({}, screenClass.navigatorStyle);
   if (params.navigatorStyle) {
     Object.assign(navigatorStyle, params.navigatorStyle);
   }
+  return { navigatorStyle };
+}
+
+function navigatorPush(navigator, params) {
+  if (!params.screen) {
+    console.error('Navigator.push(params): params.screen is required');
+    return;
+  }
+  const { navigatorStyle } = _mergeScreenSpecificSettings(params.screen, params);
+  const passProps = params.passProps || {};
   passProps.navigatorID = navigator.navigatorID;
   Controllers.NavigationControllerIOS(navigator.navigatorID).push({
     title: params.title,
@@ -126,9 +115,41 @@ function navigatorPop(navigator, params) {
   });
 }
 
+function showModal(params) {
+  if (!params.screen) {
+    console.error('showModal(params): params.screen is required');
+    return;
+  }
+  const { navigatorStyle } = _mergeScreenSpecificSettings(params.screen, params);
+  const controllerID = utils.getRandomId();
+  const Controller = Controllers.createClass({
+    render: function() {
+      const navigatorID = controllerID + '_nav';
+      const { navigatorStyle } = _mergeScreenSpecificSettings(params.screen, params);
+      return (
+        <NavigationControllerIOS
+          id={navigatorID}
+          title={params.title}
+          component={params.screen}
+          passProps={{navigatorID: navigatorID}}
+          style={navigatorStyle}
+        />
+      );
+    }
+  });
+  ControllerRegistry.registerController(controllerID, () => Controller);
+  Modal.showController(controllerID, params.animationType);
+}
+
+function dismissModal(params) {
+  Modal.dismissController(params.animationType);
+}
+
 export default platformSpecific = {
   startTabBasedApp,
   startSingleScreenApp,
   navigatorPush,
-  navigatorPop
+  navigatorPop,
+  showModal,
+  dismissModal
 }