Added additional transitions

README.md

@@ -97,12 +97,20 @@ Addtional options
 Specify the type of transition:
 
 ```js
-NavigationController.transitionType = {
+NavigationController.Transition.type = {
   NONE: 0,
   PUSH_LEFT: 1,
   PUSH_RIGHT: 2,
   PUSH_UP: 3,
-  PUSH_DOWN: 4
+  PUSH_DOWN: 4,
+  COVER_LEFT: 5,
+  COVER_RIGHT: 6,
+  COVER_UP: 7,
+  COVER_DOWN: 8,
+  REVEAL_LEFT: 9,
+  REVEAL_RIGHT: 10,
+  REVEAL_UP: 11,
+  REVEAL_DOWN: 12
 };
 ```
 

examples/assets/example.css

@@ -24,6 +24,18 @@ p {
   margin: 0 0 0.2em 0;
 }
 
+button {
+  display: block;
+  padding: 1em 1.5em;
+  background-color: transparent;
+  border: 2px solid white;
+  border-radius: 4px;
+  color: white;
+  font-size: 1em;
+  font-weight: 300;
+  outline: none;
+}
+
 .ReactNavigationController {
   position: relative;
   height: 480px;
@@ -39,37 +51,46 @@ p {
   right: 0;
   bottom: 0;
   left: 0;
-  display: -webkit-flex;
-  display: -ms-flexbox;
+}
+
+.ReactNavigationControllerView {
   display: flex;
-  -webkit-align-items: center;
-      -ms-flex-align: center;
-          align-items: center;
 }
 
 .ReactNavigationControllerViewContent {
-  padding: 1em;
   color: white;
+  display: flex;
+  flex-direction: column;
 }
 
-.ReactNavigationControllerViewContent div {
-  margin: auto;
+/* HEADER */
+
+.ReactNavigationControllerViewContent header {
+  display: flex;
+  justify-content: space-between;
+  padding: 0.75em;
 }
 
-.ReactNavigationControllerViewContent h1 {
-  margin: auto;
-  text-align: center;
+.ReactNavigationControllerViewContent header button {
+
+}
+
+/* CONTENT */
+
+.ReactNavigationControllerViewContent section {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
 }
 
-.ReactNavigationControllerViewContent button {
+.ReactNavigationControllerViewContent section h3 {
   display: block;
-  padding: 1em 1.5em;
+  margin: 0 auto;
+  font-size: 2rem;
+}
+
+.ReactNavigationControllerViewContent section button {
   margin: 1em auto;
-  background-color: transparent;
-  border: 2px solid white;
-  border-radius: 4px;
-  color: white;
-  font-size: 1em;
-  font-weight: 700;
-  outline: none;
 }

examples/src/example.jsx

@@ -16,14 +16,14 @@ class App extends React.Component {
           views={[<View />]}
           preserveState={true}
           transitionTension={10}
-          transitionFriction={5} />
+          transitionFriction={6} />
         <h2>Multiple Views</h2>
         <p>Start with multiple views on the stack</p>
         <NavigationController
           views={[<View />, <View index={2} />, <View index={3} />]}
           preserveState={true}
           transitionTension={10}
-          transitionFriction={5} />
+          transitionFriction={6} />
       </main>
     );
   }

examples/src/view.jsx

@@ -1,5 +1,10 @@
 const React = require('react');
 
+const NavigationController = require('../../src/navigation-controller');
+const {
+  Transition
+} = NavigationController;
+
 const colors = [
   '#0074D9', '#7FDBFF',  '#39CCCC', '#2ECC40', '#FFDC00', '#FF851B', '#FF4136',
   '#F012BE', '#B10DC9' 
@@ -27,35 +32,53 @@ class View extends React.Component {
     });
   }
   onNext() {
-    this.props.navigationController.pushView(
-      <View index={this.props.index+1} />
-    );
+    const view = <View index={this.props.index+1} />;
+    this.props.navigationController.pushView(view, {
+
+    });
   }
   onBack() {
-    this.props.navigationController.popView();
+    this.props.navigationController.popView({
+      transition: this.props.modal ? Transition.type.REVEAL_DOWN : Transition.type.PUSH_RIGHT
+    });
+  }
+  onModal() {
+    const view = <View index={this.props.index+1} modal={true} />;
+    this.props.navigationController.pushView(view, {
+      transition: Transition.type.COVER_UP
+    });
   }
   render() {
     return (
       <div
         className="ReactNavigationControllerViewContent"
         style={{background:this.state.color}}>
-        <div>
-          <div>
-            <h1>View {this.props.index}</h1>
-            <button onClick={this.incrementCounter.bind(this)}>
-              Increment Counter ({this.state.counter})
-            </button>
-            <button onClick={this.onNext.bind(this)}>Next</button>
-            {this.renderBackButton()}
-          </div>
-        </div>
+        <header>
+          {this.renderBackButton()}
+          {this.renderNextButton()}
+        </header>
+        <section>
+          <h3>View {this.props.index}</h3>
+          <button onClick={this.incrementCounter.bind(this)}>
+            Increment Counter ({this.state.counter})
+          </button>
+          <button onClick={this.onModal.bind(this)}>
+            Show Modal
+          </button>
+        </section>
       </div>
     );
   }
   renderBackButton() {
+    const text = this.props.modal ? 'Close' : 'Back';
     return this.props.index === 1
-      ? null
-      : <button onClick={this.onBack.bind(this)}>Back</button>;
+      ? <div />
+      : <button onClick={this.onBack.bind(this)}>{text}</button>;
+  }
+  renderNextButton() {
+    return this.props.modal === true
+      ? <div />
+      : <button onClick={this.onNext.bind(this)}>Next</button>;
   }
 }
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-navigation-controller",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "A React view manager similar to UINavigationController",
   "keywords": [
     "react",