react-native-navigation 8.7.4 → 8.7.5-snapshot.2301

package/lib/typescript/interfaces/Processors.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Processors.d.ts","sourceRoot":"","sources":["../../../src/interfaces/Processors.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAE5C,MAAM,WAAW,eAAe;IAC9B,CAAC,MAAM,EAAE,MAAM,CAAC,EAAE,CAAC,EAAE,WAAW,EAAE,WAAW,GAAG,MAAM,CAAC,EAAE,CAAC,CAAC;CAC5D;AAED,MAAM,WAAW,gBAAgB,CAAC,CAAC,EAAE,CAAC,GAAG,GAAG;IAC1C,CAAC,KAAK,EAAE,CAAC,EAAE,WAAW,EAAE,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC;CACpD"}

package/lib/typescript/processors/LayoutProcessor.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"LayoutProcessor.d.ts","sourceRoot":"","sources":["../../../src/processors/LayoutProcessor.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,qBAAqB,EAAE,MAAM,yBAAyB,CAAC;AAEhE,OAAO,EAAE,MAAM,EAAE,MAAM,sBAAsB,CAAC;AAC9C,OAAO,EAAE,WAAW,EAAE,MAAM,2BAA2B,CAAC;AAExD,qBAAa,eAAe;IACd,OAAO,CAAC,qBAAqB;gBAArB,qBAAqB,EAAE,qBAAqB;IAEzD,OAAO,CAAC,MAAM,EAAE,MAAM,CAAC,GAAG,CAAC,EAAE,WAAW,EAAE,WAAW,GAAG,MAAM;CAQtE"}

package/lib/typescript/processors/LayoutProcessor.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"LayoutProcessor.test.d.ts","sourceRoot":"","sources":["../../../src/processors/LayoutProcessor.test.ts"],"names":[],"mappings":""}

package/lib/typescript/processors/LayoutProcessorsStore.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"LayoutProcessorsStore.d.ts","sourceRoot":"","sources":["../../../src/processors/LayoutProcessorsStore.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,qBAAqB,EAAE,MAAM,qCAAqC,CAAC;AAC5E,OAAO,EAAE,eAAe,EAAE,MAAM,0BAA0B,CAAC;AAE3D,qBAAa,qBAAqB;IAChC,OAAO,CAAC,gBAAgB,CAAyB;IAE1C,YAAY,CAAC,SAAS,EAAE,eAAe,GAAG,qBAAqB;IAM/D,aAAa,IAAI,eAAe,EAAE;IAIzC,OAAO,CAAC,eAAe;CAGxB"}

package/lib/typescript/processors/LayoutProcessorsStore.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"LayoutProcessorsStore.test.d.ts","sourceRoot":"","sources":["../../../src/processors/LayoutProcessorsStore.test.ts"],"names":[],"mappings":""}

package/lib/typescript/processors/OptionProcessorsStore.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"OptionProcessorsStore.d.ts","sourceRoot":"","sources":["../../../src/processors/OptionProcessorsStore.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,qBAAqB,EAAE,MAAM,qCAAqC,CAAC;AAC5E,OAAO,EAAE,gBAAgB,EAAE,MAAM,0BAA0B,CAAC;AAE5D,qBAAa,qBAAqB;IAChC,OAAO,CAAC,6BAA6B,CAA+C;IAE7E,YAAY,CAAC,CAAC,EACnB,UAAU,EAAE,MAAM,EAClB,SAAS,EAAE,gBAAgB,CAAC,CAAC,CAAC,GAC7B,qBAAqB;IASjB,aAAa,CAAC,UAAU,EAAE,MAAM;IAIvC,OAAO,CAAC,eAAe;CAKxB"}

package/lib/typescript/processors/OptionProcessorsStore.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"OptionProcessorsStore.test.d.ts","sourceRoot":"","sources":["../../../src/processors/OptionProcessorsStore.test.ts"],"names":[],"mappings":""}

package/lib/typescript/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/types.ts"],"names":[],"mappings":"AAAA,OAAO,QAAQ,yBAAyB,CAAC;IACvC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;IAE/B,SAAgB,QAAQ,CAAC,SAAS,EAAE,KAAK,CAAC,cAAc,CAAC,GAAG,CAAC,GAAG,IAAI,CAAC;CACtE"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-navigation",
-  "version": "8.7.4",
+  "version": "8.7.5-snapshot.2301",
   "description": "React Native Navigation - truly native navigation for iOS and Android",
   "license": "MIT",
   "nativePackage": true,
