refactored, renamed events, e2e passes

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

@@ -10,10 +10,10 @@ import com.facebook.react.modules.core.DeviceEventManagerModule;
 import static com.facebook.react.modules.core.DeviceEventManagerModule.RCTDeviceEventEmitter;
 
 public class NavigationEvent {
-	private static final String onAppLaunched = "RNN.appLaunched";
+	private static final String onAppLaunched = "RNN.onAppLaunched";
 	private static final String componentDidAppear = "RNN.componentDidAppear";
 	private static final String componentDidDisappear = "RNN.componentDidDisappear";
-	private static final String onNavigationButtonPressed = "RNN.navigationButtonPressed";
+	private static final String onNavigationButtonPressed = "RNN.onNavigationButtonPressed";
 
 	private final RCTDeviceEventEmitter emitter;
 

lib/ios/RNNEventEmitter.m

@@ -7,10 +7,10 @@
 
 RCT_EXPORT_MODULE();
 
-static NSString* const onAppLaunched	= @"RNN.appLaunched";
+static NSString* const onAppLaunched	= @"RNN.onAppLaunched";
 static NSString* const componentDidAppear	= @"RNN.componentDidAppear";
 static NSString* const componentDidDisappear	= @"RNN.componentDidDisappear";
-static NSString* const onNavigationButtonPressed	= @"RNN.navigationButtonPressed";
+static NSString* const onNavigationButtonPressed	= @"RNN.onNavigationButtonPressed";
 
 -(NSArray<NSString *> *)supportedEvents {
 	return @[onAppLaunched, componentDidAppear, componentDidDisappear, onNavigationButtonPressed];
@@ -35,7 +35,7 @@ static NSString* const onNavigationButtonPressed	= @"RNN.navigationButtonPressed
 }
 
 -(void)sendOnNavigationButtonPressed:(NSString *)componentId buttonId:(NSString*)buttonId {
-	[self send:onNavigationButtonPressed body:@{@"componentId":componentId , @"buttonId": buttonId }];
+	[self send:onNavigationButtonPressed body:@{@"componentId":componentId , @"buttonId": buttonId}];
 }
 
 - (void)addListener:(NSString *)eventName {

lib/src/adapters/NativeEventsReceiver.ts

@@ -22,7 +22,7 @@ export class NativeEventsReceiver {
     return this.emitter.addListener('RNN.componentDidDisappear', callback);
   }
 
-  registerOnNavigationInteraction(callback: (componentId: string, params) => void): EventSubscription {
-    return this.emitter.addListener('RNN.onNavigationInteraction', callback);
+  registerOnNavigationButtonPressed(callback: (componentId: string, buttonId: string) => void): EventSubscription {
+    return this.emitter.addListener('RNN.onNavigationButtonPressed', ({ componentId, buttonId }) => callback(componentId, buttonId));
   }
 }

lib/src/components/ComponentWrapper.test.tsx

@@ -145,7 +145,7 @@ describe('ComponentWrapper', () => {
   describe('component lifecycle', () => {
     const componentDidAppearCallback = jest.fn();
     const componentDidDisappearCallback = jest.fn();
-    const onNavigationInteractionCallback = jest.fn();
+    const onNavigationButtonPressedCallback = jest.fn();
 
     class MyLifecycleComponent extends MyComponent {
       componentDidAppear() {
@@ -156,17 +156,17 @@ describe('ComponentWrapper', () => {
         componentDidDisappearCallback();
       }
 
-      onNavigationInteraction() {
-        onNavigationInteractionCallback();
+      onNavigationButtonPressed() {
+        onNavigationButtonPressedCallback();
       }
     }
 
-    it('componentDidAppear, componentDidDisappear and onNavigationInteraction are optional', () => {
+    it('componentDidAppear, componentDidDisappear and onNavigationButtonPressed are optional', () => {
       const NavigationComponent = ComponentWrapper.wrap(componentName, MyComponent, store);
       const tree = renderer.create(<NavigationComponent componentId={'component1'} />);
       expect(() => tree.getInstance()!.componentDidAppear()).not.toThrow();
       expect(() => tree.getInstance()!.componentDidDisappear()).not.toThrow();
-      expect(() => tree.getInstance()!.onNavigationInteraction()).not.toThrow();
+      expect(() => tree.getInstance()!.onNavigationButtonPressed()).not.toThrow();
     });
 
     it('calls componentDidAppear on OriginalComponent', () => {
@@ -185,12 +185,12 @@ describe('ComponentWrapper', () => {
       expect(componentDidDisappearCallback).toHaveBeenCalledTimes(1);
     });
 
-    it('calls onNavigationInteraction on OriginalComponent', () => {
+    it('calls onNavigationButtonPressed on OriginalComponent', () => {
       const NavigationComponent = ComponentWrapper.wrap(componentName, MyLifecycleComponent, store);
       const tree = renderer.create(<NavigationComponent componentId={'component1'} />);
-      expect(onNavigationInteractionCallback).toHaveBeenCalledTimes(0);
-      tree.getInstance()!.onNavigationInteraction();
-      expect(onNavigationInteractionCallback).toHaveBeenCalledTimes(1);
+      expect(onNavigationButtonPressedCallback).toHaveBeenCalledTimes(0);
+      tree.getInstance()!.onNavigationButtonPressed();
+      expect(onNavigationButtonPressedCallback).toHaveBeenCalledTimes(1);
     });
   });
 });

lib/src/components/ComponentWrapper.tsx

@@ -39,9 +39,9 @@ export class ComponentWrapper {
         }
       }
 
-      onNavigationInteraction(buttonId) {
-        if (this.originalComponentRef.onNavigationInteraction) {
-          this.originalComponentRef.onNavigationInteraction(buttonId);
+      onNavigationButtonPressed(buttonId) {
+        if (this.originalComponentRef.onNavigationButtonPressed) {
+          this.originalComponentRef.onNavigationButtonPressed(buttonId);
         }
       }
 

lib/src/events/ComponentEventsRegistry.test.ts

@@ -12,13 +12,13 @@ describe(`ComponentEventRegistry`, () => {
     eventRegistry = {
       componentDidAppear: jest.fn(),
       componentDidDisappear: jest.fn(),
-      onNavigationInteraction: jest.fn()
+      onNavigationButtonPressed: jest.fn()
     };
 
     mockComponentRef = {
       componentDidAppear: jest.fn(),
       componentDidDisappear: jest.fn(),
-      onNavigationInteraction: jest.fn()
+      onNavigationButtonPressed: jest.fn()
     };
 
     store = new Store();
@@ -30,26 +30,26 @@ describe(`ComponentEventRegistry`, () => {
   it('register for lifecycle events on eventRegistry', () => {
     expect(eventRegistry.componentDidAppear).toHaveBeenCalledTimes(0);
     expect(eventRegistry.componentDidDisappear).toHaveBeenCalledTimes(0);
-    expect(eventRegistry.onNavigationInteraction).toHaveBeenCalledTimes(0);
+    expect(eventRegistry.onNavigationButtonPressed).toHaveBeenCalledTimes(0);
     uut.registerForAllComponents();
     expect(eventRegistry.componentDidAppear).toHaveBeenCalledTimes(1);
     expect(eventRegistry.componentDidDisappear).toHaveBeenCalledTimes(1);
-    expect(eventRegistry.onNavigationInteraction).toHaveBeenCalledTimes(1);
+    expect(eventRegistry.onNavigationButtonPressed).toHaveBeenCalledTimes(1);
   });
 
   it('bubbles lifecycle to component from store', () => {
     const params = {};
     expect(mockComponentRef.componentDidAppear).toHaveBeenCalledTimes(0);
     expect(mockComponentRef.componentDidDisappear).toHaveBeenCalledTimes(0);
-    expect(mockComponentRef.onNavigationInteraction).toHaveBeenCalledTimes(0);
+    expect(mockComponentRef.onNavigationButtonPressed).toHaveBeenCalledTimes(0);
     uut.registerForAllComponents();
     eventRegistry.componentDidAppear.mock.calls[0][0](refId);
     eventRegistry.componentDidDisappear.mock.calls[0][0](refId);
-    eventRegistry.onNavigationInteraction.mock.calls[0][0](refId, params);
+    eventRegistry.onNavigationButtonPressed.mock.calls[0][0](refId, params);
     expect(mockComponentRef.componentDidAppear).toHaveBeenCalledTimes(1);
     expect(mockComponentRef.componentDidDisappear).toHaveBeenCalledTimes(1);
-    expect(mockComponentRef.onNavigationInteraction).toHaveBeenCalledTimes(1);
-    expect(mockComponentRef.onNavigationInteraction).toHaveBeenCalledWith(params);
+    expect(mockComponentRef.onNavigationButtonPressed).toHaveBeenCalledTimes(1);
+    expect(mockComponentRef.onNavigationButtonPressed).toHaveBeenCalledWith(params);
   });
 
   it('defensive unknown id', () => {
@@ -57,7 +57,7 @@ describe(`ComponentEventRegistry`, () => {
     expect(() => {
       eventRegistry.componentDidAppear.mock.calls[0][0]('bad id');
       eventRegistry.componentDidDisappear.mock.calls[0][0]('bad id');
-      eventRegistry.onNavigationInteraction.mock.calls[0][0]('bad id', {});
+      eventRegistry.onNavigationButtonPressed.mock.calls[0][0]('bad id', {});
     }).not.toThrow();
   });
 
@@ -67,7 +67,7 @@ describe(`ComponentEventRegistry`, () => {
     expect(() => {
       eventRegistry.componentDidAppear.mock.calls[0][0]('myId');
       eventRegistry.componentDidDisappear.mock.calls[0][0]('myId');
-      eventRegistry.onNavigationInteraction.mock.calls[0][0]('myId', {});
+      eventRegistry.onNavigationButtonPressed.mock.calls[0][0]('myId', {});
     }).not.toThrow();
   });
 });

lib/src/events/ComponentEventsRegistry.ts

@@ -5,13 +5,13 @@ export class ComponentEventsRegistry {
   constructor(private eventsRegistry: EventsRegistry, private store: Store) {
     this.componentDidAppear = this.componentDidAppear.bind(this);
     this.componentDidDisappear = this.componentDidDisappear.bind(this);
-    this.onNavigationInteraction = this.onNavigationInteraction.bind(this);
+    this.onNavigationButtonPressed = this.onNavigationButtonPressed.bind(this);
   }
 
   public registerForAllComponents(): void {
     this.eventsRegistry.componentDidAppear(this.componentDidAppear);
     this.eventsRegistry.componentDidDisappear(this.componentDidDisappear);
-    this.eventsRegistry.onNavigationInteraction(this.onNavigationInteraction);
+    this.eventsRegistry.onNavigationButtonPressed(this.onNavigationButtonPressed);
   }
 
   private componentDidAppear(componentId: string) {
@@ -28,10 +28,11 @@ export class ComponentEventsRegistry {
     }
   }
 
-  private onNavigationInteraction(componentId: string, params) {
+  private onNavigationButtonPressed(componentId: string, buttonId: string) {
+    console.log(componentId, buttonId); //tslint:disable-line
     const componentRef = this.store.getRefForId(componentId);
-    if (componentRef && componentRef.onNavigationInteraction) {
-      componentRef.onNavigationInteraction(params);
+    if (componentRef && componentRef.onNavigationButtonPressed) {
+      componentRef.onNavigationButtonPressed(buttonId);
     }
   }
 }

lib/src/events/EventsRegistry.test.ts

@@ -46,15 +46,15 @@ describe('EventsRegistry', () => {
     expect(mockNativeEventsReceiver.registerComponentDidDisappear).toHaveBeenCalledWith(cb);
   });
 
-  it('exposes onNavigationInteraction event', () => {
+  it('exposes onNavigationButtonPressed event', () => {
     const subscription = {};
     const cb = jest.fn();
-    mockNativeEventsReceiver.registerOnNavigationInteraction.mockReturnValueOnce(subscription);
+    mockNativeEventsReceiver.registerOnNavigationButtonPressed.mockReturnValueOnce(subscription);
 
-    const result = uut.onNavigationInteraction(cb);
+    const result = uut.onNavigationButtonPressed(cb);
 
     expect(result).toBe(subscription);
-    expect(mockNativeEventsReceiver.registerOnNavigationInteraction).toHaveBeenCalledTimes(1);
-    expect(mockNativeEventsReceiver.registerOnNavigationInteraction).toHaveBeenCalledWith(cb);
+    expect(mockNativeEventsReceiver.registerOnNavigationButtonPressed).toHaveBeenCalledTimes(1);
+    expect(mockNativeEventsReceiver.registerOnNavigationButtonPressed).toHaveBeenCalledWith(cb);
   });
 });

lib/src/events/EventsRegistry.ts

@@ -19,7 +19,7 @@ export class EventsRegistry {
     return this.nativeEventsReceiver.registerComponentDidDisappear(callback);
   }
 
-  public onNavigationInteraction(callback: (componentId: string, params) => void): EventSubscription {
-    return this.nativeEventsReceiver.registerOnNavigationInteraction(callback);
+  public onNavigationButtonPressed(callback: (componentId: string, buttonId: string) => void): EventSubscription {
+    return this.nativeEventsReceiver.registerOnNavigationButtonPressed(callback);
   }
 }

playground/src/app.js

@@ -22,7 +22,7 @@ if (Platform.OS === 'android') {
 
 function start() {
   registerScreens();
-  Navigation.events().appLaunched(() => {
+  Navigation.events().onAppLaunched(() => {
     Navigation.setDefaultOptions({
       _animations: {
         push: {
@@ -46,7 +46,7 @@ function start() {
             interpolation: 'decelerate',
           }
         },
-        pop : {
+        pop: {
           rotationY: {
             from: 0,
             to: -360,

playground/src/screens/LifecycleScreen.js

@@ -15,11 +15,11 @@ class LifecycleScreen extends Component {
     };
   }
 
-  didAppear() {
+  componentDidAppear() {
     this.setState({ text: 'didAppear' });
   }
 
-  didDisappear() {
+  componentDidDisappear() {
     alert('didDisappear'); // eslint-disable-line no-alert
   }
 

playground/src/screens/StaticLifecycleOverlay.js

@@ -10,9 +10,14 @@ class StaticLifecycleOverlay extends Component {
       text: 'nothing yet',
       events: []
     };
-    Navigation.events().componentLifecycle(({ event, componentName, componentId }) => {
+    Navigation.events().componentDidAppear((componentId, componentName) => {
       this.setState({
-        events: [...this.state.events, { event, componentName, componentId }]
+        events: [...this.state.events, { event: 'componentDidAppear', componentId, componentName }]
+      });
+    });
+    Navigation.events().componentDidDisappear((componentId, componentName) => {
+      this.setState({
+        events: [...this.state.events, { event: 'componentDidDisappear', componentId, componentName }]
       });
     });
   }