Merge pull request #3 from programmarchy/lifecycle-events

Add lifecycle events for hiding / showing views before / after nav transitions

Author: aputinski

README.md

@@ -5,7 +5,7 @@
 
 React view manager similar to [UINavigationController][ios-controller]
 
-## Instalation
+## Installation
 
 ```bash
 npm install react-navigation-controller
@@ -180,6 +180,46 @@ If set to `true`, the navigationController will save the state
 of each view that gets pushed onto the stack. When `popView()` is called,
 the navigationController will rehydrate the state of the view before it is shown.
 
+## Lifecycle Events
+
+Similar to the React component lifecycle, the navigationController will
+call lifecycle events on the component at certain stages.
+
+Lifecycle events can trigger actions when views transition in or out,
+instead of mounted or unmounted:
+
+```
+class HelloView extends React.Component {
+  navigationControllerDidShowView() {
+    // Do something when the show transition is finished,
+    // like fade in an element.
+  }
+  navigationControllerWillHideView() {
+    // Do something when the hide transition will start,
+    // like fade out an element.
+  }
+  render() {
+    return <div>Hello, {this.props.name}!</div>;
+  }
+}
+```
+
+### `view.navigationControllerWillHideView()`
+
+Invoked immediately before the previous view will be hidden.
+
+### `view.navigationControllerWillShowView()`
+
+Invoked immediately before the next view will be shown.
+
+### `view.navigationControllerDidHideView()`
+
+Invoked immediately after the previous view has been hidden.
+
+### `view.navigationControllerDidShowView()`
+
+Invoked immediately after the next view has been shown.
+
 ## Styling
 
 No default styles are provided, but classes are added for custom styling:

spec/navigation-controller.spec.jsx

@@ -32,7 +32,7 @@ describe('NavigationController', () => {
     );
     viewWrapper0 = controller['__view-wrapper-0'];
     viewWrapper1 = controller['__view-wrapper-1'];
-  })
+  });
   it('exports a component', () => {
     let controller = renderIntoDocument(
       <NavigationController views={views} />
@@ -85,9 +85,6 @@ describe('NavigationController', () => {
       expect(viewWrapper0).to.have.deep.property(`style.${transformPrefix}`);
       expect(viewWrapper1).to.have.deep.property(`style.${transformPrefix}`);
     });
-  });
-  describe('#componentWillUnmout', () => {
-    
   });
   describe('#__transformViews', () => {
     beforeEach(done => {
@@ -668,4 +665,115 @@ describe('NavigationController', () => {
       });
     });
   });
+  describe('Lifecycle Events', () => {
+    let stubLifecycleEvents = (onTransitionViews) => {
+      const e = {
+        prevView: {
+          willHide: sinon.spy(),
+          didHide: sinon.spy()
+        },
+        nextView: {
+          willShow: sinon.spy(),
+          didShow: sinon.spy()
+        }
+      }
+      const stub = sinon.stub(controller, '__transitionViews', (options) => {
+        let prevView = controller.refs['view-0'];
+        if (prevView) {
+          prevView.navigationControllerWillHideView = e.prevView.willHide;
+          prevView.navigationControllerDidHideView = e.prevView.didHide;
+        }
+        let nextView = controller.refs['view-1'];
+        if (nextView) {
+          nextView.navigationControllerWillShowView = e.nextView.willShow;
+          nextView.navigationControllerDidShowView = e.nextView.didShow;
+        }
+        stub.restore();
+        controller.__transitionViews(options);
+        onTransitionViews();
+      });
+      return e;
+    };
+    describe('#__pushView', () => {
+      beforeEach(done => {
+        requestAnimationFrame(() => {
+          done();
+        });
+      });
+      it('calls events with a "none" transition', (done) => {
+        const e = stubLifecycleEvents(() => {
+          expect(e.prevView.willHide.calledOnce).to.be.true;
+          expect(e.nextView.willShow.calledOnce).to.be.true;
+          expect(e.prevView.didHide.calledOnce).to.be.false;
+          expect(e.nextView.didShow.calledOnce).to.be.false;
+        });
+        controller.__pushView(<ViewB />, {
+          transition: Transition.type.NONE,
+          onComplete() {
+            expect(e.prevView.didHide.calledOnce).to.be.true;
+            expect(e.nextView.didShow.calledOnce).to.be.true;
+            done();
+          }
+        });
+      });
+      it('calls events with a built-in spring animation', (done) => {
+        const e = stubLifecycleEvents(() => {
+          expect(e.prevView.willHide.calledOnce).to.be.true;
+          expect(e.nextView.willShow.calledOnce).to.be.true;
+          expect(e.prevView.didHide.calledOnce).to.be.false;
+          expect(e.nextView.didShow.calledOnce).to.be.false;
+        });
+        controller.__pushView(<ViewB />, {
+          transition: Transition.type.PUSH_LEFT,
+          onComplete() {
+            expect(e.prevView.didHide.calledOnce).to.be.true;
+            expect(e.nextView.didShow.calledOnce).to.be.true;
+            done();
+          }
+        });
+      });
+    });
+    describe('#__popView', () => {
+      beforeEach(done => {
+        controller = renderIntoDocument(
+          <NavigationController views={[<ViewA />,<ViewB />]} />
+        );
+        requestAnimationFrame(() => {
+          done();
+        });
+      });
+      it('calls events with a "none" transition', (done) => {
+        const e = stubLifecycleEvents(() => {
+          expect(e.prevView.willHide.calledOnce).to.be.true;
+          expect(e.nextView.willShow.calledOnce).to.be.true;
+          expect(e.prevView.didHide.calledOnce).to.be.false;
+          expect(e.nextView.didShow.calledOnce).to.be.false;
+        });
+        controller.__popView({
+          transition: Transition.type.NONE,
+          onComplete() {
+            expect(e.prevView.didHide.calledOnce).to.be.true;
+            expect(e.nextView.didShow.calledOnce).to.be.true;
+            done();
+          }
+        });
+      });
+      it('calls events with a built-in spring animation', (done) => {
+        const e = stubLifecycleEvents(() => {
+          expect(e.prevView.willHide.calledOnce).to.be.true;
+          expect(e.nextView.willShow.calledOnce).to.be.true;
+          expect(e.prevView.didHide.calledOnce).to.be.false;
+          expect(e.nextView.didShow.calledOnce).to.be.false;
+        });
+        controller.__popView({
+          transition: Transition.type.PUSH_LEFT,
+          onComplete() {
+            expect(e.prevView.didHide.calledOnce).to.be.true;
+            expect(e.nextView.didShow.calledOnce).to.be.true;
+            done();
+          }
+        });
+      });
+    });
+  });
 });

src/navigation-controller.jsx

@@ -206,10 +206,21 @@ class NavigationController extends React.Component {
     // Hide the previous view wrapper
     const prevViewWrapper = this[`__view-wrapper-${prev}`];
           prevViewWrapper.style.display = 'none';
+    // Did hide view lifecycle event
+    const prevView = this.refs['view-0'];
+    if (prevView && typeof prevView.navigationControllerDidHideView === 'function') {
+      prevView.navigationControllerDidHideView(this);
+    }
+    // Did show view lifecycle event
+    const nextView = this.refs['view-1'];
+    if (nextView && typeof nextView.navigationControllerDidShowView === 'function') {
+      nextView.navigationControllerDidShowView(this);
+    }
     // Unmount the previous view
     const mountedViews = [];
           mountedViews[prev] = null;
           mountedViews[next] = last(this.state.views);
+
     this.setState({
       transition: null,
       mountedViews: mountedViews
@@ -254,6 +265,16 @@ class NavigationController extends React.Component {
         onComplete();
       }
     };
+    // Will hide view lifecycle event
+    const prevView = this.refs['view-0'];
+    if (prevView && typeof prevView.navigationControllerWillHideView === 'function') {
+      prevView.navigationControllerWillHideView(this);
+    }
+    // Will show view lifecycle event
+    const nextView = this.refs['view-1'];
+    if (nextView && typeof nextView.navigationControllerWillShowView === 'function') {
+      nextView.navigationControllerWillShowView(this);
+    }
     // Built-in transition
     if (typeof transition === 'number') {
       // Manually transition the views
@@ -281,7 +302,7 @@ class NavigationController extends React.Component {
     if (typeof transition === 'function') {
       const [prev,next] = this.__viewIndexes;
       const prevView = this[`__view-wrapper-${prev}`];
-      const nextView = this[`__view-wrapper-${next}`]; 
+      const nextView = this[`__view-wrapper-${next}`];
       transition(prevView, nextView, () => {
         this.__animateViewsComplete();
         this.__transitionViewsComplete();