Pass componentName to NavigationProps (#7757)

* Pass componentName to NavigationProps

* Update NavigationComponentProps.ts

Author: yogevbd

lib/src/components/ComponentWrapper.test.tsx

@@ -117,6 +117,7 @@ describe('ComponentWrapper', () => {
     renderer.create(<NavigationComponent componentId={'component123'} />);
     expect(myComponentProps).toEqual({
       componentId: 'component123',
+      componentName,
       numberProp: 1,
       stringProp: 'hello',
       objectProp: { a: 2 },
@@ -251,7 +252,10 @@ describe('ComponentWrapper', () => {
     const NavigationComponent = uut.wrap(componentName, generator, store, componentEventsObserver);
     const tree = renderer.create(<NavigationComponent componentId={'component123'} />);
     expect(tree.root.findByType(View)).toBeDefined();
-    expect(tree.root.findByType(MyComponent).props).toEqual({ componentId: 'component123' });
+    expect(tree.root.findByType(MyComponent).props).toEqual({
+      componentId: 'component123',
+      componentName,
+    });
   });
 
   it('sets component instance in store when constructed', () => {

lib/src/components/ComponentWrapper.tsx

@@ -79,7 +79,11 @@ export class ComponentWrapper {
 
       render() {
         return (
-          <GeneratedComponentClass {...this.state.allProps} componentId={this.state.componentId} />
+          <GeneratedComponentClass
+            {...this.state.allProps}
+            componentId={this.state.componentId}
+            componentName={componentName}
+          />
         );
       }
 

lib/src/interfaces/NavigationComponent.ts

@@ -9,11 +9,11 @@ import {
   ComponentDidAppearEvent,
   ComponentDidDisappearEvent,
 } from './ComponentEvents';
-import { NavigationComponentProps } from './NavigationComponentProps';
+import { NavigationProps } from './NavigationComponentProps';
 import { Options } from './Options';
 
 export class NavigationComponent<Props = {}, State = {}, Snapshot = any> extends React.Component<
-  Props & NavigationComponentProps,
+  Props & NavigationProps,
   State,
   Snapshot
 > {

lib/src/interfaces/NavigationComponentProps.ts

@@ -1,3 +1,11 @@
+/**
+ * @deprecated This type replaced with NavigationProps
+ */
 export interface NavigationComponentProps {
   componentId: string;
 }
+
+export interface NavigationProps {
+  componentId: string;
+  componentName: string;
+}

lib/src/interfaces/NavigationFunctionComponent.ts

@@ -1,8 +1,8 @@
 import React from 'react';
-import { NavigationComponentProps } from './NavigationComponentProps';
+import { NavigationProps } from './NavigationComponentProps';
 import { Options } from './Options';
 
 export interface NavigationFunctionComponent<Props = {}>
-  extends React.FunctionComponent<Props & NavigationComponentProps> {
-  options?: ((props: Props & NavigationComponentProps) => Options) | Options;
+  extends React.FunctionComponent<Props & NavigationProps> {
+  options?: ((props: Props & NavigationProps) => Options) | Options;
 }

playground/src/components/TopBarBackground.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
 import { StyleSheet, View, ViewStyle } from 'react-native';
-import { NavigationComponentProps } from 'react-native-navigation';
+import { NavigationProps } from 'react-native-navigation';
 
-interface TopBarBackgroundProps extends NavigationComponentProps {
+interface TopBarBackgroundProps extends NavigationProps {
   color: string;
 }
 

playground/src/screens/Alert.tsx

@@ -1,9 +1,9 @@
 import React from 'react';
 import { StyleSheet, Text, Button, View, ViewStyle, TextStyle } from 'react-native';
-import { Navigation, NavigationComponentProps } from 'react-native-navigation';
+import { Navigation, NavigationProps } from 'react-native-navigation';
 import testIDs from '../testIDs';
 
-interface Props extends NavigationComponentProps {
+interface Props extends NavigationProps {
   title: string;
   message: string;
 }

playground/src/screens/BackButtonScreen.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { NavigationComponentProps, Options } from 'react-native-navigation';
+import { NavigationProps, Options } from 'react-native-navigation';
 import Root from '../components/Root';
 import Button from '../components/Button';
 import Screens from './Screens';
@@ -17,7 +17,7 @@ const {
   BACK_BUTTON,
 } = testIDs;
 
-export default class BackButtonScreen extends React.Component<NavigationComponentProps> {
+export default class BackButtonScreen extends React.Component<NavigationProps> {
   visible: boolean = true;
   static options(): Options {
     return {

playground/src/screens/Button.tsx

@@ -9,9 +9,9 @@ import {
   ViewStyle,
   TextStyle,
 } from 'react-native';
-import { Navigation, NavigationComponentProps } from 'react-native-navigation';
+import { Navigation, NavigationProps } from 'react-native-navigation';
 
-interface Props extends NavigationComponentProps {
+interface Props extends NavigationProps {
   title: string;
   accessibilityLabel?: string;
   color: string;

playground/src/screens/ContextScreen.tsx

@@ -1,10 +1,10 @@
 import React from 'react';
 import { Text, Button, StyleSheet, ViewStyle, TextStyle } from 'react-native';
-import { NavigationComponentProps } from 'react-native-navigation';
+import { NavigationProps } from 'react-native-navigation';
 import Root from '../components/Root';
 import { GlobalContext, Context } from '../context';
 
-export default class ContextScreen extends React.Component<NavigationComponentProps> {
+export default class ContextScreen extends React.Component<NavigationProps> {
   static contextType = Context;
 
   static options() {