@@ -20,14 +20,20 @@
     "rnn-link": "./autolink/postlink/run.js"
   },
   "main": "./lib/module/index.js",
-  "types": "./lib/typescript/src/index.d.ts",
+  "types": "./lib/typescript/index.d.ts",
   "react-native": "./src/index.ts",
   "exports": {
     ".": {
-      "react-native": "./src/index.ts",
+      "types": "./lib/typescript/index.d.ts",
+      "default": "./lib/module/index.js",
       "source": "./src/index.ts",
-      "types": "./lib/typescript/src/index.d.ts",
-      "default": "./lib/module/index.js"
+      "react-native": "./src/index.ts"
+    },
+    "./Mock": {
+      "types": "./lib/typescript/Mock/index.d.ts",
+      "default": "./lib/module/Mock/index.js",
+      "source": "./src/Mock/index.ts",
+      "react-native": "./src/Mock/index.ts"
     },
     "./package.json": "./package.json"
   },
@@ -76,7 +82,7 @@
   },
   "dependencies": {
     "hoist-non-react-statics": "3.3.2",
-    "lodash": "4.17.21",
+    "lodash": "4.17.23",
     "prop-types": "15.x.x",
     "react-lifecycles-compat": "^3.0.4",
     "tslib": "1.9.3"

package/src/ARCHITECTURE.md

@@ -0,0 +1,301 @@
+# JavaScript/TypeScript Architecture
+
+The JavaScript layer provides the public API and orchestrates communication between React components and native navigation implementations.
+
+## Entry Point
+
+`index.ts` exports the `Navigation` singleton (a `NavigationDelegate` instance) along with re-exports from `Modal`, `EventsRegistry`, `Constants`, and all interfaces. Applications use `Navigation.*` for commands and `Navigation.events().*` for event subscriptions.
+
+## Module Structure
+
+```
+src/
+├── index.ts                 # Main entry point, exports Navigation singleton
+├── Navigation.ts            # NavigationRoot - core orchestrator
+├── NavigationDelegate.ts    # Public API facade
+├── adapters/                # Native bridge layer
+├── commands/                # Command processing
+├── components/              # React component management
+├── events/                  # Event system
+├── interfaces/              # TypeScript type definitions
+└── processors/              # Extensibility hooks
+```
+
+## Core Classes
+
+### NavigationDelegate (Public API)
+**File**: `NavigationDelegate.ts`
+
+Facade providing the public `Navigation` API. All methods proxy to `NavigationRoot`.
+
+```typescript
+// Usage
+import { Navigation } from 'react-native-navigation';
+Navigation.setRoot({ root: { stack: { children: [...] } } });
+```
+
+### NavigationRoot (Core Orchestrator)
+**File**: `Navigation.ts`
+
+Coordinates all subsystems. Constructed with dependencies:
+- `NativeCommandsSender` - sends commands to native
+- `NativeEventsReceiver` - receives events from native
+- `AppRegistryService` - manages React Native component registry
+
+Initializes and coordinates:
+- `Store` - component instance & props storage
+- `ComponentRegistry` - component registration
+- `LayoutTreeParser` - converts layouts to internal nodes
+- `LayoutTreeCrawler` - processes layout trees
+- `Commands` - command execution
+- `EventsRegistry` - event subscriptions
+- `OptionsProcessor` - option processing
+- `LayoutProcessor` - layout transformations
+
+## Adapters Layer
+
+Bridge between JavaScript and native/React Native APIs.
+
+| Adapter | Purpose |
+|---------|---------|
+| `NativeCommandsSender` | Wraps TurboModule for command dispatch |
+| `NativeEventsReceiver` | Wraps NativeEventEmitter for events |
+| `NativeRNNTurboModule` | TurboModule spec interface |
+| `NativeRNNTurboEventEmitter` | TurboModule event emitter spec |
+| `UniqueIdProvider` | Generates unique component/command IDs |
+| `ColorService` | Converts colors to native format |
+| `AssetResolver` | Resolves require() image assets (class: AssetService) |
+| `AppRegistryService` | Registers components with React Native |
+| `Constants` | Platform dimension constants |
+| `TouchablePreview` | 3D Touch / Haptic preview handling |
+
+## Commands Layer
+
+### Commands Class
+**File**: `commands/Commands.ts`
+
+Central command dispatcher. Each navigation command:
+1. Validates input
+2. Processes layout through pipeline
+3. Sends to native via adapter
+4. Returns promise with result
+
+### Processing Pipeline
+
+The pipeline executes in this exact order:
+
+```
+Input Layout (from API)
+       ↓
+1. OptionsCrawler.crawl()         # Extract static options from component classes
+       ↓
+2. LayoutProcessor.process()      # Apply registered layout processors
+       ↓
+3. LayoutTreeParser.parse()       # Convert to internal LayoutNode tree
+       ↓
+4. LayoutTreeCrawler.crawl()      # Process options, save props to Store
+       ↓
+5. OptionsProcessor (during crawl) # Resolve colors, assets, custom processors
+       ↓
+6. NativeCommandsSender           # Send to native module
+```
+
+### LayoutNode (Internal Tree)
+```typescript
+interface LayoutNode {
+  id: string;           // Unique identifier
+  type: LayoutType;     // Component|Stack|BottomTabs|etc
+  data: {
+    name?: string;      // Component name
+    options?: any;      // Processed options
+    passProps?: any;    // Component props (cleared before native)
+  };
+  children: LayoutNode[];
+}
+```
+
+### LayoutType Enum
+```typescript
+enum LayoutType {
+  Component = 'Component',
+  Stack = 'Stack',
+  BottomTabs = 'BottomTabs',
+  SideMenuRoot = 'SideMenuRoot',
+  SideMenuCenter = 'SideMenuCenter',
+  SideMenuLeft = 'SideMenuLeft',
+  SideMenuRight = 'SideMenuRight',
+  TopTabs = 'TopTabs',
+  ExternalComponent = 'ExternalComponent',
+  SplitView = 'SplitView',
+}
+```
+
+## Components Layer
+
+### ComponentRegistry
+**File**: `components/ComponentRegistry.ts`
+
+Manages React component registration and wrapping.
+
+```typescript
+Navigation.registerComponent('ScreenName', () => MyComponent);
+```
+
+### ComponentWrapper
+**File**: `components/ComponentWrapper.tsx`
+
+Higher-order component that:
+- Wraps original component with lifecycle management
+- Stores instance in `Store` for event dispatch
+- Injects `componentId` and `componentName` props
+
+### Store
+**File**: `components/Store.ts`
+
+Centralized storage for:
+- `componentsByName` - registered component providers
+- `componentsInstancesById` - mounted component instances
+- `propsById` - static props by component ID
+- `pendingPropsById` - props awaiting component mount
+- `wrappedComponents` - cached wrapped components
+- `lazyRegistratorFn` - function for lazy component registration
+
+## Events Layer
+
+### EventsRegistry
+**File**: `events/EventsRegistry.ts`
+
+Public API for event subscriptions:
+
+```typescript
+Navigation.events().registerComponentDidAppearListener(({ componentId }) => {});
+Navigation.events().registerCommandCompletedListener(({ commandId }) => {});
+```
+
+### ComponentEventsObserver
+**File**: `events/ComponentEventsObserver.ts`
+
+Dispatches events to component instance methods:
+- `componentWillAppear()`
+- `componentDidAppear()`
+- `componentDidDisappear()`
+- `navigationButtonPressed()`
+- `screenPopped()`
+
+### CommandsObserver
+**File**: `events/CommandsObserver.ts`
+
+Notifies listeners of command lifecycle (start, complete).
+
+## Events (Native → JS)
+
+| Event | Description |
+|-------|-------------|
+| `RNN.AppLaunched` | App initialization complete |
+| `RNN.ComponentWillAppear` | Component about to appear |
+| `RNN.ComponentDidAppear` | Component now visible |
+| `RNN.ComponentDidDisappear` | Component hidden |
+| `RNN.NavigationButtonPressed` | TopBar button tapped |
+| `RNN.BottomTabPressed` | Tab pressed (even if selected) |
+| `RNN.BottomTabSelected` | Tab selection changed |
+| `RNN.BottomTabLongPressed` | Tab long-pressed |
+| `RNN.ModalDismissed` | Modal was dismissed |
+| `RNN.ModalAttemptedToDismiss` | Swipe-to-dismiss attempted |
+| `RNN.ScreenPopped` | Screen removed from stack |
+| `RNN.SearchBarUpdated` | Search text changed |
+| `RNN.SearchBarCancelPressed` | Search cancelled |
+| `RNN.PreviewCompleted` | 3D Touch preview completed |
+| `RNN.CommandCompleted` | Navigation command finished |
+
+## Processors Layer
+
+### OptionProcessorsStore
+**File**: `processors/OptionProcessorsStore.ts`
+
+Registers custom option processors:
+
+```typescript
+Navigation.addOptionProcessor('topBar.title.text', (value, commandName) => {
+  return value.toUpperCase(); // Transform all titles
+});
+```
+
+### LayoutProcessorsStore
+**File**: `processors/LayoutProcessorsStore.ts`
+
+Registers layout transformers:
+
+```typescript
+Navigation.addLayoutProcessor((layout, commandName) => {
+  // Add default options to all components
+  return layout;
+});
+```
+
+## Interfaces
+
+### Layout Types
+**File**: `interfaces/Layout.ts`
+
+```typescript
+interface LayoutRoot {
+  root: Layout;
+  modals?: any[];
+  overlays?: any[];
+}
+
+type Layout = {
+  component?: LayoutComponent;
+  stack?: LayoutStack;
+  bottomTabs?: LayoutBottomTabs;
+  sideMenu?: LayoutSideMenu;
+  splitView?: LayoutSplitView;
+  topTabs?: LayoutTopTabs;
+  externalComponent?: ExternalComponent;
+}
+```
+
+### Options Interface
+**File**: `interfaces/Options.ts` (comprehensive)
+
+Contains all configuration options for:
+- Status bar, navigation bars
+- Top bar (buttons, title, search)
+- Bottom tabs
+- Side menus
+- Modals, overlays
+- Animations
+- Layout parameters
+
+### NavigationComponent
+**File**: `interfaces/NavigationComponent.ts`
+
+Base class for navigation-aware components:
+
+```typescript
+class MyScreen extends NavigationComponent<Props> {
+  static options: Options = { ... };
+
+  componentDidAppear(event) { }
+  navigationButtonPressed(event) { }
+}
+```
+
+## Dependencies
+
+**Production**:
+- `lodash` - utility functions
+- `hoist-non-react-statics` - HOC support
+- `react-lifecycles-compat` - lifecycle polyfill
+- `tslib` - TypeScript helpers
+
+**Peer**:
+- `react`, `react-native` (required)
+- `remx` (optional state management)
+
+## Build Output
+
+Uses `react-native-builder-bob`:
+- **Source**: `src/`
+- **Output**: `lib/`
+- **Targets**: ESM modules + TypeScript declarations

package/src/Mock/Application.tsx

@@ -0,0 +1,30 @@
+import * as React from 'react';
+import { View } from 'react-native';
+import { connect } from './connect';
+
+interface ApplicationProps {
+  entryPoint: () => void;
+}
+
+export const Application = connect(
+  class extends React.Component<ApplicationProps> {
+    constructor(props: ApplicationProps) {
+      super(props);
+      props.entryPoint();
+    }
+
+    render() {
+      const { LayoutComponent } = require('./Components/LayoutComponent');
+      const { LayoutStore } = require('./Stores/LayoutStore');
+      const { Modals } = require('./Components/Modals');
+      const { Overlays } = require('./Components/Overlays');
+      return (
+        <View testID={'Application'}>
+          <LayoutComponent layoutNode={LayoutStore.getLayout()} />
+          <Modals />
+          <Overlays />
+        </View>
+      );
+    }
+  }
+);

package/src/Mock/ComponentProps.tsx

@@ -0,0 +1,6 @@
+import ParentNode from './Layouts/ParentNode';
+
+export interface ComponentProps {
+  layoutNode: ParentNode;
+  backButton?: boolean;
+}

package/src/Mock/Components/BottomTabs.tsx

@@ -0,0 +1,14 @@
+import React, { Component } from 'react';
+import { LayoutComponent } from './LayoutComponent';
+import { ComponentProps } from '../ComponentProps';
+import { connect } from '../connect';
+
+export const BottomTabs = connect(
+  class extends Component<ComponentProps> {
+    render() {
+      return this.props.layoutNode.children.map((child) => {
+        return <LayoutComponent key={child.nodeId} layoutNode={child} />;
+      });
+    }
+  }
+);

package/src/Mock/Components/ComponentScreen.tsx

@@ -0,0 +1,107 @@
+import React, { Component } from 'react';
+import { View, Text, TouchableOpacity, Image, ImageURISource } from 'react-native';
+import { Navigation, ImageResource } from 'react-native-navigation';
+import { ComponentProps } from '../ComponentProps';
+import { VISIBLE_SCREEN_TEST_ID } from '../constants';
+import { LayoutStore } from '../Stores/LayoutStore';
+import { connect } from '../connect';
+import { TopBar } from './TopBar';
+import { events } from '../Stores/EventsStore';
+import _ from 'lodash';
+import { switchTabByIndex } from '../actions/layoutActions';
+
+function isURISource(src: ImageResource | undefined): src is ImageURISource {
+  return !!src && typeof src === 'object' && 'uri' in src;
+}
+
+export const ComponentScreen = connect(
+  class extends Component<ComponentProps> {
+    constructor(props: ComponentProps) {
+      super(props);
+    }
+
+    componentDidMount() {
+      this.props.layoutNode.componentDidMount();
+    }
+
+    isVisible(): boolean {
+      const isVisible = LayoutStore.isVisibleLayout(this.props.layoutNode);
+      return isVisible;
+    }
+
+    renderTabBar() {
+      const bottomTabs = this.props.layoutNode.getBottomTabs();
+      if (!bottomTabs) return null;
+      const bottomTabsOptions = bottomTabs.resolveOptions().bottomTabs;
+      if (bottomTabsOptions?.visible === false) return null;
+      const buttons = bottomTabs!.children!.map((child, i) => {
+        const bottomTabOptions = child.resolveOptions().bottomTab;
+        const icon =
+          (bottomTabs as any).selectedIndex === i
+            ? bottomTabOptions?.selectedIcon
+            : bottomTabOptions?.icon;
+        const iconURI = isURISource(icon) ? icon.uri : undefined;
+        return (
+          <View key={`tab-${i}`}>
+            <TouchableOpacity
+              style={{ padding: 10 }}
+              testID={bottomTabOptions?.testID}
+              onPress={() => {
+                events.invokeBottomTabPressed({
+                  tabIndex: i,
+                });
+                if (_.defaultTo(bottomTabOptions?.selectTabOnPress, true))
+                  switchTabByIndex(this.props.layoutNode.getBottomTabs(), i);
+              }}
+            >
+              <View style={{ justifyContent: 'center', alignItems: 'center' }}>
+                <Text>{bottomTabOptions?.badge}</Text>
+                {iconURI && (
+                  <Image
+                    style={{ width: 18, height: 18, marginBottom: 5 }}
+                    source={{ uri: iconURI }}
+                  />
+                )}
+                <Text style={{ fontSize: 12 }}>{bottomTabOptions?.text || ''}</Text>
+              </View>
+            </TouchableOpacity>
+          </View>
+        );
+      });
+
+      return (
+        <View
+          testID={bottomTabsOptions?.testID}
+          style={{
+            flexDirection: 'row',
+            justifyContent: 'center',
+            width: '100%',
+            backgroundColor: '#F0F2F5',
+          }}
+        >
+          {buttons}
+        </View>
+      );
+    }
+
+    render() {
+      const Component = Navigation.mock.store.getWrappedComponent(this.props.layoutNode.data.name);
+      if (!Component)
+        throw new Error(`${this.props.layoutNode.data.name} has not been registered.`);
+
+      return (
+        <View testID={this.isVisible() ? VISIBLE_SCREEN_TEST_ID : undefined}>
+          {this.props.layoutNode.getStack() && (
+            <TopBar
+              layoutNode={this.props.layoutNode}
+              topBarOptions={this.props.layoutNode.resolveOptions().topBar}
+              backButtonOptions={this.props.layoutNode.resolveOptions().topBar?.backButton}
+            />
+          )}
+          <Component componentId={this.props.layoutNode.nodeId} />
+          {this.renderTabBar()}
+        </View>
+      );
+    }
+  }
+);

package/src/Mock/Components/LayoutComponent.tsx

@@ -0,0 +1,37 @@
+import React, { Component } from 'react';
+import { View } from 'react-native';
+import { BottomTabs } from './BottomTabs';
+import { ComponentProps } from '../ComponentProps';
+import { ComponentScreen } from './ComponentScreen';
+import { Stack } from './Stack';
+import { SideMenuRoot, SideMenuCenter, SideMenuLeft, SideMenuRight } from './SideMenu';
+
+export const LayoutComponent = class extends Component<ComponentProps> {
+  render() {
+    switch (this.props.layoutNode.type) {
+      case 'BottomTabs':
+        return <BottomTabs layoutNode={this.props.layoutNode} />;
+      case 'Stack':
+        return <Stack layoutNode={this.props.layoutNode} />;
+      case 'Component':
+        return <ComponentScreen layoutNode={this.props.layoutNode} />;
+      case 'SideMenuRoot':
+        return <SideMenuRoot layoutNode={this.props.layoutNode} />;
+      case 'SideMenuLeft':
+        return <SideMenuLeft layoutNode={this.props.layoutNode} />;
+      case 'SideMenuCenter':
+        return <SideMenuCenter layoutNode={this.props.layoutNode} />;
+      case 'SideMenuRight':
+        return <SideMenuRight layoutNode={this.props.layoutNode} />;
+    }
+
+    return <View />;
+  }
+  componentDidCatch(error: Error, errorInfo: React.ErrorInfo) {
+    const err = new Error(
+      `Error while trying to render layout ${this.props.layoutNode.nodeId} of type ${this.props.layoutNode.type}: ${error}\n${errorInfo?.componentStack}`
+    );
+    (err as any).cause = error;
+    throw err;
+  }
+};

package/src/Mock/Components/Modals.tsx

@@ -0,0 +1,22 @@
+import React, { Component } from 'react';
+import { View } from 'react-native';
+import { ComponentProps } from '../ComponentProps';
+import { LayoutComponent } from './LayoutComponent';
+import ParentNode from '../Layouts/ParentNode';
+import { LayoutStore } from '../Stores/LayoutStore';
+import { connect } from '../connect';
+
+export const Modals = connect(
+  class extends Component<ComponentProps> {
+    render() {
+      const children = LayoutStore.getModals();
+      return (
+        <View testID={'MODALS'}>
+          {children.map((child: ParentNode) => {
+            return <LayoutComponent key={child.nodeId} layoutNode={child} />;
+          })}
+        </View>
+      );
+    }
+  }
+);

package/src/Mock/Components/NavigationButton.tsx

@@ -0,0 +1,86 @@
+import React, { Component } from 'react';
+import { Button, TouchableOpacity } from 'react-native';
+import { Navigation, OptionsTopBarButton } from 'react-native-navigation';
+import { events } from '../Stores/EventsStore';
+
+interface ButtonProps {
+  button: OptionsTopBarButton;
+  componentId: string;
+}
+
+export const NavigationButton = class extends Component<ButtonProps> {
+  ref = undefined;
+  render() {
+    const { button, componentId } = this.props;
+    if (button.component) return this.renderButtonComponent();
+    return (
+      <Button
+        testID={button.testID}
+        key={button.id}
+        title={button.text || ''}
+        disabled={button.enabled === false}
+        onPress={() =>
+          button.enabled !== false &&
+          events.invokeNavigationButtonPressed({
+            buttonId: button.id,
+            componentId,
+          })
+        }
+      />
+    );
+  }
+
+  renderButtonComponent() {
+    const { button, componentId } = this.props;
+    // @ts-ignore
+    const buttonComponentId = button.component!.componentId;
+    // @ts-ignore
+    const ComponentClass = Navigation.mock.store.getComponentClassForName(button.component.name);
+    if (!ComponentClass) {
+      throw new Error(`Cannot find registered component for: ${button.component?.name}`);
+    }
+    const ButtonComponent = ComponentClass();
+    const props = Navigation.mock.store.getPropsForId(buttonComponentId);
+    return (
+      <TouchableOpacity
+        onPress={() => {
+          if (this.ref) {
+            this.invokeOnClick(
+              // @ts-ignore
+              (this.ref!._reactInternalFiber || this.ref!._reactInternals).return.stateNode
+            );
+          }
+
+          events.invokeNavigationButtonPressed({
+            buttonId: button.id,
+            componentId: componentId,
+          });
+        }}
+        testID={button.testID}
+      >
+        <ButtonComponent
+          key={buttonComponentId}
+          {...props}
+          componentId={buttonComponentId}
+          ref={(ref: any) => (this.ref = ref)}
+        />
+      </TouchableOpacity>
+    );
+  }
+
+  invokeOnClick(stateNode: any) {
+    if (stateNode.children) {
+      // @ts-ignore
+      stateNode.children.forEach((instance) => {
+        if (
+          instance.internalInstanceHandle &&
+          instance.internalInstanceHandle.stateNode.props.onClick
+        ) {
+          instance.internalInstanceHandle.stateNode.props.onClick();
+        }
+
+        this.invokeOnClick(instance);
+      });
+    }
+  }
+};