Add missing typescript interfaces (#6203)

* Add missing typescript interfaces

* Fix tsconfig

* Fix ts imports

* Remove NavigationListener

* Add Navigation.events().registerComponentListener()

* Avoid breaking changes in typescript

* Export NavigationComponentProps

lib/src/events/ComponentEventsObserver.test.tsx

@@ -221,6 +221,20 @@ describe('ComponentEventsObserver', () => {
     expect(willUnmountFn).toHaveBeenCalledTimes(1);
   });
 
+  it(`registerComponentListener accepts listener object`, () => {
+    const tree = renderer.create(<UnboundScreen />);
+    const didAppearListenerFn = jest.fn();
+    uut.registerComponentListener({
+      componentDidAppear: didAppearListenerFn
+    }, 'myCompId')
+
+    expect(tree.toJSON()).toBeDefined();
+    expect(didAppearListenerFn).not.toHaveBeenCalled();
+
+    uut.notifyComponentDidAppear({ componentId: 'myCompId', componentName: 'doesnt matter', componentType: 'Component' });
+    expect(didAppearListenerFn).toHaveBeenCalledTimes(1);
+  });
+
   it(`componentDidAppear should receive component props from store`, () => {
     const event = {
       componentId: 'myCompId',

lib/src/events/ComponentEventsObserver.ts

@@ -18,8 +18,9 @@ import {
 } from '../interfaces/ComponentEvents';
 import { NativeEventsReceiver } from '../adapters/NativeEventsReceiver';
 import { Store } from '../components/Store';
+import { NavigationComponentListener } from 'react-native-navigation/interfaces/NavigationComponentListener'
 
-type ReactComponentWithIndexing = React.Component<any> & Record<string, any>;
+type ReactComponentWithIndexing = NavigationComponentListener & Record<string, any>;
 
 export class ComponentEventsObserver {
   private listeners: Record<string, Record<string, ReactComponentWithIndexing>> = {};
@@ -60,13 +61,21 @@ export class ComponentEventsObserver {
     if (!isString(computedComponentId)) {
       throw new Error(`bindComponent expects a component with a componentId in props or a componentId as the second argument`);
     }
-    if (isNil(this.listeners[computedComponentId])) {
-      this.listeners[computedComponentId] = {};
+    
+    return this.registerComponentListener(component as NavigationComponentListener, computedComponentId);
+  }
+
+  public registerComponentListener(listener: NavigationComponentListener, componentId: string): EventSubscription {
+    if (!isString(componentId)) {
+      throw new Error(`registerComponentListener expects a componentId as the second argument`);
+    }
+    if (isNil(this.listeners[componentId])) {
+      this.listeners[componentId] = {};
     }
     const key = uniqueId();
-    this.listeners[computedComponentId][key] = component;
+    this.listeners[componentId][key] = listener;
 
-    return { remove: () => unset(this.listeners[computedComponentId], key) };
+    return { remove: () => unset(this.listeners[componentId], key) };
   }
 
   public unmounted(componentId: string) {

lib/src/events/EventsRegistry.test.tsx

@@ -2,6 +2,8 @@ import { EventsRegistry } from './EventsRegistry';
 import { NativeEventsReceiver } from '../adapters/NativeEventsReceiver.mock';
 import { CommandsObserver } from './CommandsObserver';
 import { UniqueIdProvider } from '../adapters/UniqueIdProvider';
+import { NavigationComponent } from '../interfaces/NavigationComponent';
+import { NavigationComponentListener } from 'react-native-navigation/interfaces/NavigationComponentListener';
 
 describe('EventsRegistry', () => {
   let uut: EventsRegistry;
@@ -117,7 +119,14 @@ describe('EventsRegistry', () => {
     const subscription = {};
     mockScreenEventsRegistry.bindComponent = jest.fn();
     mockScreenEventsRegistry.bindComponent.mockReturnValueOnce(subscription);
-    expect(uut.bindComponent({} as React.Component<any>)).toEqual(subscription);
+    expect(uut.bindComponent({} as NavigationComponent<any>)).toEqual(subscription);
+  });
+
+  it(`delegates registerComponentListener to ComponentObserver`, () => {
+    const subscription = {};
+    mockScreenEventsRegistry.registerComponentListener = jest.fn();
+    mockScreenEventsRegistry.registerComponentListener.mockReturnValueOnce(subscription);
+    expect(uut.registerComponentListener({} as NavigationComponentListener, 'componentId')).toEqual(subscription);
   });
 
   it('delegates screenPopped to nativeEventsReceiver', () => {

lib/src/events/EventsRegistry.ts

@@ -21,6 +21,7 @@ import {
   BottomTabLongPressedEvent,
   BottomTabPressedEvent
 } from '../interfaces/Events';
+import { NavigationComponentListener } from 'react-native-navigation/interfaces/NavigationComponentListener';
 
 export class EventsRegistry {
   constructor(
@@ -134,6 +135,13 @@ export class EventsRegistry {
     return this.componentEventsObserver.bindComponent(component, componentId);
   }
 
+  public registerComponentListener(
+    listener: NavigationComponentListener,
+    componentId: string
+  ): EventSubscription {
+    return this.componentEventsObserver.registerComponentListener(listener, componentId);
+  }
+
   public registerScreenPoppedListener(
     callback: (event: ScreenPoppedEvent) => void
   ): EmitterSubscription {

lib/src/index.ts

@@ -9,3 +9,5 @@ export * from './interfaces/Events';
 export * from './interfaces/EventSubscription';
 export * from './interfaces/Layout';
 export * from './interfaces/Options';
+export * from './interfaces/NavigationComponent';
+export * from './interfaces/NavigationComponentProps';

lib/src/interfaces/NavigationComponent.ts

@@ -0,0 +1,26 @@
+import React from 'react';
+import {
+  NavigationButtonPressedEvent,
+  ModalDismissedEvent,
+  ModalAttemptedToDismissEvent,
+  SearchBarUpdatedEvent,
+  SearchBarCancelPressedEvent,
+  PreviewCompletedEvent,
+  ScreenPoppedEvent,
+  ComponentDidAppearEvent,
+  ComponentDidDisappearEvent,
+} from './ComponentEvents';
+import { NavigationComponentProps } from './NavigationComponentProps';
+
+export class NavigationComponent<Props = {}, State = {}, Snapshot = any>
+  extends React.Component<Props & NavigationComponentProps, State, Snapshot> {
+    componentDidAppear(_event: ComponentDidAppearEvent) {}
+    componentDidDisappear(_event: ComponentDidDisappearEvent) {}
+    navigationButtonPressed(_event: NavigationButtonPressedEvent) {}
+    modalDismissed(_event: ModalDismissedEvent) {}
+    modalAttemptedToDismiss(_event: ModalAttemptedToDismissEvent) {}
+    searchBarUpdated(_event: SearchBarUpdatedEvent) {}
+    searchBarCancelPressed(_event: SearchBarCancelPressedEvent) {}
+    previewCompleted(_event: PreviewCompletedEvent) {}
+    screenPopped(_event: ScreenPoppedEvent) {}
+  }

lib/src/interfaces/NavigationComponentListener.ts

@@ -0,0 +1,23 @@
+import {
+  NavigationButtonPressedEvent,
+  ModalDismissedEvent,
+  ModalAttemptedToDismissEvent,
+  SearchBarUpdatedEvent,
+  SearchBarCancelPressedEvent,
+  PreviewCompletedEvent,
+  ScreenPoppedEvent,
+  ComponentDidAppearEvent,
+  ComponentDidDisappearEvent,
+} from './ComponentEvents';
+
+export interface NavigationComponentListener {
+    componentDidAppear? : (_event: ComponentDidAppearEvent) => void
+    componentDidDisappear? : (_event: ComponentDidDisappearEvent) => void
+    navigationButtonPressed? : (_event: NavigationButtonPressedEvent) => void
+    modalDismissed? : (_event: ModalDismissedEvent) => void
+    modalAttemptedToDismiss? : (_event: ModalAttemptedToDismissEvent) => void
+    searchBarUpdated? : (_event: SearchBarUpdatedEvent) => void
+    searchBarCancelPressed? : (_event: SearchBarCancelPressedEvent) => void
+    previewCompleted? : (_event: PreviewCompletedEvent) => void
+    screenPopped? : (_event: ScreenPoppedEvent) => void
+  }

lib/src/interfaces/NavigationComponentProps.ts

@@ -0,0 +1,3 @@
+export interface NavigationComponentProps {
+  componentId: string;
+}

playground/src/screens/index.js

@@ -11,8 +11,8 @@ const Screens = require('./Screens');
 function registerScreens() {
   Navigation.registerComponent(Screens.Alert, () => require('./Alert'));
   Navigation.registerComponent(Screens.CocktailDetailsScreen, () => require('./sharedElementTransition/CocktailDetailsScreen'));
-  Navigation.registerComponent(Screens.CocktailsListScreen, () => require('./sharedElementTransition/CocktailsListScreen'));
-  Navigation.registerComponent(Screens.CocktailsListMasterScreen, () => require('./splitView/CocktailsListMasterScreen'));
+  Navigation.registerComponent(Screens.CocktailsListScreen, () => require('./sharedElementTransition/CocktailsListScreen').default);
+  Navigation.registerComponent(Screens.CocktailsListMasterScreen, () => require('./splitView/CocktailsListMasterScreen').default);
   Navigation.registerComponent(Screens.EventsOverlay, () => require('./StaticLifecycleOverlay').StaticLifecycleOverlay);
   Navigation.registerComponent(Screens.EventsScreen, () => require('./StaticEventsScreen'));
   Navigation.registerComponent(Screens.ExternalComponent, () => require('./ExternalComponentScreen'));

playground/src/screens/sharedElementTransition/CocktailsListScreen.js → playground/src/screens/sharedElementTransition/CocktailsListScreen.tsx

@@ -1,5 +1,5 @@
 const React = require('react');
-const { Component } = require('react');
+import { NavigationComponent } from 'react-native-navigation';
 const CocktailsView = require('./CocktailsView')
 const { Platform } = require('react-native');
 const Navigation = require('../../services/Navigation');
@@ -8,7 +8,7 @@ const MULTIPLIER = 1.15
 const LONG_DURATION = 350 * MULTIPLIER
 const SHORT_DURATION = 190 * MULTIPLIER
 
-class CocktailsListScreen extends Component {
+export default class CocktailsListScreen extends NavigationComponent {
   static options() {
     return {
       ...Platform.select({
@@ -35,11 +35,11 @@ class CocktailsListScreen extends Component {
     );
   }
 
-  update = (item) => {
+  update = (item: any) => {
     Navigation.updateProps('DETAILS_COMPONENT_ID', item);
   }
 
-  pushCocktailDetails = (item) => {
+  pushCocktailDetails = (item: any) => {
     Navigation.push(
       this,
       {
@@ -94,4 +94,4 @@ class CocktailsListScreen extends Component {
     )
   }
 }
-module.exports = CocktailsListScreen;
+

playground/src/screens/splitView/CocktailsListMasterScreen.js → playground/src/screens/splitView/CocktailsListMasterScreen.tsx

@@ -3,12 +3,14 @@ const CocktailsView = require('../sharedElementTransition/CocktailsView')
 const { Platform } = require('react-native');
 const Navigation = require('../../services/Navigation');
 const Screens = require('../Screens');
-const CocktailsListScreen = require('../sharedElementTransition/CocktailsListScreen');
+import CocktailsListScreen from '../sharedElementTransition/CocktailsListScreen';
+import { NavigationButtonPressedEvent } from 'react-native-navigation';
+
 const {
   PUSH_MASTER_BTN
 } = require('../../testIDs');
 
-class CocktailsListMasterScreen extends CocktailsListScreen {
+export default class CocktailsListMasterScreen extends CocktailsListScreen {
   static options() {
     return {
       ...Platform.select({
@@ -32,13 +34,13 @@ class CocktailsListMasterScreen extends CocktailsListScreen {
     }
   }
 
-  constructor(props) {
+  constructor(props: any) {
     super(props);
     Navigation.events().bindComponent(this);
   }
 
-  navigationButtonPressed({buttonId}) {
-    if (buttonId === 'pushMaster') {
+  navigationButtonPressed(event: NavigationButtonPressedEvent) {
+    if (event.buttonId === 'pushMaster') {
       Navigation.push(this, Screens.Pushed)
     }
   }
@@ -52,9 +54,7 @@ class CocktailsListMasterScreen extends CocktailsListScreen {
     );
   }
 
-  updateDetailsScreen = (item) => {
+  updateDetailsScreen = (item: any) => {
     Navigation.updateProps('DETAILS_COMPONENT_ID', item);
   }
 }
-
-module.exports = CocktailsListMasterScreen;

scripts/build.js

@@ -7,8 +7,8 @@ run();
 function run() {
     if (isWindows) {
         exec.execSync(`del /F /S /Q lib\\dist`);
-        exec.execSync(`tsc`);
+        exec.execSync(`tsc --project tsconfig.build.json`);
     } else {
-        exec.execSync(`rm -rf ./lib/dist && tsc`);
+        exec.execSync(`rm -rf ./lib/dist && tsc --project tsconfig.build.json`);
     }
 }

scripts/start-windows.js

@@ -5,7 +5,7 @@ run();
 function run() {
   // exec.killPort(8081);
   // exec.execSync(`rd "./lib/dist" /Q/S`);
-  exec.execSync(`"./node_modules/.bin/tsc"`);
+  exec.execSync(`"./node_modules/.bin/tsc --project tsconfig.build.json"`);
   exec.execSync(`adb reverse tcp:8081 tcp:8081`);
   exec.execSync(`node ./node_modules/react-native/local-cli/cli.js start`);
 }

scripts/watch.js

@@ -7,8 +7,8 @@ run();
 function run() {
     if (isWindows) {
         exec.execSync(`del /F /S /Q lib\\dist`);
-        exec.execSync(`tsc --watch`);
+        exec.execSync(`tsc --project tsconfig.build.json --watch`);
     } else {
-        exec.execSync(`rm -rf ./lib/dist && tsc --watch`);
+        exec.execSync(`rm -rf ./lib/dist && tsc --project tsconfig.build.json --watch`);
     }
 }

tsconfig.build.json

@@ -0,0 +1,6 @@
+{
+  "extends": "./tsconfig.json",
+  "exclude": [
+    "./playground/**/*"
+  ]
+}

tsconfig.json

@@ -15,9 +15,15 @@
       "react",
       "react-native",
       "react-test-renderer"
-    ]
+    ],
+    "baseUrl": ".",
+    "paths": {
+      "react-native-navigation": ["lib/src/"],
+      "react-native-navigation/*": ["lib/src/*"]
+    }
   },
   "include": [
-    "./lib/src/**/*"
+    "./lib/src/**/*",
+    "./playground/**/*"
   ]
 }