[BREAKING] Event registry rework (#3497)

[BREAKING] Call Navigation.events().bindComponent(this) to listen to lifecycle events

This commit introduces breaking changes to the way components listen to RNN events.


Background

Up until now, components could handle navigation events by implemented a set of callbacks:
* componentDidAppear
* componentDidDisappear
* onNavigationButtonPressed
* onSearchBarUpdated
* onSearchBarCancelPressed

While this worked fine for the most part, this was completely broken for HOCs as RNN invoked these methods only on the registered component (top most HOC), leaving it to the user to propagate these events down the HOC chain. See the discussion in #1642 for more details.


Solution

In order to support HOC use case, we're introducing a new api which will let any Component bind itself to receive navigation events:

```js
class LifecycleScreen extends Component {
  constructor(props) {
    super(props);
    this.subscription = Navigation.events().bindComponent(this);
  }

  componentWillUnmount() {
    // The subscription is removed automatically when components unmount, but they can be explicitly removed as well by calling `this.subscription.remove(); `
  }
}
```

It's still the users responsibility to propagate the `componentId` down the HOC chain, but by binding a component to RNN, it will be able to handle events as expected. Multiple components can be bound for the same `componentId`.


Consolidate event names

* onNavigationButtonPressed -> navigationButtonPressed
* onSearchBarUpdated -> searchBarUpdated
* onSearchBarCancelPressed -> searchBarCancelPressed

docs/api/Commands.md

@@ -4,7 +4,7 @@
 
 `setRoot(simpleApi: any): any`
 
-[source](https://github.com/wix/react-native-navigation/blob/v2/lib/src/commands/Commands.ts#L13)
+[source](https://github.com/wix/react-native-navigation/blob/v2/lib/src/commands/Commands.ts#L15)
 
 ---
 
@@ -12,7 +12,7 @@
 
 `setDefaultOptions(options: any): void`
 
-[source](https://github.com/wix/react-native-navigation/blob/v2/lib/src/commands/Commands.ts#L23)
+[source](https://github.com/wix/react-native-navigation/blob/v2/lib/src/commands/Commands.ts#L38)
 
 ---
 
@@ -20,7 +20,7 @@
 
 `mergeOptions(componentId: any, options: any): void`
 
-[source](https://github.com/wix/react-native-navigation/blob/v2/lib/src/commands/Commands.ts#L31)
+[source](https://github.com/wix/react-native-navigation/blob/v2/lib/src/commands/Commands.ts#L46)
 
 ---
 
@@ -28,7 +28,7 @@
 
 `showModal(simpleApi: any): any`
 
-[source](https://github.com/wix/react-native-navigation/blob/v2/lib/src/commands/Commands.ts#L39)
+[source](https://github.com/wix/react-native-navigation/blob/v2/lib/src/commands/Commands.ts#L54)
 
 ---
 
@@ -36,7 +36,7 @@
 
 `dismissModal(componentId: any): any`
 
-[source](https://github.com/wix/react-native-navigation/blob/v2/lib/src/commands/Commands.ts#L49)
+[source](https://github.com/wix/react-native-navigation/blob/v2/lib/src/commands/Commands.ts#L65)
 
 ---
 
@@ -44,7 +44,7 @@
 
 `dismissAllModals(): any`
 
-[source](https://github.com/wix/react-native-navigation/blob/v2/lib/src/commands/Commands.ts#L55)
+[source](https://github.com/wix/react-native-navigation/blob/v2/lib/src/commands/Commands.ts#L72)
 
 ---
 
@@ -52,7 +52,7 @@
 
 `push(componentId: any, simpleApi: any): any`
 
-[source](https://github.com/wix/react-native-navigation/blob/v2/lib/src/commands/Commands.ts#L61)
+[source](https://github.com/wix/react-native-navigation/blob/v2/lib/src/commands/Commands.ts#L79)
 
 ---
 
@@ -60,7 +60,7 @@
 
 `pop(componentId: any, options: any): any`
 
-[source](https://github.com/wix/react-native-navigation/blob/v2/lib/src/commands/Commands.ts#L72)
+[source](https://github.com/wix/react-native-navigation/blob/v2/lib/src/commands/Commands.ts#L91)
 
 ---
 
@@ -68,7 +68,7 @@
 
 `popTo(componentId: any): any`
 
-[source](https://github.com/wix/react-native-navigation/blob/v2/lib/src/commands/Commands.ts#L78)
+[source](https://github.com/wix/react-native-navigation/blob/v2/lib/src/commands/Commands.ts#L98)
 
 ---
 
@@ -76,7 +76,7 @@
 
 `popToRoot(componentId: any): any`
 
-[source](https://github.com/wix/react-native-navigation/blob/v2/lib/src/commands/Commands.ts#L84)
+[source](https://github.com/wix/react-native-navigation/blob/v2/lib/src/commands/Commands.ts#L105)
 
 ---
 
@@ -84,7 +84,7 @@
 
 `setStackRoot(componentId: any, simpleApi: any): any`
 
-[source](https://github.com/wix/react-native-navigation/blob/v2/lib/src/commands/Commands.ts#L90)
+[source](https://github.com/wix/react-native-navigation/blob/v2/lib/src/commands/Commands.ts#L112)
 
 ---
 
@@ -92,7 +92,7 @@
 
 `showOverlay(simpleApi: any): any`
 
-[source](https://github.com/wix/react-native-navigation/blob/v2/lib/src/commands/Commands.ts#L101)
+[source](https://github.com/wix/react-native-navigation/blob/v2/lib/src/commands/Commands.ts#L124)
 
 ---
 
@@ -100,7 +100,15 @@
 
 `dismissOverlay(componentId: any): any`
 
-[source](https://github.com/wix/react-native-navigation/blob/v2/lib/src/commands/Commands.ts#L112)
+[source](https://github.com/wix/react-native-navigation/blob/v2/lib/src/commands/Commands.ts#L136)
+
+---
+
+## getLaunchArgs
+
+`getLaunchArgs(): any`
+
+[source](https://github.com/wix/react-native-navigation/blob/v2/lib/src/commands/Commands.ts#L143)
 
 ---
 

docs/api/ComponentEventsObserver.md

@@ -1,10 +1,58 @@
 # ComponentEventsObserver
 
-## registerForAllComponents
+## registerOnceForAllComponentEvents
 
-`registerForAllComponents(): void`
+`registerOnceForAllComponentEvents(): void`
 
-[source](https://github.com/wix/react-native-navigation/blob/v2/lib/src/events/ComponentEventsObserver.ts#L13)
+[source](https://github.com/wix/react-native-navigation/blob/v2/lib/src/events/ComponentEventsObserver.ts#L25)
+
+---
+
+## bindComponent
+
+`bindComponent(component: Component<any>): EventSubscription`
+
+[source](https://github.com/wix/react-native-navigation/blob/v2/lib/src/events/ComponentEventsObserver.ts#L35)
+
+---
+
+## notifyComponentDidAppear
+
+`notifyComponentDidAppear(event: ComponentDidAppearEvent): void`
+
+[source](https://github.com/wix/react-native-navigation/blob/v2/lib/src/events/ComponentEventsObserver.ts#L46)
+
+---
+
+## notifyComponentDidDisappear
+
+`notifyComponentDidDisappear(event: ComponentDidDisappearEvent): void`
+
+[source](https://github.com/wix/react-native-navigation/blob/v2/lib/src/events/ComponentEventsObserver.ts#L50)
+
+---
+
+## notifyNavigationButtonPressed
+
+`notifyNavigationButtonPressed(event: NavigationButtonPressedEvent): void`
+
+[source](https://github.com/wix/react-native-navigation/blob/v2/lib/src/events/ComponentEventsObserver.ts#L54)
+
+---
+
+## notifySearchBarUpdated
+
+`notifySearchBarUpdated(event: SearchBarUpdatedEvent): void`
+
+[source](https://github.com/wix/react-native-navigation/blob/v2/lib/src/events/ComponentEventsObserver.ts#L58)
+
+---
+
+## notifySearchBarCancelPressed
+
+`notifySearchBarCancelPressed(event: SearchBarCancelPressedEvent): void`
+
+[source](https://github.com/wix/react-native-navigation/blob/v2/lib/src/events/ComponentEventsObserver.ts#L62)
 
 ---
 

docs/api/ComponentRegistry.md

@@ -2,9 +2,9 @@
 
 ## registerComponent
 
-`registerComponent(componentName: string, getComponentClassFunc: ComponentProvider): void`
+`registerComponent(componentName: string, getComponentClassFunc: ComponentProvider): ComponentType<any>`
 
-[source](https://github.com/wix/react-native-navigation/blob/v2/lib/src/components/ComponentRegistry.ts#L11)
+[source](https://github.com/wix/react-native-navigation/blob/v2/lib/src/components/ComponentRegistry.ts#L12)
 
 ---
 

docs/api/Constants.md

@@ -0,0 +1,32 @@
+# Constants
+
+## backButtonId
+
+`backButtonId (string)`
+
+---
+## bottomTabsHeight
+
+`bottomTabsHeight (number)`
+
+---
+## statusBarHeight
+
+`statusBarHeight (number)`
+
+---
+## topBarHeight
+
+`topBarHeight (number)`
+
+---
+
+## get
+
+`get(): Promise<any>`
+
+[source](https://github.com/wix/react-native-navigation/blob/v2/lib/src/adapters/Constants.ts#L4)
+
+---
+
+

docs/api/Element.md

@@ -29,150 +29,4 @@
 
 ---
 
-## setState
-
-`setState(state: function | S | object, callback: function): void`
-
-[source](https://github.com/wix/react-native-navigation/blob/v2/lib/src//Users/danielzlotin/dev/react-native-navigation/node_modules/@types/react/index.d.ts#L287)
-
----
-
-## forceUpdate
-
-`forceUpdate(callBack: function): void`
-
-[source](https://github.com/wix/react-native-navigation/blob/v2/lib/src//Users/danielzlotin/dev/react-native-navigation/node_modules/@types/react/index.d.ts#L292)
-
----
-
-## componentDidMount
-
-`componentDidMount(): void`
-
-[source](https://github.com/wix/react-native-navigation/blob/v2/lib/src//Users/danielzlotin/dev/react-native-navigation/node_modules/@types/react/index.d.ts#L376)
-
-Called immediately after a compoment is mounted. Setting state here will trigger re-rendering.
-
----
-
-## shouldComponentUpdate
-
-`shouldComponentUpdate(nextProps: Readonly<object>, nextState: Readonly<any>, nextContext: any): boolean`
-
-[source](https://github.com/wix/react-native-navigation/blob/v2/lib/src//Users/danielzlotin/dev/react-native-navigation/node_modules/@types/react/index.d.ts#L387)
-
-Called to determine whether the change in props and state should trigger a re-render.
-
----
-
-## componentWillUnmount
-
-`componentWillUnmount(): void`
-
-[source](https://github.com/wix/react-native-navigation/blob/v2/lib/src//Users/danielzlotin/dev/react-native-navigation/node_modules/@types/react/index.d.ts#L392)
-
-Called immediately before a component is destroyed. Perform any necessary cleanup in this method, such as
-cancelled network requests, or cleaning up any DOM elements created in `componentDidMount`.
-
----
-
-## componentDidCatch
-
-`componentDidCatch(error: Error, errorInfo: ErrorInfo): void`
-
-[source](https://github.com/wix/react-native-navigation/blob/v2/lib/src//Users/danielzlotin/dev/react-native-navigation/node_modules/@types/react/index.d.ts#L397)
-
-Catches exceptions generated in descendant components. Unhandled exceptions will cause
-the entire component tree to unmount.
-
----
-
-## getSnapshotBeforeUpdate
-
-`getSnapshotBeforeUpdate(prevProps: Readonly<object>, prevState: Readonly<any>): SS | null`
-
-[source](https://github.com/wix/react-native-navigation/blob/v2/lib/src//Users/danielzlotin/dev/react-native-navigation/node_modules/@types/react/index.d.ts#L423)
-
-Runs before React applies the result of `render` to the document, and
-returns an object to be given to componentDidUpdate. Useful for saving
-things such as scroll position before `render` causes changes to it.
-
----
-
-## componentDidUpdate
-
-`componentDidUpdate(prevProps: Readonly<object>, prevState: Readonly<any>, snapshot: SS): void`
-
-[source](https://github.com/wix/react-native-navigation/blob/v2/lib/src//Users/danielzlotin/dev/react-native-navigation/node_modules/@types/react/index.d.ts#L429)
-
-Called immediately after updating occurs. Not called for the initial render.
-
----
-
-## componentWillMount
-
-`componentWillMount(): void`
-
-[source](https://github.com/wix/react-native-navigation/blob/v2/lib/src//Users/danielzlotin/dev/react-native-navigation/node_modules/@types/react/index.d.ts#L444)
-
-Called immediately before mounting occurs, and before `Component#render`.
-Avoid introducing any side-effects or subscriptions in this method.
-
----
-
-## UNSAFE_componentWillMount
-
-`UNSAFE_componentWillMount(): void`
-
-[source](https://github.com/wix/react-native-navigation/blob/v2/lib/src//Users/danielzlotin/dev/react-native-navigation/node_modules/@types/react/index.d.ts#L458)
-
-Called immediately before mounting occurs, and before `Component#render`.
-Avoid introducing any side-effects or subscriptions in this method.
-
----
-
-## componentWillReceiveProps
-
-`componentWillReceiveProps(nextProps: Readonly<object>, nextContext: any): void`
-
-[source](https://github.com/wix/react-native-navigation/blob/v2/lib/src//Users/danielzlotin/dev/react-native-navigation/node_modules/@types/react/index.d.ts#L473)
-
-Called when the component may be receiving new props.
-React may call this even if props have not changed, so be sure to compare new and existing
-props if you only want to handle changes.
-
----
-
-## UNSAFE_componentWillReceiveProps
-
-`UNSAFE_componentWillReceiveProps(nextProps: Readonly<object>, nextContext: any): void`
-
-[source](https://github.com/wix/react-native-navigation/blob/v2/lib/src//Users/danielzlotin/dev/react-native-navigation/node_modules/@types/react/index.d.ts#L490)
-
-Called when the component may be receiving new props.
-React may call this even if props have not changed, so be sure to compare new and existing
-props if you only want to handle changes.
-
----
-
-## componentWillUpdate
-
-`componentWillUpdate(nextProps: Readonly<object>, nextState: Readonly<any>, nextContext: any): void`
-
-[source](https://github.com/wix/react-native-navigation/blob/v2/lib/src//Users/danielzlotin/dev/react-native-navigation/node_modules/@types/react/index.d.ts#L503)
-
-Called immediately before rendering when new props or state is received. Not called for the initial render.
-
----
-
-## UNSAFE_componentWillUpdate
-
-`UNSAFE_componentWillUpdate(nextProps: Readonly<object>, nextState: Readonly<any>, nextContext: any): void`
-
-[source](https://github.com/wix/react-native-navigation/blob/v2/lib/src//Users/danielzlotin/dev/react-native-navigation/node_modules/@types/react/index.d.ts#L518)
-
-Called immediately before rendering when new props or state is received. Not called for the initial render.
-
----
-
 

docs/api/EventsRegistry.md

@@ -4,7 +4,7 @@
 
 `registerAppLaunchedListener(callback: function): EventSubscription`
 
-[source](https://github.com/wix/react-native-navigation/blob/v2/lib/src/events/EventsRegistry.ts#L8)
+[source](https://github.com/wix/react-native-navigation/blob/v2/lib/src/events/EventsRegistry.ts#L17)
 
 ---
 
@@ -12,7 +12,7 @@
 
 `registerComponentDidAppearListener(callback: function): EventSubscription`
 
-[source](https://github.com/wix/react-native-navigation/blob/v2/lib/src/events/EventsRegistry.ts#L12)
+[source](https://github.com/wix/react-native-navigation/blob/v2/lib/src/events/EventsRegistry.ts#L21)
 
 ---
 
@@ -20,31 +20,63 @@
 
 `registerComponentDidDisappearListener(callback: function): EventSubscription`
 
-[source](https://github.com/wix/react-native-navigation/blob/v2/lib/src/events/EventsRegistry.ts#L16)
+[source](https://github.com/wix/react-native-navigation/blob/v2/lib/src/events/EventsRegistry.ts#L25)
 
 ---
 
-## registerCommandListener
+## registerCommandCompletedListener
 
-`registerCommandListener(callback: function): EventSubscription`
+`registerCommandCompletedListener(callback: function): EventSubscription`
 
-[source](https://github.com/wix/react-native-navigation/blob/v2/lib/src/events/EventsRegistry.ts#L20)
+[source](https://github.com/wix/react-native-navigation/blob/v2/lib/src/events/EventsRegistry.ts#L29)
 
 ---
 
-## registerCommandCompletedListener
+## registerBottomTabSelectedListener
 
-`registerCommandCompletedListener(callback: function): EventSubscription`
+`registerBottomTabSelectedListener(callback: function): EventSubscription`
+
+[source](https://github.com/wix/react-native-navigation/blob/v2/lib/src/events/EventsRegistry.ts#L33)
+
+---
+
+## registerNavigationButtonPressedListener
+
+`registerNavigationButtonPressedListener(callback: function): EventSubscription`
+
+[source](https://github.com/wix/react-native-navigation/blob/v2/lib/src/events/EventsRegistry.ts#L37)
+
+---
+
+## registerSearchBarUpdatedListener
+
+`registerSearchBarUpdatedListener(callback: function): EventSubscription`
+
+[source](https://github.com/wix/react-native-navigation/blob/v2/lib/src/events/EventsRegistry.ts#L41)
+
+---
+
+## registerSearchBarCancelPressedListener
+
+`registerSearchBarCancelPressedListener(callback: function): EventSubscription`
+
+[source](https://github.com/wix/react-native-navigation/blob/v2/lib/src/events/EventsRegistry.ts#L45)
+
+---
+
+## registerCommandListener
+
+`registerCommandListener(callback: function): EventSubscription`
 
-[source](https://github.com/wix/react-native-navigation/blob/v2/lib/src/events/EventsRegistry.ts#L24)
+[source](https://github.com/wix/react-native-navigation/blob/v2/lib/src/events/EventsRegistry.ts#L49)
 
 ---
 
-## registerNativeEventListener
+## bindComponent
 
-`registerNativeEventListener(callback: function): EventSubscription`
+`bindComponent(component: Component<any>): EventSubscription`
 
-[source](https://github.com/wix/react-native-navigation/blob/v2/lib/src/events/EventsRegistry.ts#L28)
+[source](https://github.com/wix/react-native-navigation/blob/v2/lib/src/events/EventsRegistry.ts#L53)
 
 ---
 

docs/api/LayoutTreeParser.md

@@ -12,7 +12,7 @@
 
 `_topTabs(api: any): LayoutNode`
 
-[source](https://github.com/wix/react-native-navigation/blob/v2/lib/src/commands/LayoutTreeParser.ts#L27)
+[source](https://github.com/wix/react-native-navigation/blob/v2/lib/src/commands/LayoutTreeParser.ts#L29)
 
 ---
 
@@ -20,7 +20,7 @@
 
 `_sideMenu(api: any): LayoutNode`
 
-[source](https://github.com/wix/react-native-navigation/blob/v2/lib/src/commands/LayoutTreeParser.ts#L36)
+[source](https://github.com/wix/react-native-navigation/blob/v2/lib/src/commands/LayoutTreeParser.ts#L38)
 
 ---
 
@@ -28,7 +28,7 @@
 
 `_sideMenuChildren(api: any): LayoutNode[]`
 
-[source](https://github.com/wix/react-native-navigation/blob/v2/lib/src/commands/LayoutTreeParser.ts#L45)
+[source](https://github.com/wix/react-native-navigation/blob/v2/lib/src/commands/LayoutTreeParser.ts#L47)
 
 ---
 
@@ -36,7 +36,7 @@
 
 `_bottomTabs(api: any): LayoutNode`
 
-[source](https://github.com/wix/react-native-navigation/blob/v2/lib/src/commands/LayoutTreeParser.ts#L75)
+[source](https://github.com/wix/react-native-navigation/blob/v2/lib/src/commands/LayoutTreeParser.ts#L77)
 
 ---
 
@@ -44,7 +44,7 @@
 
 `_stack(api: any): LayoutNode`
 
-[source](https://github.com/wix/react-native-navigation/blob/v2/lib/src/commands/LayoutTreeParser.ts#L84)
+[source](https://github.com/wix/react-native-navigation/blob/v2/lib/src/commands/LayoutTreeParser.ts#L86)
 
 ---
 
@@ -52,7 +52,7 @@
 
 `_component(api: any): LayoutNode`
 
-[source](https://github.com/wix/react-native-navigation/blob/v2/lib/src/commands/LayoutTreeParser.ts#L93)
+[source](https://github.com/wix/react-native-navigation/blob/v2/lib/src/commands/LayoutTreeParser.ts#L95)
 
 ---
 
@@ -60,7 +60,15 @@
 
 `_externalComponent(api: any): LayoutNode`
 
-[source](https://github.com/wix/react-native-navigation/blob/v2/lib/src/commands/LayoutTreeParser.ts#L102)
+[source](https://github.com/wix/react-native-navigation/blob/v2/lib/src/commands/LayoutTreeParser.ts#L104)
+
+---
+
+## _splitView
+
+`_splitView(api: any): LayoutNode`
+
+[source](https://github.com/wix/react-native-navigation/blob/v2/lib/src/commands/LayoutTreeParser.ts#L113)
 
 ---
 

docs/api/LayoutType.md

@@ -7,5 +7,6 @@
 - SideMenuLeft
 - SideMenuRight
 - SideMenuRoot
+- SplitView
 - Stack
 - TopTabs

docs/api/NativeCommandsSender.md

@@ -2,7 +2,7 @@
 
 ## setRoot
 
-`setRoot(layoutTree: object): any`
+`setRoot(commandId: string, layout: object): any`
 
 [source](https://github.com/wix/react-native-navigation/blob/v2/lib/src/adapters/NativeCommandsSender.ts#L9)
 
@@ -26,7 +26,7 @@
 
 ## push
 
-`push(onComponentId: string, layout: object): any`
+`push(commandId: string, onComponentId: string, layout: object): any`
 
 [source](https://github.com/wix/react-native-navigation/blob/v2/lib/src/adapters/NativeCommandsSender.ts#L21)
 
@@ -34,7 +34,7 @@
 
 ## pop
 
-`pop(componentId: string, options: object): any`
+`pop(commandId: string, componentId: string, options: object): any`
 
 [source](https://github.com/wix/react-native-navigation/blob/v2/lib/src/adapters/NativeCommandsSender.ts#L25)
 
@@ -42,7 +42,7 @@
 
 ## popTo
 
-`popTo(componentId: string): any`
+`popTo(commandId: string, componentId: string): any`
 
 [source](https://github.com/wix/react-native-navigation/blob/v2/lib/src/adapters/NativeCommandsSender.ts#L29)
 
@@ -50,7 +50,7 @@
 
 ## popToRoot
 
-`popToRoot(componentId: string): any`
+`popToRoot(commandId: string, componentId: string): any`
 
 [source](https://github.com/wix/react-native-navigation/blob/v2/lib/src/adapters/NativeCommandsSender.ts#L33)
 
@@ -58,7 +58,7 @@
 
 ## setStackRoot
 
-`setStackRoot(onComponentId: string, layout: object): any`
+`setStackRoot(commandId: string, onComponentId: string, layout: object): any`
 
 [source](https://github.com/wix/react-native-navigation/blob/v2/lib/src/adapters/NativeCommandsSender.ts#L37)
 
@@ -66,7 +66,7 @@
 
 ## showModal
 
-`showModal(layout: object): any`
+`showModal(commandId: string, layout: object): any`
 
 [source](https://github.com/wix/react-native-navigation/blob/v2/lib/src/adapters/NativeCommandsSender.ts#L41)
 
@@ -74,7 +74,7 @@
 
 ## dismissModal
 
-`dismissModal(componentId: string): any`
+`dismissModal(commandId: string, componentId: string): any`
 
 [source](https://github.com/wix/react-native-navigation/blob/v2/lib/src/adapters/NativeCommandsSender.ts#L45)
 
@@ -82,7 +82,7 @@
 
 ## dismissAllModals
 
-`dismissAllModals(): any`
+`dismissAllModals(commandId: string): any`
 
 [source](https://github.com/wix/react-native-navigation/blob/v2/lib/src/adapters/NativeCommandsSender.ts#L49)
 
@@ -90,7 +90,7 @@
 
 ## showOverlay
 
-`showOverlay(layout: object): any`
+`showOverlay(commandId: string, layout: object): any`
 
 [source](https://github.com/wix/react-native-navigation/blob/v2/lib/src/adapters/NativeCommandsSender.ts#L53)
 
@@ -98,10 +98,18 @@
 
 ## dismissOverlay
 
-`dismissOverlay(componentId: string): any`
+`dismissOverlay(commandId: string, componentId: string): any`
 
 [source](https://github.com/wix/react-native-navigation/blob/v2/lib/src/adapters/NativeCommandsSender.ts#L57)
 
 ---
 
+## getLaunchArgs
+
+`getLaunchArgs(commandId: string): any`
+
+[source](https://github.com/wix/react-native-navigation/blob/v2/lib/src/adapters/NativeCommandsSender.ts#L61)
+
+---
+
 

docs/api/NativeEventsReceiver.md

@@ -4,7 +4,7 @@
 
 `registerAppLaunchedListener(callback: function): EventSubscription`
 
-[source](https://github.com/wix/react-native-navigation/blob/v2/lib/src/adapters/NativeEventsReceiver.ts#L10)
+[source](https://github.com/wix/react-native-navigation/blob/v2/lib/src/adapters/NativeEventsReceiver.ts#L28)
 
 ---
 
@@ -12,7 +12,7 @@
 
 `registerComponentDidAppearListener(callback: function): EventSubscription`
 
-[source](https://github.com/wix/react-native-navigation/blob/v2/lib/src/adapters/NativeEventsReceiver.ts#L14)
+[source](https://github.com/wix/react-native-navigation/blob/v2/lib/src/adapters/NativeEventsReceiver.ts#L32)
 
 ---
 
@@ -20,7 +20,31 @@
 
 `registerComponentDidDisappearListener(callback: function): EventSubscription`
 
-[source](https://github.com/wix/react-native-navigation/blob/v2/lib/src/adapters/NativeEventsReceiver.ts#L18)
+[source](https://github.com/wix/react-native-navigation/blob/v2/lib/src/adapters/NativeEventsReceiver.ts#L36)
+
+---
+
+## registerNavigationButtonPressedListener
+
+`registerNavigationButtonPressedListener(callback: function): EventSubscription`
+
+[source](https://github.com/wix/react-native-navigation/blob/v2/lib/src/adapters/NativeEventsReceiver.ts#L40)
+
+---
+
+## registerSearchBarUpdatedListener
+
+`registerSearchBarUpdatedListener(callback: function): EventSubscription`
+
+[source](https://github.com/wix/react-native-navigation/blob/v2/lib/src/adapters/NativeEventsReceiver.ts#L44)
+
+---
+
+## registerSearchBarCancelPressedListener
+
+`registerSearchBarCancelPressedListener(callback: function): EventSubscription`
+
+[source](https://github.com/wix/react-native-navigation/blob/v2/lib/src/adapters/NativeEventsReceiver.ts#L48)
 
 ---
 
@@ -28,15 +52,15 @@
 
 `registerCommandCompletedListener(callback: function): EventSubscription`
 
-[source](https://github.com/wix/react-native-navigation/blob/v2/lib/src/adapters/NativeEventsReceiver.ts#L22)
+[source](https://github.com/wix/react-native-navigation/blob/v2/lib/src/adapters/NativeEventsReceiver.ts#L52)
 
 ---
 
-## registerNativeEventListener
+## registerBottomTabSelectedListener
 
-`registerNativeEventListener(callback: function): EventSubscription`
+`registerBottomTabSelectedListener(callback: function): EventSubscription`
 
-[source](https://github.com/wix/react-native-navigation/blob/v2/lib/src/adapters/NativeEventsReceiver.ts#L26)
+[source](https://github.com/wix/react-native-navigation/blob/v2/lib/src/adapters/NativeEventsReceiver.ts#L56)
 
 ---
 

docs/api/Navigation.md

@@ -4,11 +4,16 @@
 
 `Element (React.ComponentType<object>)`
 
+---
+## store
+
+`store (Store)`
+
 ---
 
 ## registerComponent
 
-`registerComponent(componentName: string, getComponentClassFunc: ComponentProvider): React.ComponentType<any>`
+`registerComponent(componentName: string, getComponentClassFunc: ComponentProvider): ComponentType<any>`
 
 [source](https://github.com/wix/react-native-navigation/blob/v2/lib/src/Navigation.ts#L52)
 
@@ -147,14 +152,34 @@ dismiss overlay by componentId
 
 ---
 
+## getLaunchArgs
+
+`getLaunchArgs(): Promise<any>`
+
+[source](https://github.com/wix/react-native-navigation/blob/v2/lib/src/Navigation.ts#L150)
+
+Resolves arguments passed on launch
+
+---
+
 ## events
 
 `events(): EventsRegistry`
 
-[source](https://github.com/wix/react-native-navigation/blob/v2/lib/src/Navigation.ts#L150)
+[source](https://github.com/wix/react-native-navigation/blob/v2/lib/src/Navigation.ts#L157)
 
 Obtain the events registry instance
 
 ---
 
+## constants
+
+`constants(): Promise<any>`
+
+[source](https://github.com/wix/react-native-navigation/blob/v2/lib/src/Navigation.ts#L164)
+
+Constants coming from native
+
+---
+
 

docs/api/README.md

@@ -1,5 +1,6 @@
 - [Home](/)
 - [Navigation](/api/Navigation)
+- [Constants](/api/Constants)
 - [Element](/api/Element)
 - [NativeCommandsSender](/api/NativeCommandsSender)
 - [NativeEventsReceiver](/api/NativeEventsReceiver)

docs/api/Store.md

@@ -4,7 +4,7 @@
 
 `setPropsForId(componentId: string, props: any): void`
 
-[source](https://github.com/wix/react-native-navigation/blob/v2/lib/src/components/Store.ts#L8)
+[source](https://github.com/wix/react-native-navigation/blob/v2/lib/src/components/Store.ts#L7)
 
 ---
 
@@ -12,7 +12,7 @@
 
 `getPropsForId(componentId: string): any`
 
-[source](https://github.com/wix/react-native-navigation/blob/v2/lib/src/components/Store.ts#L12)
+[source](https://github.com/wix/react-native-navigation/blob/v2/lib/src/components/Store.ts#L11)
 
 ---
 
@@ -20,7 +20,7 @@
 
 `setOriginalComponentClassForName(componentName: string, ComponentClass: any): void`
 
-[source](https://github.com/wix/react-native-navigation/blob/v2/lib/src/components/Store.ts#L16)
+[source](https://github.com/wix/react-native-navigation/blob/v2/lib/src/components/Store.ts#L15)
 
 ---
 
@@ -28,23 +28,7 @@
 
 `getOriginalComponentClassForName(componentName: string): any`
 
-[source](https://github.com/wix/react-native-navigation/blob/v2/lib/src/components/Store.ts#L20)
-
----
-
-## setRefForId
-
-`setRefForId(id: string, ref: any): void`
-
-[source](https://github.com/wix/react-native-navigation/blob/v2/lib/src/components/Store.ts#L24)
-
----
-
-## getRefForId
-
-`getRefForId(id: string): any`
-
-[source](https://github.com/wix/react-native-navigation/blob/v2/lib/src/components/Store.ts#L28)
+[source](https://github.com/wix/react-native-navigation/blob/v2/lib/src/components/Store.ts#L19)
 
 ---
 
@@ -52,7 +36,7 @@
 
 `cleanId(id: string): void`
 
-[source](https://github.com/wix/react-native-navigation/blob/v2/lib/src/components/Store.ts#L32)
+[source](https://github.com/wix/react-native-navigation/blob/v2/lib/src/components/Store.ts#L23)
 
 ---
 

docs/api/_sidebar.md

@@ -1,5 +1,6 @@
 - [Home](/)
 - [Navigation](/api/Navigation)
+- [Constants](/api/Constants)
 - [Element](/api/Element)
 - [NativeCommandsSender](/api/NativeCommandsSender)
 - [NativeEventsReceiver](/api/NativeEventsReceiver)

docs/docs/events.md

@@ -103,12 +103,12 @@ This event is emitted whenever a TopBar button is pressed by the user
 |**name**|`buttonPressed`|
 |**params**|`componentId`: `componentId` of the layout element the pressed button is bound to<br>`buttonId`: `id` of the pressed button|
 
-## onNavigationButtonPressed
+## navigationButtonPressed
 Called when a TopBar button is pressed.
 
 ```js
 class MyComponent extends Component {
-  onNavigationButtonPressed(buttonId) {
+  navigationButtonPressed(buttonId) {
 
   }
 }

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

@@ -8,65 +8,59 @@ import com.facebook.react.modules.core.DeviceEventManagerModule;
 import static com.facebook.react.modules.core.DeviceEventManagerModule.RCTDeviceEventEmitter;
 
 public class EventEmitter {
-	private static final String onAppLaunched = "RNN.appLaunched";
-	private static final String componentDidAppear = "RNN.componentDidAppear";
-	private static final String componentDidDisappear = "RNN.componentDidDisappear";
-	private static final String nativeEvent = "RNN.nativeEvent";
-    private static final String commandCompleted = "RNN.commandCompleted";
-    private static final String buttonPressedEvent = "buttonPressed";
+	private static final String AppLaunched             = "RNN.AppLaunched";
+	private static final String CommandCompleted        = "RNN.CommandCompleted";
+	private static final String BottomTabSelected       = "RNN.BottomTabSelected";
+	private static final String ComponentDidAppear      = "RNN.ComponentDidAppear";
+	private static final String ComponentDidDisappear   = "RNN.ComponentDidDisappear";
+	private static final String NavigationButtonPressed = "RNN.NavigationButtonPressed";
+	private static final String SearchBarUpdated        = "RNN.SearchBarUpdated";
+	private static final String SearchBarCancelPressed  = "RNN.SearchBarCancelPressed";
 
-    private final RCTDeviceEventEmitter emitter;
+	private final RCTDeviceEventEmitter emitter;
 
-    EventEmitter(ReactContext reactContext) {
+	EventEmitter(ReactContext reactContext) {
 		this.emitter = reactContext.getJSModule(DeviceEventManagerModule.RCTDeviceEventEmitter.class);
 	}
 
 	public void appLaunched() {
-		emit(onAppLaunched);
+		emit(AppLaunched);
 	}
 
 	public void componentDidDisappear(String id, String componentName) {
 		WritableMap event = Arguments.createMap();
 		event.putString("componentId", id);
 		event.putString("componentName", componentName);
-		emit(componentDidDisappear, event);
+		emit(ComponentDidDisappear, event);
 	}
 
 	public void componentDidAppear(String id, String componentName) {
 		WritableMap event = Arguments.createMap();
 		event.putString("componentId", id);
 		event.putString("componentName", componentName);
-		emit(componentDidAppear, event);
+		emit(ComponentDidAppear, event);
 	}
 
-    public void emitOnNavigationButtonPressed(String id, String buttonId) {
-		WritableMap params = Arguments.createMap();
-		params.putString("componentId", id);
-		params.putString("buttonId", buttonId);
-
-        WritableMap event = Arguments.createMap();
-        event.putString("name", buttonPressedEvent);
-        event.putMap("params", params);
-		emit(nativeEvent, event);
+	public void emitOnNavigationButtonPressed(String id, String buttonId) {
+		WritableMap event = Arguments.createMap();
+		event.putString("componentId", id);
+		event.putString("buttonId", buttonId);
+		emit(NavigationButtonPressed, event);
 	}
 
-    public void emitBottomTabSelected(int unselectedTabIndex, int selectedTabIndex) {
-        WritableMap params = Arguments.createMap();
-        params.putInt("unselectedTabIndex", unselectedTabIndex);
-        params.putInt("selectedTabIndex", selectedTabIndex);
-
-        WritableMap event = Arguments.createMap();
-        event.putString("name", "bottomTabSelected");
-        event.putMap("params", params);
-        emitter.emit(nativeEvent, event);
-    }
+	public void emitBottomTabSelected(int unselectedTabIndex, int selectedTabIndex) {
+		WritableMap event = Arguments.createMap();
+		event.putInt("unselectedTabIndex", unselectedTabIndex);
+		event.putInt("selectedTabIndex", selectedTabIndex);
+		emit(BottomTabSelected, event);
+	}
 
-    public void emitCommandCompletedEvent(String commandId, long completionTime) {
-        WritableMap event = Arguments.createMap();
-        event.putString("commandId", commandId);
-        event.putDouble("completionTime", completionTime);
-        emitter.emit(commandCompleted, event);
-    }
+	public void emitCommandCompletedEvent(String commandId, long completionTime) {
+		WritableMap event = Arguments.createMap();
+		event.putString("commandId", commandId);
+		event.putDouble("completionTime", completionTime);
+		emit(CommandCompleted, event);
+	}
 
 	private void emit(String eventName) {
 		emit(eventName, Arguments.createMap());

lib/ios/RNNCommandsHandler.m

@@ -50,7 +50,6 @@ static NSString* const setDefaultOptions	= @"setDefaultOptions";
 	[self assertReady];
 	
 	[_modalManager dismissAllModals];
-	[_eventEmitter sendOnNavigationCommand:setRoot params:@{@"layout": layout}];
 	
 	UIViewController *vc = [_controllerFactory createLayoutAndSaveToStore:layout[@"root"]];
 	
@@ -62,7 +61,6 @@ static NSString* const setDefaultOptions	= @"setDefaultOptions";
 
 -(void) mergeOptions:(NSString*)componentId options:(NSDictionary*)options completion:(RNNTransitionCompletionBlock)completion {
 	[self assertReady];
-	[_eventEmitter sendOnNavigationCommand:mergeOptions params:@{@"componentId": componentId, @"options": options}];
 	
 	UIViewController* vc = [_store findComponentForId:componentId];
 	if([vc isKindOfClass:[RNNRootViewController class]]) {
@@ -91,7 +89,6 @@ static NSString* const setDefaultOptions	= @"setDefaultOptions";
 
 -(void) setDefaultOptions:(NSDictionary*)optionsDict completion:(RNNTransitionCompletionBlock)completion {
 	[self assertReady];
-	[_eventEmitter sendOnNavigationCommand:setDefaultOptions params:@{@"options": optionsDict}];
 	[_controllerFactory setDefaultOptionsDict:optionsDict];
 }
 

lib/ios/RNNEventEmitter.h

@@ -14,9 +14,7 @@
 
 -(void)sendOnNavigationButtonPressed:(NSString*)componentId buttonId:(NSString*)buttonId;
 
--(void)sendOnNavigationEvent:(NSString *)commandName params:(NSDictionary*)params;
-
--(void)sendOnNavigationCommand:(NSString *)commandName params:(NSDictionary*)params;
+-(void)sendBottomTabSelected:(NSNumber *)selectedTabIndex unselected:(NSNumber*)unselectedTabIndex;
 
 -(void)sendOnNavigationCommandCompletion:(NSString *)commandName params:(NSDictionary*)params;
 

lib/ios/RNNEventEmitter.m

@@ -2,75 +2,97 @@
 #import "RNNUtils.h"
 
 @implementation RNNEventEmitter {
-  NSInteger _appLaunchedListenerCount;
-  BOOL _appLaunchedEventDeferred;
+	NSInteger _appLaunchedListenerCount;
+	BOOL _appLaunchedEventDeferred;
 }
 
 RCT_EXPORT_MODULE();
 
-static NSString* const onAppLaunched	= @"RNN.appLaunched";
-static NSString* const componentDidAppear	= @"RNN.componentDidAppear";
-static NSString* const componentDidDisappear	= @"RNN.componentDidDisappear";
-static NSString* const commandComplete	= @"RNN.commandCompleted";
-static NSString* const navigationEvent	= @"RNN.nativeEvent";
+static NSString* const AppLaunched				= @"RNN.AppLaunched";
+static NSString* const CommandCompleted			= @"RNN.CommandCompleted";
+static NSString* const BottomTabSelected		= @"RNN.BottomTabSelected";
+static NSString* const ComponentDidAppear		= @"RNN.ComponentDidAppear";
+static NSString* const ComponentDidDisappear	= @"RNN.ComponentDidDisappear";
+static NSString* const NavigationButtonPressed	= @"RNN.NavigationButtonPressed";
+static NSString* const SearchBarUpdated 		= @"RNN.SearchBarUpdated";
+static NSString* const SearchBarCancelPressed 	= @"RNN.SearchBarCancelPressed";
 
 -(NSArray<NSString *> *)supportedEvents {
-	return @[onAppLaunched, componentDidAppear, componentDidDisappear, commandComplete, navigationEvent];
+	return @[AppLaunched,
+			 CommandCompleted,
+			 BottomTabSelected,
+			 ComponentDidAppear,
+			 ComponentDidDisappear,
+			 NavigationButtonPressed,
+			 SearchBarUpdated,
+			 SearchBarCancelPressed];
 }
 
 # pragma mark public
 
 -(void)sendOnAppLaunched {
 	if (_appLaunchedListenerCount > 0) {
-		[self send:onAppLaunched body:nil];
+		[self send:AppLaunched body:nil];
 	} else {
 		_appLaunchedEventDeferred = TRUE;
 	}
 }
 
 -(void)sendComponentDidAppear:(NSString *)componentId componentName:(NSString *)componentName {
-	[self send:componentDidAppear body:@{@"componentId":componentId, @"componentName": componentName}];
+	[self send:ComponentDidAppear body:@{
+										 @"componentId":componentId,
+										 @"componentName": componentName
+										 }];
 }
 
 -(void)sendComponentDidDisappear:(NSString *)componentId componentName:(NSString *)componentName{
-	[self send:componentDidDisappear body:@{@"componentId":componentId, @"componentName": componentName}];
+	[self send:ComponentDidDisappear body:@{
+											@"componentId":componentId,
+											@"componentName": componentName
+											}];
 }
 
 -(void)sendOnNavigationButtonPressed:(NSString *)componentId buttonId:(NSString*)buttonId {
-	[self send:navigationEvent body:@{@"name": @"buttonPressed", @"params": @{@"componentId": componentId , @"buttonId": buttonId}}];
+	[self send:NavigationButtonPressed body:@{
+											  @"componentId": componentId,
+											  @"buttonId": buttonId
+											  }];
 }
 
--(void)sendOnNavigationCommand:(NSString *)commandName params:(NSDictionary*)params {
-	[self send:navigationEvent body:@{@"name":commandName , @"params": params}];
+-(void)sendBottomTabSelected:(NSNumber *)selectedTabIndex unselected:(NSNumber*)unselectedTabIndex {
+	[self send:BottomTabSelected body:@{
+									  @"selectedTabIndex": selectedTabIndex,
+									  @"unselectedTabIndex": unselectedTabIndex
+									  }];
 }
 
 -(void)sendOnNavigationCommandCompletion:(NSString *)commandName params:(NSDictionary*)params {
-	[self send:commandComplete body:@{@"commandId":commandName , @"params": params, @"completionTime": [RNNUtils getCurrentTimestamp] }];
-}
-
--(void)sendOnNavigationEvent:(NSString *)commandName params:(NSDictionary*)params {
-	[self send:navigationEvent body:@{@"name":commandName , @"params": params}];
+	[self send:CommandCompleted body:@{
+									   @"commandId":commandName,
+									   @"params": params,
+									   @"completionTime": [RNNUtils getCurrentTimestamp]
+									   }];
 }
 
 -(void)sendOnSearchBarUpdated:(NSString *)componentId
 						 text:(NSString*)text
 					isFocused:(BOOL)isFocused {
-	[self send:navigationEvent body:@{@"name": @"searchBarUpdated",
-									  @"params": @{
-												  @"componentId": componentId,
-												  @"text": text,
-												  @"isFocused": @(isFocused)}}];
+	[self send:SearchBarUpdated body:@{
+									   @"componentId": componentId,
+									   @"text": text,
+									   @"isFocused": @(isFocused)
+									   }];
 }
 
 - (void)sendOnSearchBarCancelPressed:(NSString *)componentId {
-	[self send:navigationEvent body:@{@"name": @"searchBarCancelPressed",
-									  @"params": @{
-											  @"componentId": componentId}}];
+	[self send:SearchBarCancelPressed body:@{
+											@"componentId": componentId
+											}];
 }
 
 - (void)addListener:(NSString *)eventName {
 	[super addListener:eventName];
-	if ([eventName isEqualToString:onAppLaunched]) {
+	if ([eventName isEqualToString:AppLaunched]) {
 		_appLaunchedListenerCount++;
 		if (_appLaunchedEventDeferred) {
 			_appLaunchedEventDeferred = FALSE;
@@ -82,9 +104,9 @@ static NSString* const navigationEvent	= @"RNN.nativeEvent";
 # pragma mark private
 
 -(void)send:(NSString *)eventName body:(id)body {
-    if ([eventName isEqualToString:componentDidDisappear] && self.bridge == nil) {
-        return;
-    }
+	if (self.bridge == nil) {
+		return;
+	}
 	[self sendEventWithName:eventName body:body];
 }
 

lib/ios/RNNRootViewController.m

@@ -292,11 +292,11 @@
 
 - (UIViewController *)previewingContext:(id<UIViewControllerPreviewing>)previewingContext viewControllerForLocation:(CGPoint)location{
 	if (self.previewController) {
-		RNNRootViewController * vc = (RNNRootViewController*) self.previewController;
-		[_eventEmitter sendOnNavigationEvent:@"previewContext" params:@{
-																		@"previewComponentId": vc.componentId,
-																		@"componentId": self.componentId
-																		}];
+//		RNNRootViewController * vc = (RNNRootViewController*) self.previewController;
+//		[_eventEmitter sendOnNavigationEvent:@"previewContext" params:@{
+//																		@"previewComponentId": vc.componentId,
+//																		@"componentId": self.componentId
+//																		}];
 	}
 	return self.previewController;
 }
@@ -304,15 +304,15 @@
 
 - (void)previewingContext:(id<UIViewControllerPreviewing>)previewingContext commitViewController:(UIViewController *)viewControllerToCommit {
 	RNNRootViewController * vc = (RNNRootViewController*) self.previewController;
-	NSDictionary * params = @{
-							  @"previewComponentId": vc.componentId,
-							  @"componentId": self.componentId
-							  };
+//	NSDictionary * params = @{
+//							  @"previewComponentId": vc.componentId,
+//							  @"componentId": self.componentId
+//							  };
 	if (vc.options.preview.commit) {
-		[_eventEmitter sendOnNavigationEvent:@"previewCommit" params:params];
+//		[_eventEmitter sendOnNavigationEvent:@"previewCommit" params:params];
 		[self.navigationController pushViewController:vc animated:false];
 	} else {
-		[_eventEmitter sendOnNavigationEvent:@"previewDismissed" params:params];
+//		[_eventEmitter sendOnNavigationEvent:@"previewDismissed" params:params];
 	}
 }
 

lib/ios/RNNTabBarController.m

@@ -56,8 +56,7 @@
 #pragma mark UITabBarControllerDelegate
 
 - (void)tabBarController:(UITabBarController *)tabBarController didSelectViewController:(UIViewController *)viewController {
-	[_eventEmitter sendOnNavigationEvent:@"bottomTabSelected" params:@{@"selectedTabIndex": @(tabBarController.selectedIndex), @"unselectedTabIndex": @(_currentTabIndex)}];
-	
+	[_eventEmitter sendBottomTabSelected:@(tabBarController.selectedIndex) unselected:@(_currentTabIndex)];
 	_currentTabIndex = tabBarController.selectedIndex;
 }
 

lib/src/Navigation.ts

@@ -9,10 +9,10 @@ import { LayoutTreeCrawler } from './commands/LayoutTreeCrawler';
 import { EventsRegistry } from './events/EventsRegistry';
 import { ComponentProvider } from 'react-native';
 import { Element } from './adapters/Element';
-import { ComponentEventsObserver } from './events/ComponentEventsObserver';
 import { CommandsObserver } from './events/CommandsObserver';
 import { Constants } from './adapters/Constants';
 import { ComponentType } from 'react';
+import { ComponentEventsObserver } from './events/ComponentEventsObserver';
 
 export class Navigation {
   public readonly Element: React.ComponentType<{ elementId: any; resizeMode?: any; }>;
@@ -33,16 +33,16 @@ export class Navigation {
     this.store = new Store();
     this.nativeEventsReceiver = new NativeEventsReceiver();
     this.uniqueIdProvider = new UniqueIdProvider();
-    this.componentRegistry = new ComponentRegistry(this.store);
+    this.componentEventsObserver = new ComponentEventsObserver(this.nativeEventsReceiver);
+    this.componentRegistry = new ComponentRegistry(this.store, this.componentEventsObserver);
     this.layoutTreeParser = new LayoutTreeParser();
     this.layoutTreeCrawler = new LayoutTreeCrawler(this.uniqueIdProvider, this.store);
     this.nativeCommandsSender = new NativeCommandsSender();
     this.commandsObserver = new CommandsObserver();
     this.commands = new Commands(this.nativeCommandsSender, this.layoutTreeParser, this.layoutTreeCrawler, this.commandsObserver, this.uniqueIdProvider);
-    this.eventsRegistry = new EventsRegistry(this.nativeEventsReceiver, this.commandsObserver);
-    this.componentEventsObserver = new ComponentEventsObserver(this.eventsRegistry, this.store);
+    this.eventsRegistry = new EventsRegistry(this.nativeEventsReceiver, this.commandsObserver, this.componentEventsObserver);
 
-    this.componentEventsObserver.registerForAllComponents();
+    this.componentEventsObserver.registerOnceForAllComponentEvents();
   }
 
   /**
@@ -145,7 +145,6 @@ export class Navigation {
   }
 
   /**
-   * 
    * Resolves arguments passed on launch
    */
   public getLaunchArgs(): Promise<any> {

lib/src/adapters/NativeEventsReceiver.ts

@@ -1,5 +1,13 @@
 import { NativeModules, NativeEventEmitter } from 'react-native';
 import { EventSubscription } from '../interfaces/EventSubscription';
+import {
+  ComponentDidAppearEvent,
+  ComponentDidDisappearEvent,
+  NavigationButtonPressedEvent,
+  SearchBarUpdatedEvent,
+  SearchBarCancelPressedEvent
+} from '../interfaces/ComponentEvents';
+import { CommandCompletedEvent, BottomTabSelectedEvent } from '../interfaces/Events';
 
 export class NativeEventsReceiver {
   private emitter;
@@ -18,22 +26,34 @@ export class NativeEventsReceiver {
   }
 
   public registerAppLaunchedListener(callback: () => void): EventSubscription {
-    return this.emitter.addListener('RNN.appLaunched', callback);
+    return this.emitter.addListener('RNN.AppLaunched', callback);
   }
 
-  public registerComponentDidAppearListener(callback: (data) => void): EventSubscription {
-    return this.emitter.addListener('RNN.componentDidAppear', callback);
+  public registerComponentDidAppearListener(callback: (event: ComponentDidAppearEvent) => void): EventSubscription {
+    return this.emitter.addListener('RNN.ComponentDidAppear', callback);
   }
 
-  public registerComponentDidDisappearListener(callback: (data) => void): EventSubscription {
-    return this.emitter.addListener('RNN.componentDidDisappear', callback);
+  public registerComponentDidDisappearListener(callback: (event: ComponentDidDisappearEvent) => void): EventSubscription {
+    return this.emitter.addListener('RNN.ComponentDidDisappear', callback);
   }
 
-  public registerCommandCompletedListener(callback: (data) => void): EventSubscription {
-    return this.emitter.addListener('RNN.commandCompleted', callback);
+  public registerNavigationButtonPressedListener(callback: (event: NavigationButtonPressedEvent) => void): EventSubscription {
+    return this.emitter.addListener('RNN.NavigationButtonPressed', callback);
   }
 
-  public registerNativeEventListener(callback: (data) => void): EventSubscription {
-    return this.emitter.addListener('RNN.nativeEvent', callback);
+  public registerSearchBarUpdatedListener(callback: (event: SearchBarUpdatedEvent) => void): EventSubscription {
+    return this.emitter.addListener('RNN.SearchBarUpdated', callback);
+  }
+
+  public registerSearchBarCancelPressedListener(callback: (event: SearchBarCancelPressedEvent) => void): EventSubscription {
+    return this.emitter.addListener('RNN.SearchBarCancelPressed', callback);
+  }
+
+  public registerCommandCompletedListener(callback: (data: CommandCompletedEvent) => void): EventSubscription {
+    return this.emitter.addListener('RNN.CommandCompleted', callback);
+  }
+
+  public registerBottomTabSelectedListener(callback: (data: BottomTabSelectedEvent) => void): EventSubscription {
+    return this.emitter.addListener('RNN.BottomTabSelected', callback);
   }
 }

lib/src/components/ComponentRegistry.test.tsx

@@ -23,7 +23,7 @@ describe('ComponentRegistry', () => {
   beforeEach(() => {
     store = new Store();
     mockRegistry = AppRegistry.registerComponent = jest.fn(AppRegistry.registerComponent);
-    uut = new ComponentRegistry(store);
+    uut = new ComponentRegistry(store, {} as any);
   });
 
   it('registers component component by componentName into AppRegistry', () => {

lib/src/components/ComponentRegistry.ts

@@ -1,17 +1,15 @@
 import { AppRegistry, ComponentProvider } from 'react-native';
 import { ComponentWrapper } from './ComponentWrapper';
 import { ComponentType } from 'react';
+import { Store } from './Store';
+import { ComponentEventsObserver } from '../events/ComponentEventsObserver';
 
 export class ComponentRegistry {
-  private store;
-
-  constructor(store) {
-    this.store = store;
-  }
+  constructor(private readonly store: Store, private readonly componentEventsObserver: ComponentEventsObserver) { }
 
   registerComponent(componentName: string, getComponentClassFunc: ComponentProvider): ComponentType<any> {
     const OriginalComponentClass = getComponentClassFunc();
-    const NavigationComponent = ComponentWrapper.wrap(componentName, OriginalComponentClass, this.store);
+    const NavigationComponent = ComponentWrapper.wrap(componentName, OriginalComponentClass, this.store, this.componentEventsObserver);
     this.store.setOriginalComponentClassForName(componentName, OriginalComponentClass);
     AppRegistry.registerComponent(componentName, () => NavigationComponent);
     return NavigationComponent;

lib/src/components/ComponentWrapper.test.tsx

@@ -4,28 +4,27 @@ import * as renderer from 'react-test-renderer';
 import { ComponentWrapper } from './ComponentWrapper';
 import { Store } from './Store';
 
-declare module 'react-test-renderer' {
-  interface ReactTestInstance {
-    [P: string]: any;
-  }
-}
-
 describe('ComponentWrapper', () => {
-  let store;
   const componentName = 'example.MyComponent';
-  let childRef;
+  let store;
+  let myComponentProps;
+  const componentEventsObserver = { unmounted: jest.fn() };
 
-  class MyComponent extends React.Component {
+  class MyComponent extends React.Component<any, any> {
     static options = {
       title: 'MyComponentTitle'
     };
 
     render() {
-      return <Text>{'Hello, World!'}</Text>;
+      myComponentProps = this.props;
+      if (this.props.renderCount) {
+        this.props.renderCount();
+      }
+      return <Text>{this.props.text || 'Hello, World!'}</Text>;
     }
   }
 
-  class TestParent extends React.Component<any, { propsFromState: {} }> {
+  class TestParent extends React.Component<any, any> {
     private ChildClass;
 
     constructor(props) {
@@ -37,7 +36,6 @@ describe('ComponentWrapper', () => {
     render() {
       return (
         <this.ChildClass
-          ref={(r) => childRef = r}
           componentId='component1'
           {...this.state.propsFromState}
         />
@@ -50,7 +48,7 @@ describe('ComponentWrapper', () => {
   });
 
   it('must have componentId as prop', () => {
-    const NavigationComponent = ComponentWrapper.wrap(componentName, MyComponent, store);
+    const NavigationComponent = ComponentWrapper.wrap(componentName, MyComponent, store, componentEventsObserver);
     const orig = console.error;
     console.error = (a) => a;
     expect(() => {
@@ -60,174 +58,80 @@ describe('ComponentWrapper', () => {
   });
 
   it('wraps the component', () => {
-    const NavigationComponent = ComponentWrapper.wrap(componentName, MyComponent, store);
+    const NavigationComponent = ComponentWrapper.wrap(componentName, MyComponent, store, componentEventsObserver);
     expect(NavigationComponent).not.toBeInstanceOf(MyComponent);
     const tree = renderer.create(<NavigationComponent componentId={'component1'} />);
     expect(tree.toJSON()!.children).toEqual(['Hello, World!']);
-    expect(tree.getInstance()!.originalComponentRef).toBeInstanceOf(MyComponent);
   });
 
   it('injects props from wrapper into original component', () => {
-    const NavigationComponent = ComponentWrapper.wrap(componentName, MyComponent, store);
-    const tree = renderer.create(<NavigationComponent componentId={'component1'} myProp={'yo'} />);
-    expect(tree.getInstance()!.originalComponentRef.props.myProp).toEqual('yo');
+    const renderCount = jest.fn();
+    const NavigationComponent = ComponentWrapper.wrap(componentName, MyComponent, store, componentEventsObserver);
+    const tree = renderer.create(<NavigationComponent componentId={'component1'} text={'yo'} renderCount={renderCount} />);
+    expect(tree.toJSON()!.children).toEqual(['yo']);
+    expect(renderCount).toHaveBeenCalledTimes(1);
   });
 
-  it('updates props from wrapper into original component', () => {
-    const NavigationComponent = ComponentWrapper.wrap(componentName, MyComponent, store);
+  it('updates props from wrapper into original component on state change', () => {
+    const NavigationComponent = ComponentWrapper.wrap(componentName, MyComponent, store, componentEventsObserver);
     const tree = renderer.create(<TestParent ChildClass={NavigationComponent} />);
-    expect(childRef.props.foo).toEqual(undefined);
-    tree.getInstance()!.setState({ propsFromState: { foo: 'yo' } });
-    expect(childRef.props.foo).toEqual('yo');
+    expect(myComponentProps.foo).toEqual(undefined);
+    (tree.getInstance() as any).setState({ propsFromState: { foo: 'yo' } });
+    expect(myComponentProps.foo).toEqual('yo');
   });
 
   it('pulls props from the store and injects them into the inner component', () => {
     store.setPropsForId('component123', { numberProp: 1, stringProp: 'hello', objectProp: { a: 2 } });
-    const NavigationComponent = ComponentWrapper.wrap(componentName, MyComponent, store);
-    const tree = renderer.create(<NavigationComponent componentId={'component123'} />);
-    const originalComponentProps = tree.getInstance()!.originalComponentRef.props;
-    expect(originalComponentProps).toEqual({ componentId: 'component123', numberProp: 1, stringProp: 'hello', objectProp: { a: 2 } });
+    const NavigationComponent = ComponentWrapper.wrap(componentName, MyComponent, store, componentEventsObserver);
+    renderer.create(<NavigationComponent componentId={'component123'} />);
+    expect(myComponentProps).toEqual({ componentId: 'component123', numberProp: 1, stringProp: 'hello', objectProp: { a: 2 } });
   });
 
   it('updates props from store into inner component', () => {
-    const NavigationComponent = ComponentWrapper.wrap(componentName, MyComponent, store);
+    const NavigationComponent = ComponentWrapper.wrap(componentName, MyComponent, store, componentEventsObserver);
     const tree = renderer.create(<TestParent ChildClass={NavigationComponent} />);
     store.setPropsForId('component1', { myProp: 'hello' });
-    expect(childRef.originalComponentRef.props.foo).toEqual(undefined);
-    expect(childRef.originalComponentRef.props.myProp).toEqual(undefined);
-    tree.getInstance()!.setState({ propsFromState: { foo: 'yo' } });
-    expect(childRef.originalComponentRef.props.foo).toEqual('yo');
-    expect(childRef.originalComponentRef.props.myProp).toEqual('hello');
+    expect(myComponentProps.foo).toEqual(undefined);
+    expect(myComponentProps.myProp).toEqual(undefined);
+    (tree.getInstance() as any).setState({ propsFromState: { foo: 'yo' } });
+    expect(myComponentProps.foo).toEqual('yo');
+    expect(myComponentProps.myProp).toEqual('hello');
   });
 
   it('protects id from change', () => {
-    const NavigationComponent = ComponentWrapper.wrap(componentName, MyComponent, store);
+    const NavigationComponent = ComponentWrapper.wrap(componentName, MyComponent, store, componentEventsObserver);
     const tree = renderer.create(<TestParent ChildClass={NavigationComponent} />);
-    expect(childRef.originalComponentRef.props.componentId).toEqual('component1');
-    tree.getInstance()!.setState({ propsFromState: { id: 'ERROR' } });
-    expect(childRef.originalComponentRef.props.componentId).toEqual('component1');
+    expect(myComponentProps.componentId).toEqual('component1');
+    (tree.getInstance() as any).setState({ propsFromState: { id: 'ERROR' } });
+    expect(myComponentProps.componentId).toEqual('component1');
   });
 
   it('assignes key by id', () => {
-    const NavigationComponent = ComponentWrapper.wrap(componentName, MyComponent, store);
-    const tree = renderer.create(<NavigationComponent componentId={'component1'} />);
-    expect(tree.getInstance()!.originalComponentRef.props.componentId).toEqual('component1');
-    expect(tree.getInstance()!.originalComponentRef._reactInternalInstance.key).toEqual('component1');
-  });
-
-  it('saves self ref into store', () => {
-    const NavigationComponent = ComponentWrapper.wrap(componentName, MyComponent, store);
-    const tree = renderer.create(<NavigationComponent componentId={'component1'} />);
-    expect(store.getRefForId('component1')).toBeDefined();
-    expect(store.getRefForId('component1')).toBe(tree.getInstance());
-  });
-
-  it('cleans ref from store on unMount', () => {
-    const NavigationComponent = ComponentWrapper.wrap(componentName, MyComponent, store);
-    const tree = renderer.create(<NavigationComponent componentId={'component1'} />);
-    expect(store.getRefForId('component1')).toBeDefined();
-    tree.unmount();
-    expect(store.getRefForId('component1')).toBeUndefined();
-  });
-
-  it('holds ref to OriginalComponent', () => {
-    const NavigationComponent = ComponentWrapper.wrap(componentName, MyComponent, store);
+    const NavigationComponent = ComponentWrapper.wrap(componentName, MyComponent, store, componentEventsObserver);
     const tree = renderer.create(<NavigationComponent componentId={'component1'} />);
-    expect(tree.getInstance()!.originalComponentRef).toBeDefined();
-    expect(tree.getInstance()!.originalComponentRef).toBeInstanceOf(MyComponent);
+    expect(myComponentProps.componentId).toEqual('component1');
+    expect((tree.getInstance() as any)._reactInternalInstance.child.key).toEqual('component1');
   });
 
-  it('cleans ref to internal component on unount', () => {
-    const NavigationComponent = ComponentWrapper.wrap(componentName, MyComponent, store);
-    const tree = renderer.create(<NavigationComponent componentId={'component1'} />);
-    const instance = tree.getInstance()!;
-    expect(instance.originalComponentRef).toBeInstanceOf(React.Component);
+  it('cleans props from store on unMount', () => {
+    store.setPropsForId('component123', { foo: 'bar' });
+    const NavigationComponent = ComponentWrapper.wrap(componentName, MyComponent, store, componentEventsObserver);
+    const tree = renderer.create(<NavigationComponent componentId={'component123'} />);
+    expect(store.getPropsForId('component123')).toEqual({ foo: 'bar' });
     tree.unmount();
-    expect(instance.originalComponentRef).toBeFalsy();
+    expect(store.getPropsForId('component123')).toEqual({});
   });
 
   it(`merges static members from wrapped component`, () => {
-    const NavigationComponent = ComponentWrapper.wrap(componentName, MyComponent, store) as any;
+    const NavigationComponent = ComponentWrapper.wrap(componentName, MyComponent, store, componentEventsObserver) as any;
     expect(NavigationComponent.options).toEqual({ title: 'MyComponentTitle' });
   });
 
-  describe('component lifecycle', () => {
-    const componentDidAppearCallback = jest.fn();
-    const componentDidDisappearCallback = jest.fn();
-    const onNavigationButtonPressedCallback = jest.fn();
-    const onSearchBarCallback = jest.fn();
-    const onSearchBarCancelCallback = jest.fn();
-
-    class MyLifecycleComponent extends MyComponent {
-      componentDidAppear() {
-        componentDidAppearCallback();
-      }
-
-      componentDidDisappear() {
-        componentDidDisappearCallback();
-      }
-
-      onNavigationButtonPressed() {
-        onNavigationButtonPressedCallback();
-      }
-
-      onSearchBarUpdated() {
-        onSearchBarCallback();
-      }
-
-      onSearchBarCancelPressed() {
-        onSearchBarCancelCallback();
-      }
-    }
-
-    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()!.onNavigationButtonPressed()).not.toThrow();
-      expect(() => tree.getInstance()!.onSearchBarUpdated()).not.toThrow();
-      expect(() => tree.getInstance()!.onSearchBarCancelPressed()).not.toThrow();
-    });
-
-    it('calls componentDidAppear on OriginalComponent', () => {
-      const NavigationComponent = ComponentWrapper.wrap(componentName, MyLifecycleComponent, store);
-      const tree = renderer.create(<NavigationComponent componentId={'component1'} />);
-      expect(componentDidAppearCallback).toHaveBeenCalledTimes(0);
-      tree.getInstance()!.componentDidAppear();
-      expect(componentDidAppearCallback).toHaveBeenCalledTimes(1);
-    });
-
-    it('calls componentDidDisappear on OriginalComponent', () => {
-      const NavigationComponent = ComponentWrapper.wrap(componentName, MyLifecycleComponent, store);
-      const tree = renderer.create(<NavigationComponent componentId={'component1'} />);
-      expect(componentDidDisappearCallback).toHaveBeenCalledTimes(0);
-      tree.getInstance()!.componentDidDisappear();
-      expect(componentDidDisappearCallback).toHaveBeenCalledTimes(1);
-    });
-
-    it('calls onNavigationButtonPressed on OriginalComponent', () => {
-      const NavigationComponent = ComponentWrapper.wrap(componentName, MyLifecycleComponent, store);
-      const tree = renderer.create(<NavigationComponent componentId={'component1'} />);
-      expect(onNavigationButtonPressedCallback).toHaveBeenCalledTimes(0);
-      tree.getInstance()!.onNavigationButtonPressed();
-      expect(onNavigationButtonPressedCallback).toHaveBeenCalledTimes(1);
-    });
-
-    it('calls onSearchBarUpdated on OriginalComponent', () => {
-      const NavigationComponent = ComponentWrapper.wrap(componentName, MyLifecycleComponent, store);
-      const tree = renderer.create(<NavigationComponent componentId={'component1'} />);
-      expect(onSearchBarCallback).toHaveBeenCalledTimes(0);
-      tree.getInstance()!.onSearchBarUpdated();
-      expect(onSearchBarCallback).toHaveBeenCalledTimes(1);
-    });
-
-    it('calls onSearchBarCancelPressed on OriginalComponent', () => {
-      const NavigationComponent = ComponentWrapper.wrap(componentName, MyLifecycleComponent, store);
-      const tree = renderer.create(<NavigationComponent componentId={'component1'} />);
-      expect(onSearchBarCancelCallback).toHaveBeenCalledTimes(0);
-      tree.getInstance()!.onSearchBarCancelPressed();
-      expect(onSearchBarCancelCallback).toHaveBeenCalledTimes(1);
-    });
+  it(`calls unmounted on componentEventsObserver`, () => {
+    const NavigationComponent = ComponentWrapper.wrap(componentName, MyComponent, store, componentEventsObserver);
+    const tree = renderer.create(<NavigationComponent componentId={'component123'} />);
+    expect(componentEventsObserver.unmounted).not.toHaveBeenCalled();
+    tree.unmount();
+    expect(componentEventsObserver.unmounted).toHaveBeenCalledTimes(1);
   });
 });

lib/src/components/ComponentWrapper.tsx

@@ -4,7 +4,11 @@ import * as ReactLifecyclesCompat from 'react-lifecycles-compat';
 
 export class ComponentWrapper {
 
-  static wrap(componentName: string, OriginalComponentClass: React.ComponentType<any>, store): React.ComponentType<any> {
+  static wrap(
+    componentName: string,
+    OriginalComponentClass: React.ComponentType<any>,
+    store,
+    componentEventsObserver): React.ComponentType<any> {
 
     class WrappedComponent extends React.Component<any, { componentId: string; allProps: {}; }> {
 
@@ -14,60 +18,23 @@ export class ComponentWrapper {
         };
       }
 
-      private originalComponentRef;
-
       constructor(props) {
         super(props);
         this._assertComponentId();
-        this._saveComponentRef = this._saveComponentRef.bind(this);
         this.state = {
           componentId: props.componentId,
           allProps: {}
         };
       }
 
-      componentDidMount() {
-        store.setRefForId(this.state.componentId, this);
-      }
-
       componentWillUnmount() {
         store.cleanId(this.state.componentId);
-      }
-
-      componentDidAppear() {
-        if (this.originalComponentRef.componentDidAppear) {
-          this.originalComponentRef.componentDidAppear();
-        }
-      }
-
-      componentDidDisappear() {
-        if (this.originalComponentRef.componentDidDisappear) {
-          this.originalComponentRef.componentDidDisappear();
-        }
-      }
-
-      onNavigationButtonPressed(buttonId) {
-        if (this.originalComponentRef.onNavigationButtonPressed) {
-          this.originalComponentRef.onNavigationButtonPressed(buttonId);
-        }
-      }
-
-      onSearchBarUpdated(text, isFocused) {
-        if (this.originalComponentRef.onSearchBarUpdated) {
-          this.originalComponentRef.onSearchBarUpdated(text, isFocused);
-        }
-      }
-
-      onSearchBarCancelPressed() {
-        if (this.originalComponentRef.onSearchBarCancelPressed) {
-          this.originalComponentRef.onSearchBarCancelPressed();
-        }
+        componentEventsObserver.unmounted(this.state.componentId);
       }
 
       render() {
         return (
           <OriginalComponentClass
-            ref={this._saveComponentRef}
             {...this.state.allProps}
             componentId={this.state.componentId}
             key={this.state.componentId}
@@ -80,10 +47,6 @@ export class ComponentWrapper {
           throw new Error(`Component ${componentName} does not have a componentId!`);
         }
       }
-
-      private _saveComponentRef(r) {
-        this.originalComponentRef = r;
-      }
     }
 
     ReactLifecyclesCompat.polyfill(WrappedComponent);

lib/src/components/Store.test.ts

@@ -30,20 +30,11 @@ describe('Store', () => {
     expect(uut.getOriginalComponentClassForName('example.mycomponent')).toEqual(MyComponent);
   });
 
-  it('holds component refs by id', () => {
-    const ref = {};
-    uut.setRefForId('refUniqueId', ref);
-    expect(uut.getRefForId('other')).toBeUndefined();
-    expect(uut.getRefForId('refUniqueId')).toBe(ref);
-  });
-
-  it('clean by id', () => {
-    uut.setRefForId('refUniqueId', {});
+  it('clean by component id', () => {
     uut.setPropsForId('refUniqueId', { foo: 'bar' });
 
     uut.cleanId('refUniqueId');
 
-    expect(uut.getRefForId('refUniqueId')).toBeUndefined();
     expect(uut.getPropsForId('refUniqueId')).toEqual({});
   });
 });

lib/src/components/Store.ts

@@ -3,7 +3,6 @@ import * as _ from 'lodash';
 export class Store {
   private componentsByName = {};
   private propsById = {};
-  private refsById = {};
 
   setPropsForId(componentId: string, props) {
     _.set(this.propsById, componentId, props);
@@ -21,16 +20,7 @@ export class Store {
     return _.get(this.componentsByName, componentName);
   }
 
-  setRefForId(id: string, ref) {
-    _.set(this.refsById, id, ref);
-  }
-
-  getRefForId(id: string) {
-    return _.get(this.refsById, id);
-  }
-
   cleanId(id: string) {
-    _.unset(this.refsById, id);
     _.unset(this.propsById, id);
   }
 }

lib/src/events/CommandsObserver.ts

@@ -15,6 +15,6 @@ export class CommandsObserver {
   }
 
   public notify(commandName: string, params: {}): void {
-    _.forEach(this.listeners, (listener) => listener(commandName, params));
+    _.forEach(this.listeners, (listener: CommandsListener) => listener(commandName, params));
   }
 }

lib/src/events/ComponentEventsObserver.test.ts

@@ -1,139 +0,0 @@
-import { ComponentEventsObserver } from './ComponentEventsObserver';
-import { Store } from '../components/Store';
-
-describe(`ComponentEventsObserver`, () => {
-  let uut: ComponentEventsObserver;
-  let eventRegistry;
-  let store: Store;
-  let mockComponentRef;
-  const refId = 'myUniqueId';
-
-  beforeEach(() => {
-    eventRegistry = {
-      registerComponentDidAppearListener: jest.fn(),
-      registerComponentDidDisappearListener: jest.fn(),
-      registerNativeEventListener: jest.fn()
-    };
-
-    mockComponentRef = {
-      componentDidAppear: jest.fn(),
-      componentDidDisappear: jest.fn(),
-      onNavigationButtonPressed: jest.fn(),
-      onSearchBarUpdated: jest.fn(),
-      onSearchBarCancelPressed: jest.fn()
-    };
-
-    store = new Store();
-    store.setRefForId(refId, mockComponentRef);
-
-    uut = new ComponentEventsObserver(eventRegistry, store);
-  });
-
-  it('register for lifecycle events on eventRegistry', () => {
-    expect(eventRegistry.registerComponentDidAppearListener).toHaveBeenCalledTimes(0);
-    expect(eventRegistry.registerComponentDidDisappearListener).toHaveBeenCalledTimes(0);
-    expect(eventRegistry.registerNativeEventListener).toHaveBeenCalledTimes(0);
-    uut.registerForAllComponents();
-    expect(eventRegistry.registerComponentDidAppearListener).toHaveBeenCalledTimes(1);
-    expect(eventRegistry.registerComponentDidDisappearListener).toHaveBeenCalledTimes(1);
-    expect(eventRegistry.registerNativeEventListener).toHaveBeenCalledTimes(1);
-  });
-
-  it('bubbles lifecycle to component from store', () => {
-    const params = {};
-    expect(mockComponentRef.componentDidAppear).toHaveBeenCalledTimes(0);
-    expect(mockComponentRef.componentDidDisappear).toHaveBeenCalledTimes(0);
-    expect(mockComponentRef.onNavigationButtonPressed).toHaveBeenCalledTimes(0);
-    expect(mockComponentRef.onSearchBarUpdated).toHaveBeenCalledTimes(0);
-    expect(mockComponentRef.onSearchBarCancelPressed).toHaveBeenCalledTimes(0);
-    uut.registerForAllComponents();
-    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);
-    expect(mockComponentRef.onSearchBarUpdated).toHaveBeenCalledTimes(0);
-    expect(mockComponentRef.onSearchBarCancelPressed).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('theButtonId');
-  });
-
-  it('bubbles onSearchUpdated to component by id', () => {
-    const params = {
-      componentId: refId,
-      text: 'query',
-      isFocused: true,
-    };
-    expect(mockComponentRef.onSearchBarUpdated).toHaveBeenCalledTimes(0);
-    uut.registerForAllComponents();
-
-    eventRegistry.registerNativeEventListener.mock.calls[0][0]('buttonPressed', params);
-    expect(mockComponentRef.onSearchBarUpdated).toHaveBeenCalledTimes(0);
-
-    eventRegistry.registerNativeEventListener.mock.calls[0][0]('searchBarUpdated', params);
-    expect(mockComponentRef.onSearchBarUpdated).toHaveBeenCalledTimes(1);
-    expect(mockComponentRef.onSearchBarUpdated).toHaveBeenCalledWith('query', true);
-    const paramsForUnexisted = {
-      componentId: 'NOT_EXISTED',
-      text: 'query',
-      isFocused: true,
-    };
-    eventRegistry.registerNativeEventListener.mock.calls[0][0]('searchBarUpdated', paramsForUnexisted);
-    expect(mockComponentRef.onSearchBarUpdated).toHaveBeenCalledTimes(1);
-    expect(mockComponentRef.onSearchBarUpdated).toHaveBeenCalledWith('query', true);
-  });
-
-  it('bubbles onSearchBarCancelPressed to component by id', () => {
-    const params = {
-      componentId: refId,
-    };
-    expect(mockComponentRef.onSearchBarCancelPressed).toHaveBeenCalledTimes(0);
-    uut.registerForAllComponents();
-
-    eventRegistry.registerNativeEventListener.mock.calls[0][0]('buttonPressed', params);
-    expect(mockComponentRef.onSearchBarCancelPressed).toHaveBeenCalledTimes(0);
-
-    eventRegistry.registerNativeEventListener.mock.calls[0][0]('searchBarCancelPressed', params);
-    expect(mockComponentRef.onSearchBarCancelPressed).toHaveBeenCalledTimes(1);
-
-    const paramsForUnexisted = {
-      componentId: 'NOT_EXISTED',
-    };
-    eventRegistry.registerNativeEventListener.mock.calls[0][0]('searchBarCancelPressed', paramsForUnexisted);
-    expect(mockComponentRef.onSearchBarCancelPressed).toHaveBeenCalledTimes(1);
-  });
-
-  it('defensive unknown id', () => {
-    uut.registerForAllComponents();
-    expect(() => {
-      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();
-  });
-
-  it('defensive method impl', () => {
-    store.setRefForId('myId', {});
-    uut.registerForAllComponents();
-    expect(() => {
-      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.test.tsx

@@ -0,0 +1,181 @@
+import * as React from 'react';
+import * as renderer from 'react-test-renderer';
+import { ComponentEventsObserver } from './ComponentEventsObserver';
+import { NativeEventsReceiver } from '../adapters/NativeEventsReceiver.mock';
+
+describe('ComponentEventsObserver', () => {
+  const mockEventsReceiver = new NativeEventsReceiver();
+  const uut = new ComponentEventsObserver(mockEventsReceiver);
+  const didAppearFn = jest.fn();
+  const didDisappearFn = jest.fn();
+  const didMountFn = jest.fn();
+  const willUnmountFn = jest.fn();
+  const navigationButtonPressedFn = jest.fn();
+  const searchBarUpdatedFn = jest.fn();
+  const searchBarCancelPressedFn = jest.fn();
+  let subscription;
+
+  class SimpleScreen extends React.Component<any, any> {
+    render() {
+      return 'Hello';
+    }
+  }
+
+  class BoundScreen extends React.Component<any, any> {
+    constructor(props) {
+      super(props);
+      subscription = uut.bindComponent(this);
+    }
+
+    componentDidMount() {
+      didMountFn();
+    }
+
+    componentWillUnmount() {
+      willUnmountFn();
+    }
+
+    componentDidAppear() {
+      didAppearFn();
+    }
+
+    componentDidDisappear() {
+      didDisappearFn();
+    }
+
+    navigationButtonPressed(event) {
+      navigationButtonPressedFn(event);
+    }
+
+    searchBarUpdated(event) {
+      searchBarUpdatedFn(event);
+    }
+
+    searchBarCancelPressed(event) {
+      searchBarCancelPressedFn(event);
+    }
+
+    render() {
+      return 'Hello';
+    }
+  }
+
+  it(`bindComponent expects a component with componentId`, () => {
+    const tree = renderer.create(<SimpleScreen />);
+    expect(() => uut.bindComponent(tree.getInstance() as any)).toThrow('');
+    const tree2 = renderer.create(<SimpleScreen componentId={123} />);
+    expect(() => uut.bindComponent(tree2.getInstance() as any)).toThrow('');
+  });
+
+  it(`bindComponent notifies listeners by componentId on events`, () => {
+    const tree = renderer.create(<BoundScreen componentId={'myCompId'} />);
+    expect(tree.toJSON()).toBeDefined();
+    expect(didMountFn).toHaveBeenCalledTimes(1);
+    expect(didAppearFn).not.toHaveBeenCalled();
+    expect(didDisappearFn).not.toHaveBeenCalled();
+    expect(willUnmountFn).not.toHaveBeenCalled();
+
+    uut.notifyComponentDidAppear({ componentId: 'myCompId', componentName: 'doesnt matter' });
+    expect(didAppearFn).toHaveBeenCalledTimes(1);
+
+    uut.notifyComponentDidDisappear({ componentId: 'myCompId', componentName: 'doesnt matter' });
+    expect(didDisappearFn).toHaveBeenCalledTimes(1);
+
+    uut.notifyNavigationButtonPressed({ componentId: 'myCompId', buttonId: 'myButtonId' });
+    expect(navigationButtonPressedFn).toHaveBeenCalledTimes(1);
+    expect(navigationButtonPressedFn).toHaveBeenCalledWith({ buttonId: 'myButtonId', componentId: 'myCompId' });
+
+    uut.notifySearchBarUpdated({ componentId: 'myCompId', text: 'theText', isFocused: true });
+    expect(searchBarUpdatedFn).toHaveBeenCalledTimes(1);
+    expect(searchBarUpdatedFn).toHaveBeenCalledWith({ componentId: 'myCompId', text: 'theText', isFocused: true });
+
+    uut.notifySearchBarCancelPressed({ componentId: 'myCompId' });
+    expect(searchBarCancelPressedFn).toHaveBeenCalledTimes(1);
+    expect(searchBarCancelPressedFn).toHaveBeenCalledWith({ componentId: 'myCompId' });
+
+    tree.unmount();
+    expect(willUnmountFn).toHaveBeenCalledTimes(1);
+  });
+
+  it(`doesnt call other componentIds`, () => {
+    renderer.create(<BoundScreen componentId={'myCompId'} />);
+    uut.notifyComponentDidAppear({ componentId: 'other', componentName: 'doesnt matter' });
+    expect(didAppearFn).not.toHaveBeenCalled();
+  });
+
+  it(`doesnt call unimplemented methods`, () => {
+    const tree = renderer.create(<SimpleScreen componentId={'myCompId'} />);
+    expect((tree.getInstance() as any).componentDidAppear).toBeUndefined();
+    uut.bindComponent(tree.getInstance() as any);
+    uut.notifyComponentDidAppear({ componentId: 'myCompId', componentName: 'doesnt matter' });
+  });
+
+  it(`returns unregister fn`, () => {
+    renderer.create(<BoundScreen componentId={'123'} />);
+
+    uut.notifyComponentDidAppear({ componentId: '123', componentName: 'doesnt matter' });
+    expect(didAppearFn).toHaveBeenCalledTimes(1);
+
+    subscription.remove();
+
+    uut.notifyComponentDidAppear({ componentId: '123', componentName: 'doesnt matter' });
+    expect(didAppearFn).toHaveBeenCalledTimes(1);
+  });
+
+  it(`removeAllListenersForComponentId`, () => {
+    renderer.create(<BoundScreen componentId={'123'} />);
+    renderer.create(<BoundScreen componentId={'123'} />);
+
+    uut.unmounted('123');
+
+    uut.notifyComponentDidAppear({ componentId: '123', componentName: 'doesnt matter' });
+    expect(didAppearFn).not.toHaveBeenCalled();
+  });
+
+  it(`supports multiple listeners with same componentId`, () => {
+    const tree1 = renderer.create(<SimpleScreen componentId={'myCompId'} />);
+    const tree2 = renderer.create(<SimpleScreen componentId={'myCompId'} />);
+    const instance1 = tree1.getInstance() as any;
+    const instance2 = tree2.getInstance() as any;
+    instance1.componentDidAppear = jest.fn();
+    instance2.componentDidAppear = jest.fn();
+
+    const result1 = uut.bindComponent(instance1);
+    const result2 = uut.bindComponent(instance2);
+    expect(result1).not.toEqual(result2);
+
+    uut.notifyComponentDidAppear({ componentId: 'myCompId', componentName: 'doesnt matter' });
+
+    expect(instance1.componentDidAppear).toHaveBeenCalledTimes(1);
+    expect(instance2.componentDidAppear).toHaveBeenCalledTimes(1);
+
+    result2.remove();
+
+    uut.notifyComponentDidAppear({ componentId: 'myCompId', componentName: 'doesnt matter' });
+    expect(instance1.componentDidAppear).toHaveBeenCalledTimes(2);
+    expect(instance2.componentDidAppear).toHaveBeenCalledTimes(1);
+
+    result1.remove();
+
+    uut.notifyComponentDidAppear({ componentId: 'myCompId', componentName: 'doesnt matter' });
+    expect(instance1.componentDidAppear).toHaveBeenCalledTimes(2);
+    expect(instance2.componentDidAppear).toHaveBeenCalledTimes(1);
+  });
+
+  it(`register for all native component events notifies self on events, once`, () => {
+    expect(mockEventsReceiver.registerComponentDidAppearListener).not.toHaveBeenCalled();
+    expect(mockEventsReceiver.registerComponentDidDisappearListener).not.toHaveBeenCalled();
+    expect(mockEventsReceiver.registerNavigationButtonPressedListener).not.toHaveBeenCalled();
+    expect(mockEventsReceiver.registerSearchBarUpdatedListener).not.toHaveBeenCalled();
+    expect(mockEventsReceiver.registerSearchBarCancelPressedListener).not.toHaveBeenCalled();
+    uut.registerOnceForAllComponentEvents();
+    uut.registerOnceForAllComponentEvents();
+    uut.registerOnceForAllComponentEvents();
+    uut.registerOnceForAllComponentEvents();
+    expect(mockEventsReceiver.registerComponentDidAppearListener).toHaveBeenCalledTimes(1);
+    expect(mockEventsReceiver.registerComponentDidDisappearListener).toHaveBeenCalledTimes(1);
+    expect(mockEventsReceiver.registerNavigationButtonPressedListener).toHaveBeenCalledTimes(1);
+    expect(mockEventsReceiver.registerSearchBarUpdatedListener).toHaveBeenCalledTimes(1);
+    expect(mockEventsReceiver.registerSearchBarCancelPressedListener).toHaveBeenCalledTimes(1);
+  });
+});

lib/src/events/ComponentEventsObserver.ts

@@ -1,55 +1,80 @@
-import { EventsRegistry } from './EventsRegistry';
-import { Store } from '../components/Store';
-
-const BUTTON_PRESSED_EVENT_NAME = 'buttonPressed';
-const ON_SEARCH_BAR_UPDATED = 'searchBarUpdated';
-const ON_SEARCH_BAR_CANCEL_PRESSED = 'searchBarCancelPressed';
+import * as _ from 'lodash';
+import { EventSubscription } from '../interfaces/EventSubscription';
+import {
+  ComponentDidAppearEvent,
+  ComponentDidDisappearEvent,
+  NavigationButtonPressedEvent,
+  SearchBarUpdatedEvent,
+  SearchBarCancelPressedEvent,
+  ComponentEvent
+} from '../interfaces/ComponentEvents';
+import { NativeEventsReceiver } from '../adapters/NativeEventsReceiver';
 
 export class ComponentEventsObserver {
-  constructor(private eventsRegistry: EventsRegistry, private store: Store) {
-    this.componentDidAppear = this.componentDidAppear.bind(this);
-    this.componentDidDisappear = this.componentDidDisappear.bind(this);
-    this.onNativeEvent = this.onNativeEvent.bind(this);
+  private readonly listeners = {};
+  private alreadyRegistered = false;
+
+  constructor(private readonly nativeEventsReceiver: NativeEventsReceiver) {
+    this.notifyComponentDidAppear = this.notifyComponentDidAppear.bind(this);
+    this.notifyComponentDidDisappear = this.notifyComponentDidDisappear.bind(this);
+    this.notifyNavigationButtonPressed = this.notifyNavigationButtonPressed.bind(this);
+    this.notifySearchBarUpdated = this.notifySearchBarUpdated.bind(this);
+    this.notifySearchBarCancelPressed = this.notifySearchBarCancelPressed.bind(this);
   }
 
-  public registerForAllComponents(): void {
-    this.eventsRegistry.registerComponentDidAppearListener(this.componentDidAppear);
-    this.eventsRegistry.registerComponentDidDisappearListener(this.componentDidDisappear);
-    this.eventsRegistry.registerNativeEventListener(this.onNativeEvent);
+  public registerOnceForAllComponentEvents() {
+    if (this.alreadyRegistered) { return; }
+    this.alreadyRegistered = true;
+    this.nativeEventsReceiver.registerComponentDidAppearListener(this.notifyComponentDidAppear);
+    this.nativeEventsReceiver.registerComponentDidDisappearListener(this.notifyComponentDidDisappear);
+    this.nativeEventsReceiver.registerNavigationButtonPressedListener(this.notifyNavigationButtonPressed);
+    this.nativeEventsReceiver.registerSearchBarUpdatedListener(this.notifySearchBarUpdated);
+    this.nativeEventsReceiver.registerSearchBarCancelPressedListener(this.notifySearchBarCancelPressed);
   }
 
-  private componentDidAppear(componentId: string) {
-    const componentRef = this.store.getRefForId(componentId);
-    if (componentRef && componentRef.componentDidAppear) {
-      componentRef.componentDidAppear();
+  public bindComponent(component: React.Component<any>): EventSubscription {
+    const componentId = component.props.componentId;
+    if (!_.isString(componentId)) {
+      throw new Error(`bindComponent expects a component with a componentId in props`);
+    }
+    if (_.isNil(this.listeners[componentId])) {
+      this.listeners[componentId] = {};
     }
+    const key = _.uniqueId();
+    this.listeners[componentId][key] = component;
+
+    return { remove: () => _.unset(this.listeners[componentId], key) };
   }
 
-  private componentDidDisappear(componentId: string) {
-    const componentRef = this.store.getRefForId(componentId);
-    if (componentRef && componentRef.componentDidDisappear) {
-      componentRef.componentDidDisappear();
-    }
+  public unmounted(componentId: string) {
+    _.unset(this.listeners, componentId);
   }
 
-  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);
-      }
-    }
-    if (name === ON_SEARCH_BAR_UPDATED) {
-      const componentRef = this.store.getRefForId(params.componentId);
-      if (componentRef && componentRef.onSearchBarUpdated) {
-        componentRef.onSearchBarUpdated(params.text, params.isFocused);
-      }
-    }
-    if (name === ON_SEARCH_BAR_CANCEL_PRESSED) {
-      const componentRef = this.store.getRefForId(params.componentId);
-      if (componentRef && componentRef.onSearchBarCancelPressed) {
-        componentRef.onSearchBarCancelPressed();
+  notifyComponentDidAppear(event: ComponentDidAppearEvent) {
+    this.triggerOnAllListenersByComponentId(event, 'componentDidAppear');
+  }
+
+  notifyComponentDidDisappear(event: ComponentDidDisappearEvent) {
+    this.triggerOnAllListenersByComponentId(event, 'componentDidDisappear');
+  }
+
+  notifyNavigationButtonPressed(event: NavigationButtonPressedEvent) {
+    this.triggerOnAllListenersByComponentId(event, 'navigationButtonPressed');
+  }
+
+  notifySearchBarUpdated(event: SearchBarUpdatedEvent) {
+    this.triggerOnAllListenersByComponentId(event, 'searchBarUpdated');
+  }
+
+  notifySearchBarCancelPressed(event: SearchBarCancelPressedEvent) {
+    this.triggerOnAllListenersByComponentId(event, 'searchBarCancelPressed');
+  }
+
+  private triggerOnAllListenersByComponentId(event: ComponentEvent, method: string) {
+    _.forEach(this.listeners[event.componentId], (component) => {
+      if (_.isObject(component) && _.isFunction(component[method])) {
+        component[method](event);
       }
-    }
+    });
   }
 }

lib/src/events/EventsRegistry.test.ts

@@ -1,99 +0,0 @@
-import { EventsRegistry } from './EventsRegistry';
-import { NativeEventsReceiver } from '../adapters/NativeEventsReceiver.mock';
-import { CommandsObserver } from './CommandsObserver';
-
-describe('EventsRegistry', () => {
-  let uut: EventsRegistry;
-  const mockNativeEventsReceiver = new NativeEventsReceiver();
-  let commandsObserver: CommandsObserver;
-
-  beforeEach(() => {
-    commandsObserver = new CommandsObserver();
-    uut = new EventsRegistry(mockNativeEventsReceiver, commandsObserver);
-  });
-
-  it('exposes appLaunched event', () => {
-    const subscription = {};
-    const cb = jest.fn();
-    mockNativeEventsReceiver.registerAppLaunchedListener.mockReturnValueOnce(subscription);
-
-    const result = uut.registerAppLaunchedListener(cb);
-
-    expect(result).toBe(subscription);
-    expect(mockNativeEventsReceiver.registerAppLaunchedListener).toHaveBeenCalledTimes(1);
-    expect(mockNativeEventsReceiver.registerAppLaunchedListener).toHaveBeenCalledWith(cb);
-  });
-
-  it('exposes componentDidAppear event', () => {
-    const subscription = {};
-    const cb = jest.fn();
-    mockNativeEventsReceiver.registerComponentDidAppearListener.mockReturnValueOnce(subscription);
-
-    const result = uut.registerComponentDidAppearListener(cb);
-
-    expect(result).toBe(subscription);
-    expect(mockNativeEventsReceiver.registerComponentDidAppearListener).toHaveBeenCalledTimes(1);
-
-    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.registerComponentDidDisappearListener.mockReturnValueOnce(subscription);
-
-    const result = uut.registerComponentDidDisappearListener(cb);
-
-    expect(result).toBe(subscription);
-    expect(mockNativeEventsReceiver.registerComponentDidDisappearListener).toHaveBeenCalledTimes(1);
-
-    mockNativeEventsReceiver.registerComponentDidDisappearListener.mock.calls[0][0]({ componentId: 'theId', componentName: 'theName' });
-    expect(cb).toHaveBeenCalledWith('theId', 'theName');
-  });
-
-  it('exposes registerCommandListener registers listener to commandObserver', () => {
-    const cb = jest.fn();
-    const result = uut.registerCommandListener(cb);
-    expect(result).toBeDefined();
-    commandsObserver.notify('theCommandName', { x: 1 });
-    expect(cb).toHaveBeenCalledTimes(1);
-    expect(cb).toHaveBeenCalledWith('theCommandName', { x: 1 });
-  });
-
-  it('registerCommandListener unregister', () => {
-    const cb = jest.fn();
-    const result = uut.registerCommandListener(cb);
-    result.remove();
-    commandsObserver.notify('theCommandName', { x: 1 });
-    expect(cb).not.toHaveBeenCalled();
-  });
-
-  it('registerCommandCompletedListener', () => {
-    const subscription = {};
-    const cb = jest.fn();
-    mockNativeEventsReceiver.registerCommandCompletedListener.mockReturnValueOnce(subscription);
-
-    const result = uut.registerCommandCompletedListener(cb);
-
-    expect(result).toBe(subscription);
-    expect(mockNativeEventsReceiver.registerCommandCompletedListener).toHaveBeenCalledTimes(1);
-
-    mockNativeEventsReceiver.registerCommandCompletedListener.mock.calls[0][0]({ commandId: 'theCommandId', completionTime: 12345, params: { a: 1 } });
-    expect(cb).toHaveBeenCalledWith('theCommandId', 12345, { a: 1 });
-  });
-
-  it('registerNativeEventListener', () => {
-    const subscription = {};
-    const cb = jest.fn();
-    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.test.tsx

@@ -0,0 +1,100 @@
+import { EventsRegistry } from './EventsRegistry';
+import { NativeEventsReceiver } from '../adapters/NativeEventsReceiver.mock';
+import { CommandsObserver } from './CommandsObserver';
+
+describe('EventsRegistry', () => {
+  let uut: EventsRegistry;
+  const mockNativeEventsReceiver = new NativeEventsReceiver();
+  let commandsObserver: CommandsObserver;
+  const mockScreenEventsRegistry = {} as any;
+
+  beforeEach(() => {
+    commandsObserver = new CommandsObserver();
+    uut = new EventsRegistry(mockNativeEventsReceiver, commandsObserver, mockScreenEventsRegistry);
+  });
+
+  it('exposes appLaunched event', () => {
+    const subscription = {};
+    const cb = jest.fn();
+    mockNativeEventsReceiver.registerAppLaunchedListener.mockReturnValueOnce(subscription);
+
+    const result = uut.registerAppLaunchedListener(cb);
+
+    expect(result).toBe(subscription);
+    expect(mockNativeEventsReceiver.registerAppLaunchedListener).toHaveBeenCalledTimes(1);
+    expect(mockNativeEventsReceiver.registerAppLaunchedListener).toHaveBeenCalledWith(cb);
+  });
+
+  it('delegates didAppear to nativeEventsReceiver', () => {
+    const cb = jest.fn();
+    uut.registerComponentDidAppearListener(cb);
+    expect(mockNativeEventsReceiver.registerComponentDidAppearListener).toHaveBeenCalledTimes(1);
+    expect(mockNativeEventsReceiver.registerComponentDidAppearListener).toHaveBeenCalledWith(cb);
+  });
+
+  it('delegates didDisappear to nativeEventsReceiver', () => {
+    const cb = jest.fn();
+    uut.registerComponentDidDisappearListener(cb);
+    expect(mockNativeEventsReceiver.registerComponentDidDisappearListener).toHaveBeenCalledTimes(1);
+    expect(mockNativeEventsReceiver.registerComponentDidDisappearListener).toHaveBeenCalledWith(cb);
+  });
+
+  it('delegates commandCompleted to nativeEventsReceiver', () => {
+    const cb = jest.fn();
+    uut.registerCommandCompletedListener(cb);
+    expect(mockNativeEventsReceiver.registerCommandCompletedListener).toHaveBeenCalledTimes(1);
+    expect(mockNativeEventsReceiver.registerCommandCompletedListener).toHaveBeenCalledWith(cb);
+  });
+
+  it('delegates BottomTabsSelected to nativeEventsReceiver', () => {
+    const cb = jest.fn();
+    uut.registerBottomTabSelectedListener(cb);
+    expect(mockNativeEventsReceiver.registerBottomTabSelectedListener).toHaveBeenCalledTimes(1);
+    expect(mockNativeEventsReceiver.registerBottomTabSelectedListener).toHaveBeenCalledWith(cb);
+  });
+
+  it('delegates navigationButtonPressed to nativeEventsReceiver', () => {
+    const cb = jest.fn();
+    uut.registerNavigationButtonPressedListener(cb);
+    expect(mockNativeEventsReceiver.registerNavigationButtonPressedListener).toHaveBeenCalledTimes(1);
+    expect(mockNativeEventsReceiver.registerNavigationButtonPressedListener).toHaveBeenCalledWith(cb);
+  });
+
+  it('delegates searchBarUpdated to nativeEventsReceiver', () => {
+    const cb = jest.fn();
+    uut.registerSearchBarUpdatedListener(cb);
+    expect(mockNativeEventsReceiver.registerSearchBarUpdatedListener).toHaveBeenCalledTimes(1);
+    expect(mockNativeEventsReceiver.registerSearchBarUpdatedListener).toHaveBeenCalledWith(cb);
+  });
+
+  it('delegates searchBarCancelPressed to nativeEventsReceiver', () => {
+    const cb = jest.fn();
+    uut.registerSearchBarCancelPressedListener(cb);
+    expect(mockNativeEventsReceiver.registerSearchBarCancelPressedListener).toHaveBeenCalledTimes(1);
+    expect(mockNativeEventsReceiver.registerSearchBarCancelPressedListener).toHaveBeenCalledWith(cb);
+  });
+
+  it('delegates registerCommandListener to commandObserver', () => {
+    const cb = jest.fn();
+    const result = uut.registerCommandListener(cb);
+    expect(result).toBeDefined();
+    commandsObserver.notify('theCommandName', { x: 1 });
+    expect(cb).toHaveBeenCalledTimes(1);
+    expect(cb).toHaveBeenCalledWith('theCommandName', { x: 1 });
+  });
+
+  it('registerCommandListener unregister', () => {
+    const cb = jest.fn();
+    const result = uut.registerCommandListener(cb);
+    result.remove();
+    commandsObserver.notify('theCommandName', { x: 1 });
+    expect(cb).not.toHaveBeenCalled();
+  });
+
+  it(`delegates bindComponent to ComponentObserver`, () => {
+    const subscription = {};
+    mockScreenEventsRegistry.bindComponent = jest.fn();
+    mockScreenEventsRegistry.bindComponent.mockReturnValueOnce(subscription);
+    expect(uut.bindComponent({} as React.Component<any>)).toEqual(subscription);
+  });
+});

lib/src/events/EventsRegistry.ts

@@ -1,31 +1,56 @@
 import { NativeEventsReceiver } from '../adapters/NativeEventsReceiver';
 import { CommandsObserver } from './CommandsObserver';
 import { EventSubscription } from '../interfaces/EventSubscription';
+import { ComponentEventsObserver } from './ComponentEventsObserver';
+import {
+  ComponentDidAppearEvent,
+  ComponentDidDisappearEvent,
+  NavigationButtonPressedEvent,
+  SearchBarUpdatedEvent,
+  SearchBarCancelPressedEvent
+} from '../interfaces/ComponentEvents';
+import { CommandCompletedEvent, BottomTabSelectedEvent } from '../interfaces/Events';
 
 export class EventsRegistry {
-  constructor(private nativeEventsReceiver: NativeEventsReceiver, private commandsObserver: CommandsObserver) { }
+  constructor(private nativeEventsReceiver: NativeEventsReceiver, private commandsObserver: CommandsObserver, private componentEventsObserver: ComponentEventsObserver) { }
 
   public registerAppLaunchedListener(callback: () => void): EventSubscription {
     return this.nativeEventsReceiver.registerAppLaunchedListener(callback);
   }
 
-  public registerComponentDidAppearListener(callback: (componentId: string, componentName: string) => void): EventSubscription {
-    return this.nativeEventsReceiver.registerComponentDidAppearListener(({ componentId, componentName }) => callback(componentId, componentName));
+  public registerComponentDidAppearListener(callback: (event: ComponentDidAppearEvent) => void): EventSubscription {
+    return this.nativeEventsReceiver.registerComponentDidAppearListener(callback);
   }
 
-  public registerComponentDidDisappearListener(callback: (componentId: string, componentName: string) => void): EventSubscription {
-    return this.nativeEventsReceiver.registerComponentDidDisappearListener(({ componentId, componentName }) => callback(componentId, componentName));
+  public registerComponentDidDisappearListener(callback: (event: ComponentDidDisappearEvent) => void): EventSubscription {
+    return this.nativeEventsReceiver.registerComponentDidDisappearListener(callback);
   }
 
-  public registerCommandListener(callback: (name: string, params: any) => void): EventSubscription {
-    return this.commandsObserver.register(callback);
+  public registerCommandCompletedListener(callback: (event: CommandCompletedEvent) => void): EventSubscription {
+    return this.nativeEventsReceiver.registerCommandCompletedListener(callback);
+  }
+
+  public registerBottomTabSelectedListener(callback: (event: BottomTabSelectedEvent) => void): EventSubscription {
+    return this.nativeEventsReceiver.registerBottomTabSelectedListener(callback);
+  }
+
+  public registerNavigationButtonPressedListener(callback: (event: NavigationButtonPressedEvent) => void): EventSubscription {
+    return this.nativeEventsReceiver.registerNavigationButtonPressedListener(callback);
   }
 
-  public registerCommandCompletedListener(callback: (commandId: string, completionTime: number, params: any) => void): EventSubscription {
-    return this.nativeEventsReceiver.registerCommandCompletedListener(({ commandId, completionTime, params }) => callback(commandId, completionTime, params));
+  public registerSearchBarUpdatedListener(callback: (event: SearchBarUpdatedEvent) => void): EventSubscription {
+    return this.nativeEventsReceiver.registerSearchBarUpdatedListener(callback);
+  }
+
+  public registerSearchBarCancelPressedListener(callback: (event: SearchBarCancelPressedEvent) => void): EventSubscription {
+    return this.nativeEventsReceiver.registerSearchBarCancelPressedListener(callback);
+  }
+
+  public registerCommandListener(callback: (name: string, params: any) => void): EventSubscription {
+    return this.commandsObserver.register(callback);
   }
 
-  public registerNativeEventListener(callback: (name: string, params: any) => void): EventSubscription {
-    return this.nativeEventsReceiver.registerNativeEventListener(({ name, params }) => callback(name, params));
+  public bindComponent(component: React.Component<any>): EventSubscription {
+    return this.componentEventsObserver.bindComponent(component);
   }
 }

lib/src/interfaces/ComponentEvents.ts

@@ -0,0 +1,24 @@
+export interface ComponentEvent {
+  componentId: string;
+}
+
+export interface ComponentDidAppearEvent extends ComponentEvent {
+  componentName: string;
+}
+
+export interface ComponentDidDisappearEvent extends ComponentEvent {
+  componentName: string;
+}
+
+export interface NavigationButtonPressedEvent extends ComponentEvent {
+  buttonId: string;
+}
+
+export interface SearchBarUpdatedEvent extends ComponentEvent {
+  text: string;
+  isFocused: boolean;
+}
+
+export interface SearchBarCancelPressedEvent extends ComponentEvent {
+  componentName?: string;
+}

lib/src/interfaces/Events.ts

@@ -0,0 +1,10 @@
+export interface CommandCompletedEvent {
+  commandId: string;
+  completionTime: number;
+  params: any;
+}
+
+export interface BottomTabSelectedEvent {
+  selectedTabIndex: number;
+  unselectedTabIndex: number;
+}

playground/src/screens/CustomRoundedButton.js

@@ -8,11 +8,13 @@ const {
   Alert,
   Platform
 } = require('react-native');
+const { Navigation } = require('react-native-navigation');
 
 class CustomRoundedButton extends Component {
 
   constructor(props) {
     super(props);
+    this.subscription = Navigation.events().bindComponent(this);
     this.state = {};
   }
 
@@ -29,6 +31,7 @@ class CustomRoundedButton extends Component {
   }
 
   componentWillUnmount() {
+    this.subscription.remove();
     console.log('RNN', `CRB.componentWillUnmount`);
   }
 

playground/src/screens/CustomTopBar.js

@@ -8,12 +8,14 @@ const {
   Alert,
   Platform
 } = require('react-native');
+const { Navigation } = require('react-native-navigation');
 
 class CustomTopBar extends Component {
 
   constructor(props) {
     super(props);
     this.state = {};
+    this.subscription = Navigation.events().bindComponent(this);
   }
 
   componentDidAppear() {
@@ -30,6 +32,7 @@ class CustomTopBar extends Component {
 
   componentWillUnmount() {
     console.log('RNN', `CTB.componentWillUnmount`);
+    this.subscription.remove();
   }
 
   render() {

playground/src/screens/LifecycleScreen.js

@@ -13,6 +13,7 @@ class LifecycleScreen extends Component {
     this.state = {
       text: 'nothing yet'
     };
+    this.subscription = Navigation.events().bindComponent(this);
   }
 
   componentDidAppear() {
@@ -24,11 +25,12 @@ class LifecycleScreen extends Component {
   }
 
   componentWillUnmount() {
+    this.subscription.remove();
     alert('componentWillUnmount'); // eslint-disable-line no-alert
   }
 
-  onNavigationButtonPressed(id) {
-    alert(`onNavigationButtonPressed: ${id}`); // eslint-disable-line no-alert
+  navigationButtonPressed(id) {
+    alert(`navigationButtonPressed: ${id}`); // eslint-disable-line no-alert
   }
 
   render() {

playground/src/screens/OptionsScreen.js

@@ -15,6 +15,11 @@ const FAB = 'fab';
 const TOPBAR_HEIGHT = 67;
 
 class OptionsScreen extends Component {
+  constructor(props) {
+    super(props);
+    Navigation.events().bindComponent(this);
+  }
+
   static get options() {
     return {
       statusBar: {
@@ -137,8 +142,8 @@ class OptionsScreen extends Component {
     );
   }
 
-  onNavigationButtonPressed(id) {
-    if (id === BUTTON_ONE) {
+  navigationButtonPressed({buttonId}) {
+    if (buttonId === BUTTON_ONE) {
       Navigation.mergeOptions(this.props.componentId, {
         topBar: {
           rightButtons: [{
@@ -155,7 +160,7 @@ class OptionsScreen extends Component {
           leftButtons: []
         }
       });
-    } else if (id === BUTTON_TWO) {
+    } else if (buttonId === BUTTON_TWO) {
       Navigation.mergeOptions(this.props.componentId, {
         topBar: {
           rightButtons: [{
@@ -173,7 +178,7 @@ class OptionsScreen extends Component {
           }]
         }
       });
-    } else if (id === BUTTON_LEFT) {
+    } else if (buttonId === BUTTON_LEFT) {
       Navigation.pop(this.props.componentId);
     }
   }

playground/src/screens/PushedScreen.js

@@ -1,10 +1,7 @@
 const _ = require('lodash');
-
 const React = require('react');
 const { Component } = require('react');
-
 const { View, Text, Platform } = require('react-native');
-
 const { Navigation } = require('react-native-navigation');
 const Button = require('./Button');
 const testIDs = require('../testIDs');
@@ -53,26 +50,26 @@ class PushedScreen extends Component {
 
   componentDidMount() {
     this.listeners.push(
-      Navigation.events().registerNativeEventListener((name, params) => {
-        if (name === 'previewContext') {
-          const { previewComponentId } = params;
-          this.setState({ previewComponentId });
-        }
-      }),
-      Navigation.events().registerComponentDidAppearListener((componentId, componentName) => {
-        if (this.state.previewComponentId === componentId) {
-          this.setState({ disabled: true });
-        }
-      }),
-      Navigation.events().registerComponentDidDisappearListener((componentId, componentName) => {
-        if (this.state.previewComponentId === componentId) {
-          this.setState({ disabled: false });
+      this.subscription = Navigation.events().registerComponentDidAppearListener((event) => {
+        if (this.state.previewComponentId === event.componentId) {
+          this.setState({ disabled: event.type === 'ComponentDidAppear' });
         }
       })
     );
+    if (Platform.OS === 'ios') {
+      // this.listeners.push(
+      //   Navigation.events().registerNativeEventListener((name, params) => {
+      //     if (name === 'previewContext') {
+      //       const { previewComponentId } = params;
+      //       this.setState({ previewComponentId });
+      //     }
+      //   })
+      // );
+    }
   }
 
   componentWillUnmount() {
+    this.subscription.remove();
     this.listeners.forEach(listener => listener.remove && listener.remove());
   }
 
@@ -83,11 +80,11 @@ class PushedScreen extends Component {
         <Text testID={testIDs.PUSHED_SCREEN_HEADER} style={styles.h1}>{`Pushed Screen`}</Text>
         <Text style={styles.h2}>{`Stack Position: ${stackPosition}`}</Text>
         <Button title='Push' testID={testIDs.PUSH_BUTTON} onPress={this.onClickPush} />
-          {Platform.OS === 'ios' && (
-            <Navigation.Element elementId='PreviewElement'>
-              <Button testID={testIDs.SHOW_PREVIEW_BUTTON} onPress={this.onClickPush} onPressIn={this.onClickShowPreview} title='Push Preview' />
-            </Navigation.Element>
-          )}
+        {Platform.OS === 'ios' && (
+          <Navigation.Element elementId='PreviewElement'>
+            <Button testID={testIDs.SHOW_PREVIEW_BUTTON} onPress={this.onClickPush} onPressIn={this.onClickShowPreview} title='Push Preview' />
+          </Navigation.Element>
+        )}
         <Button title='Pop' testID={testIDs.POP_BUTTON} onPress={this.onClickPop} />
         <Button title='Pop Previous' testID={testIDs.POP_PREVIOUS_BUTTON} onPress={this.onClickPopPrevious} />
         <Button title='Pop To Root' testID={testIDs.POP_TO_ROOT} onPress={this.onClickPopToRoot} />

playground/src/screens/SearchScreen.js

@@ -38,6 +38,7 @@ class SearchControllerScreen extends Component {
     this.state = {
       query: ''
     };
+    Navigation.events().bindComponent(this);
   }
 
   filteredData() {
@@ -79,8 +80,8 @@ class SearchControllerScreen extends Component {
     );
   }
 
-  onSearchBarUpdated(query, isFocused) {
-    this.setState({ query, isFocused });
+  searchBarUpdated({text, isFocused}) {
+    this.setState({ query: text, isFocused });
   }
 }
 

playground/src/screens/StaticLifecycleOverlay.js

@@ -12,17 +12,19 @@ class StaticLifecycleOverlay extends Component {
       events: []
     };
     this.listeners = [];
-    this.listeners.push(Navigation.events().registerComponentDidAppearListener((componentId, componentName) => {
+    this.listeners.push(Navigation.events().registerComponentDidAppearListener((event) => {
+      event.event = 'componentDidAppear';
       this.setState({
-        events: [...this.state.events, { event: 'componentDidAppear', componentId, componentName }]
+        events: [...this.state.events, { ...event }]
       });
     }));
-    this.listeners.push(Navigation.events().registerComponentDidDisappearListener((componentId, componentName) => {
+    this.listeners.push(Navigation.events().registerComponentDidDisappearListener((event) => {
+      event.event = 'componentDidDisappear';
       this.setState({
-        events: [...this.state.events, { event: 'componentDidDisappear', componentId, componentName }]
+        events: [...this.state.events, { ...event }]
       });
     }));
-    this.listeners.push(Navigation.events().registerCommandCompletedListener((commandId, completionTime, params) => {
+    this.listeners.push(Navigation.events().registerCommandCompletedListener(({commandId}) => {
       this.setState({
         events: [...this.state.events, { event: 'commandCompleted', commandId }]
       });
@@ -62,14 +64,14 @@ class StaticLifecycleOverlay extends Component {
   }
 
   renderDismissButton = () => {
-  return (
-    <TouchableOpacity
-      style={styles.dismissBtn}
-      onPress={() => Navigation.dismissOverlay(this.props.componentId)}
-    >
-      <Text testID={testIDs.DISMISS_BUTTON} style={{ color: 'red', alignSelf: 'center' }}>X</Text>
-    </TouchableOpacity>
-  );
+    return (
+      <TouchableOpacity
+        style={styles.dismissBtn}
+        onPress={() => Navigation.dismissOverlay(this.props.componentId)}
+      >
+        <Text testID={testIDs.DISMISS_BUTTON} style={{ color: 'red', alignSelf: 'center' }}>X</Text>
+      </TouchableOpacity>
+    );
   }
 }
 module.exports = StaticLifecycleOverlay;

playground/src/screens/TopBarBackground.js

@@ -4,11 +4,13 @@ const {
   StyleSheet,
   View
 } = require('react-native');
+const { Navigation } = require('react-native-navigation');
 
 class TopBarBackground extends Component {
 
   constructor(props) {
     super(props);
+    this.subscription = Navigation.events().bindComponent(this);
     this.state = {};
     this.dots = new Array(55).fill('').map((ignored, i) => <View key={'dot' + i} style={[styles.dot, {backgroundColor: this.props.color}]}/>);
   }
@@ -27,6 +29,7 @@ class TopBarBackground extends Component {
 
   componentWillUnmount() {
     console.log('RNN', `TBB.componentWillUnmount`);
+    this.subscription.remove();
   }
 
   render() {

scripts/gen-docs/ClassParser.ts

@@ -1,4 +1,3 @@
-import * as Handlebars from 'handlebars';
 import * as Typedoc from 'typedoc';
 
 export interface PropertyContext {
@@ -16,6 +15,7 @@ export interface MethodContext {
   arguments: ArgumentContext[];
   returnType: string;
   source: string;
+  line: number;
   comment?: string;
 }
 
@@ -42,16 +42,28 @@ export class ClassParser {
 
   private parseMethods(reflection: Typedoc.DeclarationReflection): MethodContext[] {
     const methodReflections = reflection.getChildrenByKind(Typedoc.ReflectionKind.Method);
+    const methods = methodReflections.map((m) => this.parseMethod(m))
+      .filter((m) => !m.source.includes('/node_modules/'))
+      .sort((a, b) => a.line - b.line);
+    return methods;
+  }
 
-    methodReflections.sort((a, b) => a.sources[0].line - b.sources[0].line);
-
-    return methodReflections.map((methodReflection) => ({
-      name: methodReflection.name,
-      arguments: this.parseArguments(methodReflection.signatures[0].parameters || []),
-      returnType: methodReflection.signatures[0].type.toString(),
-      source: `${this.sourceLinkPrefix}/${methodReflection.sources[0].fileName}#L${methodReflection.sources[0].line}`,
-      comment: methodReflection.signatures[0].comment ? methodReflection.signatures[0].comment.shortText : ''
-    }));
+  private parseMethod(methodReflection: Typedoc.DeclarationReflection) {
+    const name = methodReflection.name;
+    const line = methodReflection.sources[0].line;
+    const fileName = methodReflection.sources[0].fileName;
+    const source = `${this.sourceLinkPrefix}/${fileName}#L${line}`;
+    const comment = methodReflection.signatures[0].comment ? methodReflection.signatures[0].comment.shortText : '';
+    const args = this.parseArguments(methodReflection.signatures[0].parameters || []);
+    const returnType = methodReflection.signatures[0].type.toString();
+    return {
+      name,
+      arguments: args,
+      returnType,
+      source,
+      line,
+      comment
+    };
   }
 
   private parseArguments(parameters: Typedoc.ParameterReflection[]): ArgumentContext[] {