screen lifecycle

ios/RNN.m

@@ -15,6 +15,8 @@
 
 @implementation RNN
 
+# pragma mark public
+
 +(instancetype)instance
 {
 	static RNN *sharedInstance = nil;
@@ -43,6 +45,8 @@
 	self.bridge = [[RCTBridge alloc] initWithBundleURL:jsCodeLocation moduleProvider:nil launchOptions:launchOptions];
 }
 
+# pragma mark private
+
 -(void)registerForJsEvents
 {
 	[[NSNotificationCenter defaultCenter] addObserver:self selector:@selector(onJavaScriptLoaded) name:RCTJavaScriptDidLoadNotification object:self.bridge];

ios/RNNBridgeModule.m

@@ -15,15 +15,15 @@ RCT_EXPORT_MODULE();
 RCT_EXPORT_METHOD(setRoot:(NSDictionary*)layout)
 {
 	[self assertReady];
-	UIApplication.sharedApplication.delegate.window.rootViewController = [[RNNControllerFactory new] createRootViewController:layout];
+	UIApplication.sharedApplication.delegate.window.rootViewController = [[RNNControllerFactory new] createLayout:layout];
 	[UIApplication.sharedApplication.delegate.window makeKeyAndVisible];
 }
 
 RCT_EXPORT_METHOD(push:(NSString*)containerId layout:(NSDictionary*)layout)
 {
 	[self assertReady];
-	//TODO make this not shitty
-	UIViewController* newVc = [[RNNControllerFactory new] createRootViewController:layout];
+	//TODO implement correctly
+	UIViewController* newVc = [[RNNControllerFactory new] createLayout:layout];
 	id vc = [UIApplication.sharedApplication.delegate.window.rootViewController childViewControllers][0];
 	[[vc navigationController]pushViewController:newVc animated:true];
 }

ios/RNNControllerFactory.h

@@ -4,6 +4,6 @@
 
 @interface RNNControllerFactory : NSObject
 
--(UIViewController*)createRootViewController:(NSDictionary*)layout;
+-(UIViewController*)createLayout:(NSDictionary*)layout;
 
 @end

ios/RNNControllerFactory.m

@@ -5,11 +5,15 @@
 
 @implementation RNNControllerFactory
 
--(UIViewController *)createRootViewController:(NSDictionary *)layout
+# pragma mark public
+
+-(UIViewController *)createLayout:(NSDictionary *)layout
 {
 	return [self fromTree:layout];
 }
 
+# pragma mark private
+
 -(UIViewController*)fromTree:(NSDictionary*)json
 {
 	RNNLayoutNode* node = [RNNLayoutNode create:json];

ios/RNNEventEmitter.m

@@ -10,6 +10,11 @@ static NSString* const onAppLaunched	= @"RNN.appLaunched";
 static NSString* const containerStart	= @"RNN.containerStart";
 static NSString* const containerStop	= @"RNN.containerStop";
 
+-(NSArray<NSString *> *)supportedEvents
+{
+	return @[onAppLaunched, containerStart, containerStop];
+}
+
 # pragma mark public
 
 -(void)sendOnAppLaunched
@@ -19,21 +24,16 @@ static NSString* const containerStop	= @"RNN.containerStop";
 
 -(void)sendContainerStart:(NSString *)containerId
 {
-	[self send:containerStart body:@{@"id": containerId}];
+	[self send:containerStart body:containerId];
 }
 
 -(void)sendContainerStop:(NSString *)containerId
 {
-	[self send:containerStop body:@{@"id": containerId}];
+	[self send:containerStop body:containerId];
 }
 
 # pragma mark private
 
--(NSArray<NSString *> *)supportedEvents
-{
-	return @[onAppLaunched, containerStart, containerStop];
-}
-
 -(void)send:(NSString *)eventName body:(id)body
 {
 	[[RNN.instance.bridge moduleForClass:[RNNEventEmitter class]] sendEventWithName:eventName body:body];

playground/e2e/app.test.js

@@ -24,7 +24,7 @@ describe('app', () => {
     expect(elementByLabel('This is a side menu screen')).toBeVisible();
   });
 
-  xit('screen lifecycle', () => {
+  it('screen lifecycle', () => {
     elementByLabel('Switch to lifecycle screen').tap();
     expect(elementByLabel('onStart!')).toBeVisible();
   });

playground/src/containers/WelcomeScreen.js

@@ -7,7 +7,6 @@ class WelcomeScreen extends Component {
   constructor(props) {
     super(props);
     this.onClickPush = this.onClickPush.bind(this);
-    this.onClickLifecycleScreen = this.onClickLifecycleScreen.bind(this);
   }
 
   render() {
@@ -91,8 +90,10 @@ class WelcomeScreen extends Component {
   }
 
   onClickLifecycleScreen() {
-    Navigation.on(this.props.id).push({
-      name: 'com.example.LifecycleScreen'
+    Navigation.setRoot({
+      container: {
+        name: 'com.example.LifecycleScreen'
+      }
     });
   }
 }

src/adapters/NativeEventsReceiver.js

@@ -9,6 +9,10 @@ export default class NativeEventsReceiver {
     this.emitter.addListener('RNN.containerStart', callback);
   }
 
+  containerStop(callback) {
+    this.emitter.addListener('RNN.containerStop', callback);
+  }
+
   appLaunched(callback) {
     this.emitter.addListener('RNN.appLaunched', callback);
   }

src/adapters/NativeEventsReceiver.test.js

@@ -19,11 +19,19 @@ describe('NativeEventsReceiver', () => {
     expect(eventEmitterMock.addListener).toHaveBeenCalledWith('RNN.appLaunched', callback);
   });
 
-  it('register for internal events', () => {
+  it('containerStart', () => {
     const callback = jest.fn();
     uut.containerStart(callback);
     expect(callback).not.toHaveBeenCalled();
     expect(eventEmitterMock.addListener).toHaveBeenCalledTimes(1);
     expect(eventEmitterMock.addListener).toHaveBeenCalledWith('RNN.containerStart', callback);
   });
+
+  it('containerStop', () => {
+    const callback = jest.fn();
+    uut.containerStop(callback);
+    expect(callback).not.toHaveBeenCalled();
+    expect(eventEmitterMock.addListener).toHaveBeenCalledTimes(1);
+    expect(eventEmitterMock.addListener).toHaveBeenCalledWith('RNN.containerStop', callback);
+  });
 });

src/containers/ContainerWrapper.js

@@ -31,6 +31,18 @@ export default class ContainerWrapper {
         store.cleanId(this.state.id);
       }
 
+      onStart() {
+        if (this.originalContainerRef.onStart) {
+          this.originalContainerRef.onStart();
+        }
+      }
+
+      onStop() {
+        if (this.originalContainerRef.onStop) {
+          this.originalContainerRef.onStop();
+        }
+      }
+
       componentWillReceiveProps(nextProps) {
         this.setState({
           allProps: _.merge({}, nextProps, store.getPropsForContainerId(this.state.id))
@@ -40,6 +52,7 @@ export default class ContainerWrapper {
       render() {
         return (
           <OriginalContainer
+            ref={(r) => this.originalContainerRef = r}
             {...this.state.allProps}
             id={this.state.id}
             key={this.state.id}

src/containers/ContainerWrapper.test.js

@@ -120,7 +120,22 @@ describe('ContainerWrapper', () => {
     expect(store.getRefForId('container1')).toBeUndefined();
   });
 
-  xdescribe('container lifecycle', () => {
+  it('holds ref to OriginalContainer', () => {
+    const NavigationContainer = ContainerWrapper.wrap(containerName, MyContainer, store);
+    const tree = renderer.create(<NavigationContainer id={'container1'} />);
+    expect(tree.getInstance().originalContainerRef).toBe(myContainerRef);
+  });
+
+  it('cleans ref to internal container on unount', () => {
+    const NavigationContainer = ContainerWrapper.wrap(containerName, MyContainer, store);
+    const tree = renderer.create(<NavigationContainer id={'container1'} />);
+    const instance = tree.getInstance();
+    expect(instance.originalContainerRef).not.toBeFalsy();
+    tree.unmount();
+    expect(instance.originalContainerRef).toBeFalsy();
+  });
+
+  describe('container lifecycle', () => {
     const onStartCallback = jest.fn();
     const onStopCallback = jest.fn();
 
@@ -134,8 +149,20 @@ describe('ContainerWrapper', () => {
       }
     }
 
-    it('', () => {
-      //
+    it('calls onStart on OriginalContainer', () => {
+      const NavigationContainer = ContainerWrapper.wrap(containerName, MyLifecycleContainer, store);
+      const tree = renderer.create(<NavigationContainer id={'container1'} />);
+      expect(onStartCallback).toHaveBeenCalledTimes(0);
+      tree.getInstance().onStart();
+      expect(onStartCallback).toHaveBeenCalledTimes(1);
+    });
+
+    it('calls onSop on OriginalContainer', () => {
+      const NavigationContainer = ContainerWrapper.wrap(containerName, MyLifecycleContainer, store);
+      const tree = renderer.create(<NavigationContainer id={'container1'} />);
+      expect(onStopCallback).toHaveBeenCalledTimes(0);
+      tree.getInstance().onStop();
+      expect(onStopCallback).toHaveBeenCalledTimes(1);
     });
   });
 });

src/containers/Lifecycle.js

@@ -0,0 +1,21 @@
+export default class Lifecycle {
+  constructor(store) {
+    this.store = store;
+    this.containerStart = this.containerStart.bind(this);
+    this.containerStop = this.containerStop.bind(this);
+  }
+
+  containerStart(id) {
+    const ref = this.store.getRefForId(id);
+    if (ref && ref.onStart) {
+      ref.onStart();
+    }
+  }
+
+  containerStop(id) {
+    const ref = this.store.getRefForId(id);
+    if (ref && ref.onStop) {
+      ref.onStop();
+    }
+  }
+}

src/containers/Lifecycle.test.js

@@ -0,0 +1,56 @@
+import Lifecycle from './Lifecycle';
+import Store from '../containers/Store';
+
+describe('Lifecycle', () => {
+  let uut;
+  let mockRef;
+
+  beforeEach(() => {
+    mockRef = {
+      onStart: jest.fn(),
+      onStop: jest.fn()
+    };
+    store = new Store();
+    store.setRefForId('myUniqueId', mockRef);
+
+    uut = new Lifecycle(store);
+  });
+
+  describe('containerStart', () => {
+    it('calls onStart on container ref from store', () => {
+      uut.containerStart('myUniqueId');
+      expect(mockRef.onStart).toHaveBeenCalledTimes(1);
+    });
+
+    it('skips undefined refs', () => {
+      uut.containerStart('myUniqueId2');
+      expect(mockRef.onStart).not.toHaveBeenCalled();
+    });
+
+    it('skips unimplemented onStart', () => {
+      mockRef = {};
+      expect(mockRef.onStart).toBeUndefined();
+      store.setRefForId('myUniqueId', mockRef);
+      uut.containerStart('myUniqueId');
+    });
+  });
+
+  describe('containerStop', () => {
+    it('calls onStop on container ref from store', () => {
+      uut.containerStop('myUniqueId');
+      expect(mockRef.onStop).toHaveBeenCalledTimes(1);
+    });
+
+    it('skips undefined refs', () => {
+      uut.containerStop('myUniqueId2');
+      expect(mockRef.onStop).not.toHaveBeenCalled();
+    });
+
+    it('skips unimplemented onStop', () => {
+      mockRef = {};
+      expect(mockRef.onStop).toBeUndefined();
+      store.setRefForId('myUniqueId', mockRef);
+      uut.containerStop('myUniqueId');
+    });
+  });
+});

src/events/PrivateEventsListener.js

@@ -1,24 +1,14 @@
 import _ from 'lodash';
+import Lifecycle from '../containers/Lifecycle';
 
 export default class PrivateEventsListener {
   constructor(nativeEventsReceiver, store) {
     this.nativeEventsReceiver = nativeEventsReceiver;
-    this.store = store;
+    this.lifecycle = new Lifecycle(store);
   }
 
   listenAndHandlePrivateEvents() {
-    this.nativeEventsReceiver.containerStart(this._handleContainerStart);
-  }
-
-  _handleContainerStart(params) {
-    // const id = params.id;
-    // try {
-    //   const ref = this.store.getRefForId(id);
-    //   if (ref && ref.onStart) {
-    //     ref.onStart();
-    //   }
-    // } catch (e) {
-    //   console.warn(e);
-    // }
+    this.nativeEventsReceiver.containerStart(this.lifecycle.containerStart);
+    this.nativeEventsReceiver.containerStop(this.lifecycle.containerStop);
   }
 }

src/events/PrivateEventsListener.test.js

@@ -1,21 +1,37 @@
 import _ from 'lodash';
 import PrivateEventsListener from './PrivateEventsListener';
 import NativeEventsReceiver from '../adapters/NativeEventsReceiver.mock';
+import Store from '../containers/Store';
 
 describe('PrivateEventsListener', () => {
   let uut;
   let nativeEventsReceiver;
+  let store;
 
   beforeEach(() => {
     nativeEventsReceiver = new NativeEventsReceiver();
-    uut = new PrivateEventsListener(nativeEventsReceiver);
+    store = new Store();
+    uut = new PrivateEventsListener(nativeEventsReceiver, store);
   });
 
-  it('registers for private events against nativeEventsReceiver', () => {
+  it('register and handle containerStart', () => {
+    const mockRef = {
+      onStart: jest.fn()
+    };
+    store.setRefForId('myContainerId', mockRef);
     uut.listenAndHandlePrivateEvents();
     expect(nativeEventsReceiver.containerStart).toHaveBeenCalledTimes(1);
     const callbackFunction = nativeEventsReceiver.containerStart.mock.calls[0][0];
     expect(callbackFunction).toBeInstanceOf(Function);
+
+    expect(mockRef.onStart).not.toHaveBeenCalled();
     callbackFunction('myContainerId');
+
+    expect(mockRef.onStart).toHaveBeenCalledTimes(1);
+  });
+
+  it('register and listen containerStop', () => {
+    uut.listenAndHandlePrivateEvents();
+    expect(nativeEventsReceiver.containerStop).toHaveBeenCalledTimes(1);
   });
 });