BREAKING events api

lib/src/adapters/NativeEventsReceiver.ts

@@ -7,23 +7,23 @@ export class NativeEventsReceiver {
     this.emitter = new NativeEventEmitter(NativeModules.RNNEventEmitter);
   }
 
-  registerOnAppLaunched(callback: () => void): EventSubscription {
-    return this.emitter.addListener('RNN.onAppLaunched', callback);
+  public registerAppLaunchedListener(callback: () => void): EventSubscription {
+    return this.emitter.addListener('RNN.appLaunched', callback);
   }
 
-  registerComponentDidAppear(callback: (params) => void): EventSubscription {
+  public registerComponentDidAppearListener(callback: (data) => void): EventSubscription {
     return this.emitter.addListener('RNN.componentDidAppear', callback);
   }
 
-  registerComponentDidDisappear(callback: (params) => void): EventSubscription {
+  public registerComponentDidDisappearListener(callback: (data) => void): EventSubscription {
     return this.emitter.addListener('RNN.componentDidDisappear', callback);
   }
 
-  registerOnNavigationButtonPressed(callback: (params) => void): EventSubscription {
-    return this.emitter.addListener('RNN.onNavigationButtonPressed', callback);
+  public registerCommandCompletedListener(callback: (data) => void): EventSubscription {
+    return this.emitter.addListener('RNN.commandCompleted', callback);
   }
 
-  public registerOnNavigationEvent(callback: (params) => void): EventSubscription {
-    return this.emitter.addListener('RNN.onNavigationEvent', callback);
+  public registerNativeEventListener(callback: (data) => void): EventSubscription {
+    return this.emitter.addListener('RNN.nativeEvent', callback);
   }
 }

lib/src/events/ComponentEventsObserver.test.ts

@@ -1,7 +1,7 @@
 import { ComponentEventsObserver } from './ComponentEventsObserver';
 import { Store } from '../components/Store';
 
-describe(`ComponentEventRegistry`, () => {
+describe(`ComponentEventsObserver`, () => {
   let uut: ComponentEventsObserver;
   let eventRegistry;
   let store: Store;
@@ -10,9 +10,9 @@ describe(`ComponentEventRegistry`, () => {
 
   beforeEach(() => {
     eventRegistry = {
-      componentDidAppear: jest.fn(),
-      componentDidDisappear: jest.fn(),
-      onNavigationButtonPressed: jest.fn()
+      registerComponentDidAppearListener: jest.fn(),
+      registerComponentDidDisappearListener: jest.fn(),
+      registerNativeEventListener: jest.fn()
     };
 
     mockComponentRef = {
@@ -28,13 +28,13 @@ describe(`ComponentEventRegistry`, () => {
   });
 
   it('register for lifecycle events on eventRegistry', () => {
-    expect(eventRegistry.componentDidAppear).toHaveBeenCalledTimes(0);
-    expect(eventRegistry.componentDidDisappear).toHaveBeenCalledTimes(0);
-    expect(eventRegistry.onNavigationButtonPressed).toHaveBeenCalledTimes(0);
+    expect(eventRegistry.registerComponentDidAppearListener).toHaveBeenCalledTimes(0);
+    expect(eventRegistry.registerComponentDidDisappearListener).toHaveBeenCalledTimes(0);
+    expect(eventRegistry.registerNativeEventListener).toHaveBeenCalledTimes(0);
     uut.registerForAllComponents();
-    expect(eventRegistry.componentDidAppear).toHaveBeenCalledTimes(1);
-    expect(eventRegistry.componentDidDisappear).toHaveBeenCalledTimes(1);
-    expect(eventRegistry.onNavigationButtonPressed).toHaveBeenCalledTimes(1);
+    expect(eventRegistry.registerComponentDidAppearListener).toHaveBeenCalledTimes(1);
+    expect(eventRegistry.registerComponentDidDisappearListener).toHaveBeenCalledTimes(1);
+    expect(eventRegistry.registerNativeEventListener).toHaveBeenCalledTimes(1);
   });
 
   it('bubbles lifecycle to component from store', () => {
@@ -43,21 +43,36 @@ describe(`ComponentEventRegistry`, () => {
     expect(mockComponentRef.componentDidDisappear).toHaveBeenCalledTimes(0);
     expect(mockComponentRef.onNavigationButtonPressed).toHaveBeenCalledTimes(0);
     uut.registerForAllComponents();
-    eventRegistry.componentDidAppear.mock.calls[0][0](refId);
-    eventRegistry.componentDidDisappear.mock.calls[0][0](refId);
-    eventRegistry.onNavigationButtonPressed.mock.calls[0][0](refId, params);
+    eventRegistry.registerComponentDidAppearListener.mock.calls[0][0](refId);
+    eventRegistry.registerComponentDidDisappearListener.mock.calls[0][0](refId);
+    eventRegistry.registerNativeEventListener.mock.calls[0][0](refId, params);
     expect(mockComponentRef.componentDidAppear).toHaveBeenCalledTimes(1);
     expect(mockComponentRef.componentDidDisappear).toHaveBeenCalledTimes(1);
+    expect(mockComponentRef.onNavigationButtonPressed).toHaveBeenCalledTimes(0);
+  });
+
+  it('bubbles onNavigationButtonPressed to component by id', () => {
+    const params = {
+      componentId: refId,
+      buttonId: 'theButtonId'
+    };
+    expect(mockComponentRef.onNavigationButtonPressed).toHaveBeenCalledTimes(0);
+    uut.registerForAllComponents();
+
+    eventRegistry.registerNativeEventListener.mock.calls[0][0]('some other event name', params);
+    expect(mockComponentRef.onNavigationButtonPressed).toHaveBeenCalledTimes(0);
+
+    eventRegistry.registerNativeEventListener.mock.calls[0][0]('buttonPressed', params);
     expect(mockComponentRef.onNavigationButtonPressed).toHaveBeenCalledTimes(1);
-    expect(mockComponentRef.onNavigationButtonPressed).toHaveBeenCalledWith(params);
+    expect(mockComponentRef.onNavigationButtonPressed).toHaveBeenCalledWith('theButtonId');
   });
 
   it('defensive unknown id', () => {
     uut.registerForAllComponents();
     expect(() => {
-      eventRegistry.componentDidAppear.mock.calls[0][0]('bad id');
-      eventRegistry.componentDidDisappear.mock.calls[0][0]('bad id');
-      eventRegistry.onNavigationButtonPressed.mock.calls[0][0]('bad id', {});
+      eventRegistry.registerComponentDidAppearListener.mock.calls[0][0]('bad id');
+      eventRegistry.registerComponentDidDisappearListener.mock.calls[0][0]('bad id');
+      eventRegistry.registerNativeEventListener.mock.calls[0][0]('buttonPressed', { componentId: 'bad id' });
     }).not.toThrow();
   });
 
@@ -65,9 +80,9 @@ describe(`ComponentEventRegistry`, () => {
     store.setRefForId('myId', {});
     uut.registerForAllComponents();
     expect(() => {
-      eventRegistry.componentDidAppear.mock.calls[0][0]('myId');
-      eventRegistry.componentDidDisappear.mock.calls[0][0]('myId');
-      eventRegistry.onNavigationButtonPressed.mock.calls[0][0]('myId', {});
+      eventRegistry.registerComponentDidAppearListener.mock.calls[0][0]('myId');
+      eventRegistry.registerComponentDidDisappearListener.mock.calls[0][0]('myId');
+      eventRegistry.registerNativeEventListener.mock.calls[0][0]('bad event name', {});
     }).not.toThrow();
   });
 });

lib/src/events/ComponentEventsObserver.ts

@@ -1,17 +1,19 @@
 import { EventsRegistry } from './EventsRegistry';
 import { Store } from '../components/Store';
 
+const BUTTON_PRESSED_EVENT_NAME = 'buttonPressed';
+
 export class ComponentEventsObserver {
   constructor(private eventsRegistry: EventsRegistry, private store: Store) {
     this.componentDidAppear = this.componentDidAppear.bind(this);
     this.componentDidDisappear = this.componentDidDisappear.bind(this);
-    this.onNavigationButtonPressed = this.onNavigationButtonPressed.bind(this);
+    this.onNativeEvent = this.onNativeEvent.bind(this);
   }
 
   public registerForAllComponents(): void {
-    this.eventsRegistry.componentDidAppear(this.componentDidAppear);
-    this.eventsRegistry.componentDidDisappear(this.componentDidDisappear);
-    this.eventsRegistry.onNavigationButtonPressed(this.onNavigationButtonPressed);
+    this.eventsRegistry.registerComponentDidAppearListener(this.componentDidAppear);
+    this.eventsRegistry.registerComponentDidDisappearListener(this.componentDidDisappear);
+    this.eventsRegistry.registerNativeEventListener(this.onNativeEvent);
   }
 
   private componentDidAppear(componentId: string) {
@@ -28,10 +30,12 @@ export class ComponentEventsObserver {
     }
   }
 
-  private onNavigationButtonPressed(componentId: string, buttonId: string) {
-    const componentRef = this.store.getRefForId(componentId);
-    if (componentRef && componentRef.onNavigationButtonPressed) {
-      componentRef.onNavigationButtonPressed(buttonId);
+  private onNativeEvent(name: string, params: any) {
+    if (name === BUTTON_PRESSED_EVENT_NAME) {
+      const componentRef = this.store.getRefForId(params.componentId);
+      if (componentRef && componentRef.onNavigationButtonPressed) {
+        componentRef.onNavigationButtonPressed(params.buttonId);
+      }
     }
   }
 }

lib/src/events/EventsRegistry.test.ts

@@ -12,96 +12,88 @@ describe('EventsRegistry', () => {
     uut = new EventsRegistry(mockNativeEventsReceiver, commandsObserver);
   });
 
-  it('exposes onAppLaunched event', () => {
+  it('exposes appLaunched event', () => {
     const subscription = {};
     const cb = jest.fn();
-    mockNativeEventsReceiver.registerOnAppLaunched.mockReturnValueOnce(subscription);
+    mockNativeEventsReceiver.registerAppLaunchedListener.mockReturnValueOnce(subscription);
 
-    const result = uut.onAppLaunched(cb);
+    const result = uut.registerAppLaunchedListener(cb);
 
     expect(result).toBe(subscription);
-    expect(mockNativeEventsReceiver.registerOnAppLaunched).toHaveBeenCalledTimes(1);
-    expect(mockNativeEventsReceiver.registerOnAppLaunched).toHaveBeenCalledWith(cb);
+    expect(mockNativeEventsReceiver.registerAppLaunchedListener).toHaveBeenCalledTimes(1);
+    expect(mockNativeEventsReceiver.registerAppLaunchedListener).toHaveBeenCalledWith(cb);
   });
 
   it('exposes componentDidAppear event', () => {
     const subscription = {};
     const cb = jest.fn();
-    mockNativeEventsReceiver.registerComponentDidAppear.mockReturnValueOnce(subscription);
+    mockNativeEventsReceiver.registerComponentDidAppearListener.mockReturnValueOnce(subscription);
 
-    const result = uut.componentDidAppear(cb);
+    const result = uut.registerComponentDidAppearListener(cb);
 
     expect(result).toBe(subscription);
-    expect(mockNativeEventsReceiver.registerComponentDidAppear).toHaveBeenCalledTimes(1);
+    expect(mockNativeEventsReceiver.registerComponentDidAppearListener).toHaveBeenCalledTimes(1);
 
-    mockNativeEventsReceiver.registerComponentDidAppear.mock.calls[0][0]({ componentId: 'theId', componentName: 'theName' });
+    mockNativeEventsReceiver.registerComponentDidAppearListener.mock.calls[0][0]({ componentId: 'theId', componentName: 'theName' });
     expect(cb).toHaveBeenCalledWith('theId', 'theName');
   });
 
   it('exposes componentDidDisappear event', () => {
     const subscription = {};
     const cb = jest.fn();
-    mockNativeEventsReceiver.registerComponentDidDisappear.mockReturnValueOnce(subscription);
+    mockNativeEventsReceiver.registerComponentDidDisappearListener.mockReturnValueOnce(subscription);
 
-    const result = uut.componentDidDisappear(cb);
+    const result = uut.registerComponentDidDisappearListener(cb);
 
     expect(result).toBe(subscription);
-    expect(mockNativeEventsReceiver.registerComponentDidDisappear).toHaveBeenCalledTimes(1);
+    expect(mockNativeEventsReceiver.registerComponentDidDisappearListener).toHaveBeenCalledTimes(1);
 
-    mockNativeEventsReceiver.registerComponentDidDisappear.mock.calls[0][0]({ componentId: 'theId', componentName: 'theName' });
+    mockNativeEventsReceiver.registerComponentDidDisappearListener.mock.calls[0][0]({ componentId: 'theId', componentName: 'theName' });
     expect(cb).toHaveBeenCalledWith('theId', 'theName');
   });
 
-  it('exposes onNavigationButtonPressed event', () => {
-    const subscription = {};
+  it('exposes registerCommandListener registers listener to commandObserver', () => {
     const cb = jest.fn();
-    mockNativeEventsReceiver.registerOnNavigationButtonPressed.mockReturnValueOnce(subscription);
-
-    const result = uut.onNavigationButtonPressed(cb);
-
-    expect(result).toBe(subscription);
-    expect(mockNativeEventsReceiver.registerOnNavigationButtonPressed).toHaveBeenCalledTimes(1);
-
-    mockNativeEventsReceiver.registerOnNavigationButtonPressed.mock.calls[0][0]({ componentId: 'theId', buttonId: 'theBtnId' });
-    expect(cb).toHaveBeenCalledWith('theId', 'theBtnId');
-  });
-
-  it('exposes onNavigationCommand registers listener to commandObserver', () => {
-    const cb = jest.fn();
-    const result = uut.onNavigationCommand(cb);
+    const result = uut.registerCommandListener(cb);
     expect(result).toBeDefined();
     commandsObserver.notify('theCommandName', { x: 1 });
     expect(cb).toHaveBeenCalledTimes(1);
     expect(cb).toHaveBeenCalledWith('theCommandName', { x: 1 });
   });
 
-  it('onNavigationCommand unregister', () => {
+  it('registerCommandListener unregister', () => {
     const cb = jest.fn();
-    const result = uut.onNavigationCommand(cb);
+    const result = uut.registerCommandListener(cb);
     result.remove();
     commandsObserver.notify('theCommandName', { x: 1 });
     expect(cb).not.toHaveBeenCalled();
   });
 
-  it('onNavigationEvent', () => {
+  it('registerCommandCompletedListener', () => {
     const subscription = {};
     const cb = jest.fn();
-    mockNativeEventsReceiver.registerOnNavigationEvent.mockReturnValueOnce(subscription);
+    mockNativeEventsReceiver.registerCommandCompletedListener.mockReturnValueOnce(subscription);
 
-    const result = uut.onNavigationEvent(cb);
+    const result = uut.registerCommandCompletedListener(cb);
 
     expect(result).toBe(subscription);
-    expect(mockNativeEventsReceiver.registerOnNavigationEvent).toHaveBeenCalledTimes(1);
+    expect(mockNativeEventsReceiver.registerCommandCompletedListener).toHaveBeenCalledTimes(1);
 
-    mockNativeEventsReceiver.registerOnNavigationEvent.mock.calls[0][0]({ name: 'the event name', params: { a: 1 } });
-    expect(cb).toHaveBeenCalledWith('the event name', { a: 1 });
+    mockNativeEventsReceiver.registerCommandCompletedListener.mock.calls[0][0]({ commandId: 'theCommandId', completionTime: 12345, params: { a: 1 } });
+    expect(cb).toHaveBeenCalledWith('theCommandId', 12345, { a: 1 });
   });
 
-  it('onNavigationEvent unregister', () => {
+  it('registerNativeEventListener', () => {
     const subscription = {};
     const cb = jest.fn();
-    mockNativeEventsReceiver.registerOnNavigationEvent.mockReturnValueOnce(subscription);
-    const result = uut.onNavigationEvent(cb);
+    mockNativeEventsReceiver.registerNativeEventListener.mockReturnValueOnce(subscription);
+
+    const result = uut.registerNativeEventListener(cb);
+
     expect(result).toBe(subscription);
+    expect(mockNativeEventsReceiver.registerNativeEventListener).toHaveBeenCalledTimes(1);
+
+    mockNativeEventsReceiver.registerNativeEventListener.mock.calls[0][0]({ name: 'the event name', params: { a: 1 } });
+    expect(cb).toHaveBeenCalledWith('the event name', { a: 1 });
   });
 });

lib/src/events/EventsRegistry.ts

@@ -5,27 +5,27 @@ import { EventSubscription } from '../interfaces/EventSubscription';
 export class EventsRegistry {
   constructor(private nativeEventsReceiver: NativeEventsReceiver, private commandsObserver: CommandsObserver) { }
 
-  public onAppLaunched(callback: () => void): EventSubscription {
-    return this.nativeEventsReceiver.registerOnAppLaunched(callback);
+  public registerAppLaunchedListener(callback: () => void): EventSubscription {
+    return this.nativeEventsReceiver.registerAppLaunchedListener(callback);
   }
 
-  public componentDidAppear(callback: (componentId: string, componentName: string) => void): EventSubscription {
-    return this.nativeEventsReceiver.registerComponentDidAppear(({ componentId, componentName }) => callback(componentId, componentName));
+  public registerComponentDidAppearListener(callback: (componentId: string, componentName: string) => void): EventSubscription {
+    return this.nativeEventsReceiver.registerComponentDidAppearListener(({ componentId, componentName }) => callback(componentId, componentName));
   }
 
-  public componentDidDisappear(callback: (componentId: string, componentName: string) => void): EventSubscription {
-    return this.nativeEventsReceiver.registerComponentDidDisappear(({ componentId, componentName }) => callback(componentId, componentName));
+  public registerComponentDidDisappearListener(callback: (componentId: string, componentName: string) => void): EventSubscription {
+    return this.nativeEventsReceiver.registerComponentDidDisappearListener(({ componentId, componentName }) => callback(componentId, componentName));
   }
 
-  public onNavigationButtonPressed(callback: (componentId: string, buttonId: string) => void): EventSubscription {
-    return this.nativeEventsReceiver.registerOnNavigationButtonPressed(({ componentId, buttonId }) => callback(componentId, buttonId));
+  public registerCommandListener(callback: (name: string, params: any) => void): EventSubscription {
+    return this.commandsObserver.register(callback);
   }
 
-  public onNavigationCommand(callback: (name: string, params: any) => void): EventSubscription {
-    return this.commandsObserver.register(callback);
+  public registerCommandCompletedListener(callback: (commandId: string, completionTime: number, params: any) => void): EventSubscription {
+    return this.nativeEventsReceiver.registerCommandCompletedListener(({ commandId, completionTime, params }) => callback(commandId, completionTime, params));
   }
 
-  public onNavigationEvent(callback: (name: string, params: any) => void): EventSubscription {
-    return this.nativeEventsReceiver.registerOnNavigationEvent(({ name, params }) => callback(name, params));
+  public registerNativeEventListener(callback: (name: string, params: any) => void): EventSubscription {
+    return this.nativeEventsReceiver.registerNativeEventListener(({ name, params }) => callback(name, params));
   }
 }

playground/src/screens/OptionsScreen.js

@@ -103,7 +103,7 @@ class OptionsScreen extends Component {
   render() {
     return (
       <View style={styles.root}>
-        <View style={{width: 2, height: 2, backgroundColor: 'red', alignSelf: 'center'}}/>
+        <View style={{ width: 2, height: 2, backgroundColor: 'red', alignSelf: 'center' }} />
         <Text style={styles.h1} testID={testIDs.OPTIONS_SCREEN_HEADER}>{`Options Screen`}</Text>
         <Button title='Dynamic Options' testID={testIDs.DYNAMIC_OPTIONS_BUTTON} onPress={this.onClickDynamicOptions} />
         <Button title='Show Top Bar' testID={testIDs.SHOW_TOP_BAR_BUTTON} onPress={this.onClickShowTopBar} />