simplified commands api

lib/android/app/src/main/java/com/reactnativenavigation/react/NavigationModule.java

@@ -65,21 +65,21 @@ public class NavigationModule extends ReactContextBaseJavaModule {
 	}
 
 	@ReactMethod
-	public void popTo(final String onContainerId, final String toContainerId) {
+	public void popTo(final String containerId) {
 		handle(new Runnable() {
 			@Override
 			public void run() {
-				navigator().popTo(onContainerId, toContainerId);
+				navigator().popTo(containerId);
 			}
 		});
 	}
 
 	@ReactMethod
-	public void popToRoot(final String onContainerId) {
+	public void popToRoot(final String containerId) {
 		handle(new Runnable() {
 			@Override
 			public void run() {
-				navigator().popToRoot(onContainerId);
+				navigator().popToRoot(containerId);
 			}
 		});
 	}

lib/android/app/src/main/java/com/reactnativenavigation/viewcontrollers/Navigator.java

@@ -87,13 +87,12 @@ public class Navigator extends ParentController {
 		}
 	}
 
-	public void popTo(final String fromId, final String toId) {
-		ViewController from = findControllerById(fromId);
-		ViewController to = findControllerById(toId);
-		if (from != null && to != null) {
-			StackController parentStackController = from.getParentStackController();
+	public void popTo(final String containerId) {
+		ViewController target = findControllerById(containerId);
+		if (target != null) {
+			StackController parentStackController = target.getParentStackController();
 			if (parentStackController != null) {
-				parentStackController.popTo(to);
+				parentStackController.popTo(target);
 			}
 		}
 	}

lib/android/app/src/test/java/com/reactnativenavigation/viewcontrollers/NavigatorTest.java

@@ -154,7 +154,7 @@ public class NavigatorTest extends BaseTest {
 		bottomTabsController.setTabs(Arrays.<ViewController>asList(stack1, stack2));
 		uut.setRoot(bottomTabsController);
 
-		uut.popTo(child2.getId(), child2.getId());
+		uut.popTo(child2.getId());
 
 		assertThat(stack2.getChildControllers()).containsOnly(child2);
 	}

lib/ios/RNNBridgeModule.m

@@ -30,8 +30,8 @@ RCT_EXPORT_METHOD(pop:(NSString*)containerId) {
 	[_commandsHandler pop:containerId];
 }
 
-RCT_EXPORT_METHOD(popTo:(NSString*)fromContainerId toContainerId:(NSString*)toContainerId) {
-	[_commandsHandler popTo:toContainerId fromContainerId:fromContainerId];
+RCT_EXPORT_METHOD(popTo:(NSString*)containerId) {
+	[_commandsHandler popTo:containerId];
 }
 
 RCT_EXPORT_METHOD(popToRoot:(NSString*)containerId) {

lib/ios/RNNCommandsHandler.h

@@ -14,7 +14,7 @@
 
 -(void) pop:(NSString*)containerId;
 
--(void) popTo:(NSString*)containerId fromContainerId:(NSString*)fromContainerId;
+-(void) popTo:(NSString*)containerId;
 
 -(void) popToRoot:(NSString*)containerId;
 

lib/ios/RNNCommandsHandler.m

@@ -44,9 +44,9 @@
 	[_navigationStackManager pop:containerId];
 }
 
--(void) popTo:(NSString*)containerId fromContainerId:(NSString*)fromContainerId; {
+-(void) popTo:(NSString*)containerId {
 	[self assertReady];
-	[_navigationStackManager popTo:containerId fromContainerId:fromContainerId];
+	[_navigationStackManager popTo:containerId];
 }
 
 -(void) popToRoot:(NSString*)containerId {

lib/ios/RNNNavigationStackManager.h

@@ -8,7 +8,7 @@
 
 -(void)push:(UIViewController*)newTop onTop:(NSString*)containerId;
 -(void)pop:(NSString*)containerId;
--(void)popTo:(NSString*)toContainerId fromContainerId:(NSString*)fromContainerId;
+-(void)popTo:(NSString*)containerId;
 -(void)popToRoot:(NSString*)containerId;
 
 @end

lib/ios/RNNNavigationStackManager.m

@@ -28,15 +28,15 @@
 	[_store removeContainer:containerId];
 }
 
--(void)popTo:(NSString*)toContainerId fromContainerId:(NSString*)fromContainerId {
-	UIViewController *vc = [_store findContainerForId:fromContainerId];
-	UINavigationController *nvc = [vc navigationController];
-	
-	UIViewController *toVC = [_store findContainerForId:toContainerId];
+-(void)popTo:(NSString*)containerId {
+	UIViewController *vc = [_store findContainerForId:containerId];
 	
-	if (vc && toVC) {
-		NSArray *poppedVCs = [nvc popToViewController:toVC animated:YES];
-		[self removePopedViewControllers:poppedVCs];
+	if (vc) {
+		UINavigationController *nvc = [vc navigationController];
+		if(nvc) {
+			NSArray *poppedVCs = [nvc popToViewController:vc animated:YES];
+			[self removePopedViewControllers:poppedVCs];
+		}
 	}
 }
 

lib/ios/ReactNativeNavigationTests/RNNNavigationStackManagerTest.m

@@ -62,7 +62,7 @@
 
 - (void)testPopToSpecificVC_removeAllPopedVCFromStore {
 	self.nvc.willReturnVCs = @[self.vc2, self.vc3];
-	[self.uut popTo:@"vc1" fromContainerId:@"vc3"];
+	[self.uut popTo:@"vc1"];
 	
 	XCTAssertNil([self.store findContainerForId:@"vc2"]);
 	XCTAssertNil([self.store findContainerForId:@"vc3"]);

lib/src/Navigation.js

@@ -4,8 +4,7 @@ import UniqueIdProvider from './adapters/UniqueIdProvider';
 
 import Store from './containers/Store';
 import ContainerRegistry from './containers/ContainerRegistry';
-import AppCommands from './commands/AppCommands';
-import ContainerCommands from './commands/ContainerCommands';
+import Commands from './commands/Commands';
 import LayoutTreeParser from './commands/LayoutTreeParser';
 import LayoutTreeCrawler from './commands/LayoutTreeCrawler';
 import PrivateEventsListener from './events/PrivateEventsListener';
@@ -20,7 +19,7 @@ class Navigation {
     this.layoutTreeParser = new LayoutTreeParser();
     this.layoutTreeCrawler = new LayoutTreeCrawler(this.uniqueIdProvider, this.store);
     this.nativeCommandsSender = new NativeCommandsSender();
-    this.appCommands = new AppCommands(this.nativeCommandsSender, this.layoutTreeParser, this.layoutTreeCrawler);
+    this.commands = new Commands(this.nativeCommandsSender, this.layoutTreeParser, this.layoutTreeCrawler);
     this.publicEventsRegistry = new PublicEventsRegistry(this.nativeEventsReceiver);
     this.privateEventsListener = new PrivateEventsListener(this.nativeEventsReceiver, this.store);
     this.privateEventsListener.listenAndHandlePrivateEvents();
@@ -31,27 +30,39 @@ class Navigation {
   }
 
   setRoot(params) {
-    return this.appCommands.setRoot(params);
+    return this.commands.setRoot(params);
   }
 
   showModal(params) {
-    return this.appCommands.showModal(params);
+    return this.commands.showModal(params);
   }
 
-  dismissModal(id) {
-    return this.appCommands.dismissModal(id);
+  dismissModal(containerId) {
+    return this.commands.dismissModal(containerId);
   }
 
   dismissAllModals() {
-    return this.appCommands.dismissAllModals();
+    return this.commands.dismissAllModals();
   }
 
-  events() {
-    return this.publicEventsRegistry;
+  push(onContainerId, params) {
+    return this.commands.push(onContainerId, params);
+  }
+
+  pop(containerId) {
+    return this.commands.pop(containerId);
+  }
+
+  popTo(containerId) {
+    return this.commands.popTo(containerId);
+  }
+
+  popToRoot(containerId) {
+    return this.commands.popToRoot(containerId);
   }
 
-  on(containerId) {
-    return new ContainerCommands(containerId, this.nativeCommandsSender, this.layoutTreeParser, this.layoutTreeCrawler);
+  events() {
+    return this.publicEventsRegistry;
   }
 }
 

lib/src/Navigation.test.js

@@ -8,7 +8,7 @@ describe('Navigation', () => {
     jest.mock('./adapters/NativeEventsReceiver');
 
     jest.mock('./containers/ContainerRegistry');
-    jest.mock('./commands/AppCommands');
+    jest.mock('./commands/Commands');
 
     Navigation = require('./Navigation').default;
   });
@@ -22,30 +22,37 @@ describe('Navigation', () => {
   });
 
   it('setRoot delegates to Commands', async () => {
-    Navigation.appCommands.setRoot.mockReturnValue(Promise.resolve('result'));
+    Navigation.commands.setRoot.mockReturnValue(Promise.resolve('result'));
     const params = {};
     const result = await Navigation.setRoot(params);
     expect(result).toEqual('result');
-    expect(Navigation.appCommands.setRoot).toHaveBeenCalledTimes(1);
-    expect(Navigation.appCommands.setRoot).toHaveBeenCalledWith(params);
+    expect(Navigation.commands.setRoot).toHaveBeenCalledTimes(1);
+    expect(Navigation.commands.setRoot).toHaveBeenCalledWith(params);
   });
 
-  it('showModal delegates to AppCommands', async () => {
-    Navigation.appCommands.showModal.mockReturnValue(Promise.resolve('result'));
+  it('showModal delegates to Commands', async () => {
+    Navigation.commands.showModal.mockReturnValue(Promise.resolve('result'));
     const params = {};
     const result = await Navigation.showModal(params);
     expect(result).toEqual('result');
-    expect(Navigation.appCommands.showModal).toHaveBeenCalledTimes(1);
-    expect(Navigation.appCommands.showModal).toHaveBeenCalledWith(params);
+    expect(Navigation.commands.showModal).toHaveBeenCalledWith(params);
+    expect(Navigation.commands.showModal).toHaveBeenCalledTimes(1);
   });
 
-  it('dismissModal delegates to AppCommands', async () => {
-    Navigation.appCommands.dismissModal.mockReturnValue(Promise.resolve('result'));
+  it('dismissModal delegates to Commands', async () => {
+    Navigation.commands.dismissModal.mockReturnValue(Promise.resolve('result'));
     const params = {};
     const result = await Navigation.dismissModal(params);
     expect(result).toEqual('result');
-    expect(Navigation.appCommands.dismissModal).toHaveBeenCalledTimes(1);
-    expect(Navigation.appCommands.dismissModal).toHaveBeenCalledWith(params);
+    expect(Navigation.commands.dismissModal).toHaveBeenCalledTimes(1);
+    expect(Navigation.commands.dismissModal).toHaveBeenCalledWith(params);
+  });
+
+  it('dismissAllModals', async () => {
+    Navigation.commands.dismissAllModals.mockReturnValue(Promise.resolve('result'));
+    const result = await Navigation.dismissAllModals();
+    expect(Navigation.commands.dismissAllModals).toHaveBeenCalledTimes(1);
+    expect(result).toEqual('result');
   });
 
   it('events return public events', () => {
@@ -55,18 +62,42 @@ describe('Navigation', () => {
     expect(Navigation.nativeEventsReceiver.appLaunched).toHaveBeenCalledWith(cb);
   });
 
-  it('on containerId returns an object that performs commands on a container', () => {
-    expect(Navigation.on('myUniqueId').push).toBeInstanceOf(Function);
-  });
-
   it('starts listening and handles internal events', () => {
     expect(Navigation.nativeEventsReceiver.containerStart).toHaveBeenCalledTimes(1);
   });
 
-  it('dismissAllModals', async () => {
-    Navigation.appCommands.dismissAllModals.mockReturnValue(Promise.resolve('result'));
-    const result = await Navigation.dismissAllModals();
-    expect(Navigation.appCommands.dismissAllModals).toHaveBeenCalledTimes(1);
+  it('push delegates to commands', async () => {
+    Navigation.commands.push.mockReturnValue(Promise.resolve('result'));
+    const params = {};
+    const result = await Navigation.push('theContainerId', params);
+    expect(result).toEqual('result');
+    expect(Navigation.commands.push).toHaveBeenCalledWith('theContainerId', params);
+    expect(Navigation.commands.push).toHaveBeenCalledTimes(1);
+  });
+
+  it('pop delegates to commands', async () => {
+    Navigation.commands.pop.mockReturnValue(Promise.resolve('result'));
+    const result = await Navigation.pop('theContainerId');
+    expect(result).toEqual('result');
+    expect(Navigation.commands.pop).toHaveBeenCalledWith('theContainerId');
+    expect(Navigation.commands.pop).toHaveBeenCalledTimes(1);
+  });
+
+  it('popTo delegates to commands', async () => {
+    Navigation.commands.popTo.mockReturnValue(Promise.resolve('result'));
+    const params = {};
+    const result = await Navigation.popTo('theContainerId');
+    expect(result).toEqual('result');
+    expect(Navigation.commands.popTo).toHaveBeenCalledWith('theContainerId');
+    expect(Navigation.commands.popTo).toHaveBeenCalledTimes(1);
+  });
+
+  it('popToRoot delegates to commands', async () => {
+    Navigation.commands.popToRoot.mockReturnValue(Promise.resolve('result'));
+    const params = {};
+    const result = await Navigation.popToRoot('theContainerId');
     expect(result).toEqual('result');
+    expect(Navigation.commands.popToRoot).toHaveBeenCalledWith('theContainerId');
+    expect(Navigation.commands.popToRoot).toHaveBeenCalledTimes(1);
   });
 });

lib/src/adapters/NativeCommandsSender.js

@@ -20,9 +20,9 @@ export default class NativeCommandsSender {
     return Promise.resolve(containerId);
   }
 
-  popTo(containerId, targetContainerId) {
-    this.nativeCommandsModule.popTo(containerId, targetContainerId);
-    return Promise.resolve(targetContainerId);
+  popTo(containerId) {
+    this.nativeCommandsModule.popTo(containerId);
+    return Promise.resolve(containerId);
   }
 
   popToRoot(containerId) {
@@ -35,9 +35,9 @@ export default class NativeCommandsSender {
     return Promise.resolve(layout);
   }
 
-  dismissModal(id) {
-    this.nativeCommandsModule.dismissModal(id);
-    return Promise.resolve(id);
+  dismissModal(containerId) {
+    this.nativeCommandsModule.dismissModal(containerId);
+    return Promise.resolve(containerId);
   }
 
   dismissAllModals() {

lib/src/commands/AppCommands.js → lib/src/commands/Commands.js

@@ -1,6 +1,6 @@
 import _ from 'lodash';
 
-export default class AppCommands {
+export default class Commands {
   constructor(nativeCommandsSender, layoutTreeParser, layoutTreeCrawler) {
     this.nativeCommandsSender = nativeCommandsSender;
     this.layoutTreeParser = layoutTreeParser;
@@ -28,5 +28,24 @@ export default class AppCommands {
   dismissAllModals() {
     return this.nativeCommandsSender.dismissAllModals();
   }
+
+  push(onContainerId, containerData) {
+    const input = _.cloneDeep(containerData);
+    const layout = this.layoutTreeParser.createContainer(input);
+    this.layoutTreeCrawler.crawl(layout);
+    return this.nativeCommandsSender.push(onContainerId, layout);
+  }
+
+  pop(containerId) {
+    return this.nativeCommandsSender.pop(containerId);
+  }
+
+  popTo(containerId) {
+    return this.nativeCommandsSender.popTo(containerId);
+  }
+
+  popToRoot(containerId) {
+    return this.nativeCommandsSender.popToRoot(containerId);
+  }
 }
 

lib/src/commands/AppCommands.test.js → lib/src/commands/Commands.test.js

@@ -5,9 +5,9 @@ import Store from '../containers/Store';
 import UniqueIdProvider from '../adapters/UniqueIdProvider.mock';
 import NativeCommandsSender from '../adapters/NativeCommandsSender.mock';
 
-import AppCommands from './AppCommands';
+import Commands from './Commands';
 
-describe('AppCommands', () => {
+describe('Commands', () => {
   let uut;
   let mockCommandsSender;
   let store;
@@ -16,7 +16,7 @@ describe('AppCommands', () => {
     mockCommandsSender = new NativeCommandsSender();
     store = new Store();
 
-    uut = new AppCommands(mockCommandsSender, new LayoutTreeParser(), new LayoutTreeCrawler(new UniqueIdProvider(), store));
+    uut = new Commands(mockCommandsSender, new LayoutTreeParser(), new LayoutTreeCrawler(new UniqueIdProvider(), store));
   });
 
   describe('setRoot', () => {
@@ -139,4 +139,74 @@ describe('AppCommands', () => {
       expect(result).toEqual('the id');
     });
   });
+
+  describe('push', () => {
+    it('deep clones input to avoid mutation errors', () => {
+      const obj = {};
+      uut.push('theContainerId', { name: 'name', inner: { foo: obj } });
+      expect(mockCommandsSender.push.mock.calls[0][1].data.inner.foo).not.toBe(obj);
+    });
+
+    it('resolves with the parsed layout', async () => {
+      mockCommandsSender.push.mockReturnValue(Promise.resolve('the resolved layout'));
+      const result = await uut.push('theContainerId', { name: 'com.example.MyScreen' });
+      expect(result).toEqual('the resolved layout');
+    });
+
+    it('parses into correct layout node and sends to native', () => {
+      uut.push('theContainerId', { name: 'com.example.MyScreen' });
+      expect(mockCommandsSender.push).toHaveBeenCalledTimes(1);
+      expect(mockCommandsSender.push).toHaveBeenCalledWith('theContainerId', {
+        type: 'Container',
+        id: 'Container+UNIQUE_ID',
+        data: {
+          name: 'com.example.MyScreen',
+          navigationStyle: {}
+        },
+        children: []
+      });
+    });
+  });
+
+  describe('pop', () => {
+    it('pops a container, passing containerId', () => {
+      uut.pop('theContainerId');
+      expect(mockCommandsSender.pop).toHaveBeenCalledTimes(1);
+      expect(mockCommandsSender.pop).toHaveBeenCalledWith('theContainerId');
+    });
+
+    it('pop returns a promise that resolves to containerId', async () => {
+      mockCommandsSender.pop.mockReturnValue(Promise.resolve('theContainerId'));
+      const result = await uut.pop('theContainerId');
+      expect(result).toEqual('theContainerId');
+    });
+  });
+
+  describe('popTo', () => {
+    it('pops all containers until the passed Id is top', () => {
+      uut.popTo('theContainerId');
+      expect(mockCommandsSender.popTo).toHaveBeenCalledTimes(1);
+      expect(mockCommandsSender.popTo).toHaveBeenCalledWith('theContainerId');
+    });
+
+    it('returns a promise that resolves to targetId', async () => {
+      mockCommandsSender.popTo.mockReturnValue(Promise.resolve('theContainerId'));
+      const result = await uut.popTo('theContainerId');
+      expect(result).toEqual('theContainerId');
+    });
+  });
+
+  describe('popToRoot', () => {
+    it('pops all containers to root', () => {
+      uut.popToRoot('theContainerId');
+      expect(mockCommandsSender.popToRoot).toHaveBeenCalledTimes(1);
+      expect(mockCommandsSender.popToRoot).toHaveBeenCalledWith('theContainerId');
+    });
+
+    it('returns a promise that resolves to targetId', async () => {
+      mockCommandsSender.popToRoot.mockReturnValue(Promise.resolve('theContainerId'));
+      const result = await uut.popToRoot('theContainerId');
+      expect(result).toEqual('theContainerId');
+    });
+  });
 });

lib/src/commands/ContainerCommands.js

@@ -1,29 +0,0 @@
-import _ from 'lodash';
-
-export default class ContainerCommands {
-  constructor(containerId, nativeCommandsSender, layoutTreeParser, layoutTreeCrawler) {
-    this.containerId = containerId;
-    this.nativeCommandsSender = nativeCommandsSender;
-    this.layoutTreeParser = layoutTreeParser;
-    this.layoutTreeCrawler = layoutTreeCrawler;
-  }
-
-  push(containerData) {
-    const input = _.cloneDeep(containerData);
-    const layout = this.layoutTreeParser.createContainer(input);
-    this.layoutTreeCrawler.crawl(layout);
-    return this.nativeCommandsSender.push(this.containerId, layout);
-  }
-
-  pop() {
-    return this.nativeCommandsSender.pop(this.containerId);
-  }
-
-  popTo(toContainerId) {
-    return this.nativeCommandsSender.popTo(this.containerId, toContainerId);
-  }
-
-  popToRoot() {
-    return this.nativeCommandsSender.popToRoot(this.containerId);
-  }
-}

lib/src/commands/ContainerCommands.test.js

@@ -1,92 +0,0 @@
-import NativeCommandsSender from '../adapters/NativeCommandsSender.mock';
-import UniqueIdProvider from '../adapters/UniqueIdProvider.mock';
-import Store from '../containers/Store';
-import LayoutTreeParser from './LayoutTreeParser';
-import LayoutTreeCrawler from './LayoutTreeCrawler';
-
-import ContainerCommands from './ContainerCommands';
-
-describe('ContainerCommands', () => {
-  let uut;
-  let mockCommandsSender;
-  const containerId = 'myUniqueId';
-
-  beforeEach(() => {
-    mockCommandsSender = new NativeCommandsSender();
-    uut = new ContainerCommands(containerId, mockCommandsSender, new LayoutTreeParser(), new LayoutTreeCrawler(new UniqueIdProvider(), new Store()));
-  });
-
-  it('holds containerId', () => {
-    expect(uut.containerId).toEqual('myUniqueId');
-  });
-
-  describe('push', () => {
-    it('deep clones input to avoid mutation errors', () => {
-      const obj = {};
-      uut.push({ name: 'name', inner: { foo: obj } });
-      expect(mockCommandsSender.push.mock.calls[0][1].data.inner.foo).not.toBe(obj);
-    });
-
-    it('resolves with the parsed layout', async () => {
-      mockCommandsSender.push.mockReturnValue(Promise.resolve('the resolved layout'));
-      const result = await uut.push({ name: 'com.example.MyScreen' });
-      expect(result).toEqual('the resolved layout');
-    });
-
-    it('parses into correct layout node and sends to native', () => {
-      uut.push({ name: 'com.example.MyScreen' });
-      expect(mockCommandsSender.push).toHaveBeenCalledTimes(1);
-      expect(mockCommandsSender.push).toHaveBeenCalledWith('myUniqueId', {
-        type: 'Container',
-        id: 'Container+UNIQUE_ID',
-        data: {
-          name: 'com.example.MyScreen',
-          navigationStyle: {}
-        },
-        children: []
-      });
-    });
-  });
-
-  describe('pop', () => {
-    it('pops a container, passing containerId', () => {
-      uut.pop();
-      expect(mockCommandsSender.pop).toHaveBeenCalledTimes(1);
-      expect(mockCommandsSender.pop).toHaveBeenCalledWith(containerId);
-    });
-
-    it('pop returns a promise that resolves to containerId', async () => {
-      mockCommandsSender.pop.mockReturnValue(Promise.resolve(containerId));
-      const result = await uut.pop();
-      expect(result).toEqual(containerId);
-    });
-  });
-
-  describe('popTo', () => {
-    it('pops all containers until the passed Id is top', () => {
-      uut.popTo('someOtherContainerId');
-      expect(mockCommandsSender.popTo).toHaveBeenCalledTimes(1);
-      expect(mockCommandsSender.popTo).toHaveBeenCalledWith(containerId, 'someOtherContainerId');
-    });
-
-    it('returns a promise that resolves to targetId', async () => {
-      mockCommandsSender.popTo.mockReturnValue(Promise.resolve(containerId));
-      const result = await uut.popTo('someOtherContainerId');
-      expect(result).toEqual(containerId);
-    });
-  });
-
-  describe('popToRoot', () => {
-    it('pops all containers to root', () => {
-      uut.popToRoot();
-      expect(mockCommandsSender.popToRoot).toHaveBeenCalledTimes(1);
-      expect(mockCommandsSender.popToRoot).toHaveBeenCalledWith(containerId);
-    });
-
-    it('returns a promise that resolves to targetId', async () => {
-      mockCommandsSender.popToRoot.mockReturnValue(Promise.resolve(containerId));
-      const result = await uut.popToRoot();
-      expect(result).toEqual(containerId);
-    });
-  });
-});

playground/src/containers/LifecycleScreen.js

@@ -36,7 +36,7 @@ class LifecycleScreen extends Component {
   }
 
   onClickPush() {
-    Navigation.on(this.props.id).push({
+    Navigation.push(this.props.id, {
       name: 'navigation.playground.TextScreen'
     });
   }

playground/src/containers/PushedScreen.js

@@ -39,7 +39,7 @@ class PushedScreen extends Component {
   }
 
   onClickPush() {
-    Navigation.on(this.props.id).push({
+    Navigation.push(this.props.id, {
       name: 'navigation.playground.PushedScreen',
       passProps: {
         stackPosition: this.getStackPosition() + 1,
@@ -49,19 +49,19 @@ class PushedScreen extends Component {
   }
 
   onClickPop() {
-    Navigation.on(this.props.id).pop();
+    Navigation.pop(this.props.id);
   }
 
   onClickPopPrevious() {
-    Navigation.on(_.last(this.props.previousScreenIds)).pop();
+    Navigation.pop(_.last(this.props.previousScreenIds));
   }
 
   onClickPopToFirstPosition() {
-    Navigation.on(this.props.id).popTo(this.props.previousScreenIds[0]);
+    Navigation.popTo(this.props.previousScreenIds[0]);
   }
 
   onClickPopToRoot() {
-    Navigation.on(this.props.id).popToRoot();
+    Navigation.popToRoot(this.props.id);
   }
 
   getStackPosition() {

playground/src/containers/WelcomeScreen.js

@@ -100,13 +100,13 @@ class WelcomeScreen extends Component {
   }
 
   onClickPush() {
-    Navigation.on(this.props.id).push({
+    Navigation.push(this.props.id, {
       name: 'navigation.playground.PushedScreen'
     });
   }
 
   onClickLifecycleScreen() {
-    Navigation.on(this.props.id).push({
+    Navigation.push(this.props.id, {
       name: 'navigation.playground.LifecycleScreen'
     });
   }