Allow to update props for a specific component (#5612)

This commit adds support to update props of screen or custom button/title via the mergeOptions api.

```js
Navigation.mergeOptions('myComponentId', {
  passProps: {
    text: 'new value'
  }
});
```

.gitignore

@@ -1,6 +1,7 @@
 dist
 .vscode/
 package-lock.json
+.history/
 
 ############
 # Node

docs/api/Store.md

@@ -32,9 +32,9 @@
 
 ---
 
-## cleanId
+## clearComponent
 
-`cleanId(id: string): void`
+`clearComponent(id: string): void`
 
 [source](https://github.com/wix/react-native-navigation/blob/v2/lib/src/components/Store.ts#L23)
 

e2e/Buttons.test.js

@@ -0,0 +1,48 @@
+const Utils = require('./Utils');
+const TestIDs = require('../playground/src/testIDs');
+
+const { elementById, elementByLabel } = Utils;
+
+describe('Buttons', () => {
+  beforeEach(async () => {
+    await device.relaunchApp();
+    await elementById(TestIDs.OPTIONS_TAB).tap();
+    await elementById(TestIDs.GOTO_BUTTONS_SCREEN).tap();
+  });
+
+  it('sets right buttons', async () => {
+    await expect(elementById(TestIDs.BUTTON_ONE)).toBeVisible();
+    await expect(elementById(TestIDs.ROUND_BUTTON)).toBeVisible();
+  });
+
+  it('set left buttons', async () => {
+    await expect(elementById(TestIDs.LEFT_BUTTON)).toBeVisible();
+  });
+
+  it('pass props to custom button component', async () => {
+    await expect(elementByLabel('Two')).toExist();
+  });
+
+  it('pass props to custom button component should exist after push pop', async () => {
+    await expect(elementByLabel('Two')).toExist();
+    await elementById(TestIDs.PUSH_BTN).tap();
+    await elementById(TestIDs.POP_BTN).tap();
+    await expect(elementByLabel('Two')).toExist();
+  });
+
+  it('custom button is clickable', async () => {
+    await elementByLabel('Two').tap();
+    await expect(elementByLabel('Thanks for that :)')).toExist();
+  });
+
+  it(':ios: Reseting buttons should unmount button react view', async () => {
+    await elementById(TestIDs.SHOW_LIFECYCLE_BTN).tap();
+    await elementById(TestIDs.RESET_BUTTONS).tap();
+    await expect(elementByLabel('Button component unmounted')).toBeVisible();
+  });
+
+  it('change button props without rendering all buttons', async () => {
+    await elementById(TestIDs.CHANGE_BUTTON_PROPS).tap();
+    await expect(elementByLabel('Three')).toBeVisible();
+  });
+});

e2e/Options.test.js

@@ -27,31 +27,6 @@ describe('Options', () => {
     await expect(elementById(TestIDs.TOP_BAR)).toBeVisible();
   });
 
-  it('sets right buttons', async () => {
-    await expect(elementById(TestIDs.BUTTON_ONE)).toBeVisible();
-    await expect(elementById(TestIDs.ROUND_BUTTON)).toBeVisible();
-  });
-
-  it('set left buttons', async () => {
-    await expect(elementById(TestIDs.LEFT_BUTTON)).toBeVisible();
-  });
-
-  it('pass props to custom button component', async () => {
-    await expect(elementByLabel('Two')).toExist();
-  });
-
-  it('pass props to custom button component should exist after push pop', async () => {
-    await expect(elementByLabel('Two')).toExist();
-    await elementById(TestIDs.PUSH_BTN).tap();
-    await elementById(TestIDs.POP_BTN).tap();
-    await expect(elementByLabel('Two')).toExist();
-  });
-
-  it('custom button is clickable', async () => {
-    await elementByLabel('Two').tap();
-    await expect(elementByLabel('Thanks for that :)')).toExist();
-  });
-
   it('default options should apply to all screens in stack', async () => {
     await elementById(TestIDs.HIDE_TOPBAR_DEFAULT_OPTIONS).tap();
     await expect(elementById(TestIDs.TOP_BAR)).toBeVisible();
@@ -88,12 +63,6 @@ describe('Options', () => {
     await expect(elementByLabel('Styling Options')).toBeVisible();
   });
 
-  it(':ios: Reseting buttons should unmount button react view', async () => {
-    await elementById(TestIDs.SHOW_LIFECYCLE_BTN).tap();
-    await elementById(TestIDs.RESET_BUTTONS).tap();
-    await expect(elementByLabel('Button component unmounted')).toBeVisible();
-  });
-
   xit('hides topBar onScroll down and shows it on scroll up', async () => {
     await elementById(TestIDs.PUSH_OPTIONS_BUTTON).tap();
     await elementById(TestIDs.SCROLLVIEW_SCREEN_BUTTON).tap();

lib/src/commands/Commands.ts

@@ -55,7 +55,7 @@ export class Commands {
 
   public mergeOptions(componentId: string, options: Options) {
     const input = _.cloneDeep(options);
-    this.optionsProcessor.processOptions(input);
+    this.optionsProcessor.processOptions(input, componentId);
 
     this.nativeCommandsSender.mergeOptions(componentId, input);
     this.commandsObserver.notify('mergeOptions', { componentId, options });
@@ -64,7 +64,7 @@ export class Commands {
   public showModal(layout: Layout) {
     const layoutCloned = _.cloneDeep(layout);
     const layoutNode = this.layoutTreeParser.parse(layoutCloned);
-    
+
     const commandId = this.uniqueIdProvider.generate('showModal');
     this.commandsObserver.notify('showModal', { commandId, layout: layoutNode });
     this.layoutTreeCrawler.crawl(layoutNode);

lib/src/commands/OptionsProcessor.test.ts

@@ -135,4 +135,14 @@ describe('navigation options', () => {
     expect(options.topBar.title.component.passProps).toBeUndefined();
     expect(options.topBar.background.component.passProps).toBeUndefined();
   });
+
+  it('calls store when component has passProps component id and values', () => {
+    const props = { prop: 'updated prop' };
+    const options = { passProps: props };
+
+    uut.processOptions(options, 'component1');
+
+    verify(mockedStore.setPropsForId('component1', props)).called();
+    expect(options.passProps).toBeUndefined();
+  });
 });

lib/src/commands/OptionsProcessor.ts

@@ -14,17 +14,19 @@ export class OptionsProcessor {
     private assetService: AssetService,
   ) {}
 
-  public processOptions(options: Options) {
-    this.processObject(options);
+  public processOptions(options: Options, componentId?: string) {
+    this.processObject(options, componentId);
   }
 
-  private processObject(objectToProcess: object) {
+  private processObject(objectToProcess: object, componentId?: string) {
     _.forEach(objectToProcess, (value, key) => {
       this.processColor(key, value, objectToProcess);
+
       if (!value) {
         return;
       }
 
+      this.processProps(key, value, objectToProcess, componentId);
       this.processComponent(key, value, objectToProcess);
       this.processImage(key, value, objectToProcess);
       this.processButtonsPassProps(key, value);
@@ -72,4 +74,11 @@ export class OptionsProcessor {
       options[key].passProps = undefined;
     }
   }
+
+  private processProps(key: string, value: any, options: Record<string, any>, componentId?: string) {
+    if (key === 'passProps' && componentId && value) {
+      this.store.setPropsForId(componentId, value);
+      options[key] = undefined;
+    }
+  }
 }

lib/src/components/ComponentWrapper.test.tsx

@@ -96,13 +96,18 @@ describe('ComponentWrapper', () => {
 
   it('updates props from store into inner component', () => {
     const NavigationComponent = uut.wrap(componentName, () => MyComponent, store, componentEventsObserver);
-    const tree = renderer.create(<TestParent ChildClass={NavigationComponent} />);
+    renderer.create(<TestParent ChildClass={NavigationComponent} />);
+    expect(myComponentProps.myProp).toEqual(undefined);
     store.setPropsForId('component1', { myProp: 'hello' });
+    expect(myComponentProps.myProp).toEqual('hello');
+  });
+
+  it('updates props from state into inner component', () => {
+    const NavigationComponent = uut.wrap(componentName, () => MyComponent, store, componentEventsObserver);
+    const tree = renderer.create(<TestParent ChildClass={NavigationComponent} />);
     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', () => {
@@ -157,6 +162,12 @@ describe('ComponentWrapper', () => {
     expect(tree.root.findByType(MyComponent).props).toEqual({componentId: 'component123'});
   });
 
+  it('sets component instance in store when constructed', () => {
+    const NavigationComponent = uut.wrap(componentName, () => MyComponent, store, componentEventsObserver);
+    renderer.create(<NavigationComponent componentId={'component1'} />);
+    expect(store.getComponentInstance('component1')).toBeTruthy();
+  });
+
   describe(`register with redux store`, () => {
     class MyReduxComp extends React.Component<any> {
       static options() {
@@ -179,7 +190,7 @@ describe('ComponentWrapper', () => {
     const ConnectedComp = require('react-redux').connect(mapStateToProps)(MyReduxComp);
     const ReduxProvider = require('react-redux').Provider;
     const initialState: RootState = { txt: 'it just works' };
-    const reduxStore = require('redux').createStore((state = initialState) => state);
+    const reduxStore = require('redux').createStore((state: RootState = initialState) => state);
 
     it(`wraps the component with a react-redux provider with passed store`, () => {
       const NavigationComponent = uut.wrap(componentName, () => ConnectedComp, store, componentEventsObserver, undefined, ReduxProvider, reduxStore);

lib/src/components/ComponentWrapper.tsx

@@ -10,6 +10,10 @@ import { ComponentEventsObserver } from '../events/ComponentEventsObserver';
 interface HocState { componentId: string; allProps: {}; }
 interface HocProps { componentId: string; }
 
+export interface IWrappedComponent extends React.Component {
+  setProps(newProps: Record<string, any>): void;
+}
+
 export class ComponentWrapper {
   wrap(
     componentName: string | number,
@@ -35,10 +39,15 @@ export class ComponentWrapper {
           componentId: props.componentId,
           allProps: {}
         };
+        store.setComponentInstance(props.componentId, this);
+      }
+
+      public setProps(newProps: any) {
+        this.setState({allProps: newProps});
       }
 
       componentWillUnmount() {
-        store.cleanId(this.state.componentId);
+        store.clearComponent(this.state.componentId);
         componentEventsObserver.unmounted(this.state.componentId);
       }
 

lib/src/components/Store.test.ts

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import { Store } from './Store';
+import { IWrappedComponent } from './ComponentWrapper';
 
 describe('Store', () => {
   let uut: Store;
@@ -28,11 +29,34 @@ describe('Store', () => {
     expect(uut.getComponentClassForName('example.mycomponent')).toEqual(MyWrappedComponent);
   });
 
-  it('clean by component id', () => {
+  it('clear props by component id when clear component', () => {
     uut.setPropsForId('refUniqueId', { foo: 'bar' });
+    uut.clearComponent('refUniqueId');
+    expect(uut.getPropsForId('refUniqueId')).toEqual({});
+  });
 
-    uut.cleanId('refUniqueId');
+  it('clear instance by component id when clear component', () => {
+    uut.setComponentInstance('refUniqueId', ({} as IWrappedComponent));
+    uut.clearComponent('refUniqueId');
+    expect(uut.getComponentInstance('refUniqueId')).toEqual(undefined);
+  });
 
-    expect(uut.getPropsForId('refUniqueId')).toEqual({});
+  it('holds component instance by id', () => {
+    uut.setComponentInstance('component1', ({} as IWrappedComponent));
+    expect(uut.getComponentInstance('component1')).toEqual({});
+  });
+
+  it('calls component setProps when set props by id', () => {
+    const instance: any = {setProps: jest.fn()};
+    const props = { foo: 'bar' };
+
+    uut.setComponentInstance('component1', instance);
+    uut.setPropsForId('component1', props);
+
+    expect(instance.setProps).toHaveBeenCalledWith(props);
+  });
+
+  it('not throw exeption when set props by id component not found', () => {
+    expect(() => uut.setPropsForId('component1', { foo: 'bar' })).not.toThrow();
   });
 });

lib/src/components/Store.ts

@@ -1,19 +1,27 @@
 import { ComponentProvider } from 'react-native';
+import { IWrappedComponent } from './ComponentWrapper';
 
 export class Store {
   private componentsByName: Record<string, ComponentProvider> = {};
   private propsById: Record<string, any> = {};
+  private componentsInstancesById: Record<string, IWrappedComponent> = {};
 
   setPropsForId(componentId: string, props: any) {
     this.propsById[componentId] = props;
+    const component = this.componentsInstancesById[componentId];
+
+    if (component) {
+      this.componentsInstancesById[componentId].setProps(props);
+    }
   }
 
   getPropsForId(componentId: string) {
     return this.propsById[componentId] || {};
   }
 
-  cleanId(componentId: string) {
+  clearComponent(componentId: string) {
     delete this.propsById[componentId];
+    delete this.componentsInstancesById[componentId];
   }
 
   setComponentClassForName(componentName: string | number, ComponentClass: ComponentProvider) {
@@ -23,4 +31,12 @@ export class Store {
   getComponentClassForName(componentName: string | number): ComponentProvider | undefined {
     return this.componentsByName[componentName.toString()];
   }
+
+  setComponentInstance(id: string, component: IWrappedComponent): void {
+    this.componentsInstancesById[id] = component;
+  }
+
+  getComponentInstance(id: string): IWrappedComponent {
+    return this.componentsInstancesById[id];
+  }
 }

lib/src/interfaces/Options.ts

@@ -536,15 +536,15 @@ export interface OptionsBottomTabs {
 
 export interface DotIndicatorOptions {
     // default red
-    color?: Color,
+    color?: Color;
     // default 6
-    size?: number,
+    size?: number;
     // default false
-    visible?: boolean,
+    visible?: boolean;
 }
 
 export interface OptionsBottomTab {
-    dotIndicator?: DotIndicatorOptions,
+    dotIndicator?: DotIndicatorOptions;
 
   /**
    * Set the text to display below the icon
@@ -1019,4 +1019,8 @@ setRoot: {
    * @default false
    */
   blurOnUnmount?: boolean;
+  /**
+   * Props to pass to a component
+   */
+  passProps?: Record<string, any>;
 }

package.json

@@ -20,6 +20,7 @@
   "typings": "lib/dist/index.d.ts",
   "scripts": {
     "build": "rm -rf ./lib/dist && tsc",
+    "watch": "rm -rf ./lib/dist && tsc --watch",
     "xcode": "open playground/ios/playground.xcodeproj",
     "install-android": "node ./scripts/install-android",
     "uninstall-android": "cd playground/android && ./gradlew uninstallAll",

playground/src/screens/ButtonsScreen.js

@@ -0,0 +1,105 @@
+const React = require('react');
+const {Component} = require('react');
+const Root = require('../components/Root');
+const Button = require('../components/Button')
+const Navigation = require('../services/Navigation');
+const Screens = require('./Screens');
+const Colors = require('../commons/Colors');
+const {
+  PUSH_BTN,
+  TOP_BAR,
+  ROUND_BUTTON,
+  BUTTON_ONE,
+  LEFT_BUTTON,
+  SHOW_LIFECYCLE_BTN,
+  RESET_BUTTONS,
+  CHANGE_BUTTON_PROPS
+} = require('../testIDs');
+
+class Options extends Component {
+  static options() {
+    return {
+      topBar: {
+        visible: true,
+        testID: TOP_BAR,
+        title: {
+          text: 'Styling Options'
+        },
+        rightButtons: [
+          {
+            id: 'ONE',
+            testID: BUTTON_ONE,
+            text: 'One',
+            color: Colors.primary
+          },
+          {
+            id: 'ROUND',
+            testID: ROUND_BUTTON,
+            component: {
+              id: 'ROUND_COMPONENT',
+              name: Screens.RoundButton,
+              passProps: {
+                title: 'Two'
+              }
+            }
+          }
+        ],
+        leftButtons: [
+          {
+            id: 'LEFT',
+            testID: LEFT_BUTTON,
+            icon: require('../../img/clear.png'),
+            color: Colors.primary
+          }
+        ]
+      }
+    };
+  }
+
+  render() {
+    return (
+      <Root componentId={this.props.componentId}>
+        <Button label='Push' testID={PUSH_BTN} onPress={this.push} />
+        <Button label='Show Lifecycle button' testID={SHOW_LIFECYCLE_BTN} onPress={this.showLifecycleButton} />
+        <Button label='Remove all buttons' testID={RESET_BUTTONS} onPress={this.resetButtons} />
+        <Button label='Change Button Props'  testID={CHANGE_BUTTON_PROPS} onPress={this.changeButtonProps} />
+      </Root>
+    );
+  }
+
+  push = () => Navigation.push(this, Screens.Pushed);
+
+  showLifecycleButton = () => Navigation.mergeOptions(this, {
+    topBar: {
+      rightButtons: [
+        {
+          id: 'ROUND',
+          testID: ROUND_BUTTON,
+          component: {
+            name: Screens.LifecycleButton,
+            passProps: {
+              title: 'Two'
+            }
+          }
+        }
+      ]
+    }
+  });
+
+  resetButtons = () => Navigation.mergeOptions(this, {
+    topBar: {
+      rightButtons: [],
+      leftButtons: []
+    }
+  });
+
+  changeButtonProps = () => {
+    Navigation.mergeOptions('ROUND_COMPONENT', {
+      passProps: {
+        title: 'Three'
+      }
+    });
+  }
+}
+
+module.exports = Options;

playground/src/screens/OptionsScreen.js

@@ -4,21 +4,16 @@ const Root = require('../components/Root');
 const Button = require('../components/Button')
 const Navigation = require('../services/Navigation');
 const Screens = require('./Screens');
-const Colors = require('../commons/Colors');
 const {
   CHANGE_TITLE_BTN,
   HIDE_TOP_BAR_BTN,
   SHOW_TOP_BAR_BTN,
   TOP_BAR,
-  ROUND_BUTTON,
-  BUTTON_ONE,
-  LEFT_BUTTON,
   PUSH_BTN,
   HIDE_TOPBAR_DEFAULT_OPTIONS,
   SHOW_YELLOW_BOX_BTN,
   SET_REACT_TITLE_VIEW,
-  RESET_BUTTONS,
-  SHOW_LIFECYCLE_BTN
+  GOTO_BUTTONS_SCREEN
 } = require('../testIDs');
 
 class Options extends Component {
@@ -29,33 +24,7 @@ class Options extends Component {
         testID: TOP_BAR,
         title: {
           text: 'Styling Options'
-        },
-        rightButtons: [
-          {
-            id: 'ONE',
-            testID: BUTTON_ONE,
-            text: 'One',
-            color: Colors.primary
-          },
-          {
-            id: 'ROUND',
-            testID: ROUND_BUTTON,
-            component: {
-              name: Screens.RoundButton,
-              passProps: {
-                title: 'Two'
-              }
-            }
-          }
-        ],
-        leftButtons: [
-          {
-            id: 'LEFT',
-            testID: LEFT_BUTTON,
-            icon: require('../../img/clear.png'),
-            color: Colors.primary
-          }
-        ]
+        }
       }
     };
   }
@@ -71,36 +40,11 @@ class Options extends Component {
         <Button label='Set React Title View' testID={SET_REACT_TITLE_VIEW} onPress={this.setReactTitleView} />
         <Button label='Show Yellow Box' testID={SHOW_YELLOW_BOX_BTN} onPress={() => console.warn('Yellow Box')} />
         <Button label='StatusBar' onPress={this.statusBarScreen} />
-        <Button label='Show Lifecycle button' testID={SHOW_LIFECYCLE_BTN} onPress={this.showLifecycleButton} />
-        <Button label='Remove all buttons' testID={RESET_BUTTONS} onPress={this.resetButtons} />
+        <Button label='Buttons Screen' testID={GOTO_BUTTONS_SCREEN} onPress={this.goToButtonsScreen} />
       </Root>
     );
   }
 
-  showLifecycleButton = () => Navigation.mergeOptions(this, {
-    topBar: {
-      rightButtons: [
-        {
-          id: 'ROUND',
-          testID: ROUND_BUTTON,
-          component: {
-            name: Screens.LifecycleButton,
-            passProps: {
-              title: 'Two'
-            }
-          }
-        }
-      ]
-    }
-  });
-
-  resetButtons = () => Navigation.mergeOptions(this, {
-    topBar: {
-      rightButtons: [],
-      leftButtons: []
-    }
-  });
-
   changeTitle = () => Navigation.mergeOptions(this, {
     topBar: {
       title: {
@@ -149,6 +93,8 @@ class Options extends Component {
   });
 
   statusBarScreen = () => Navigation.showModal(Screens.StatusBar);
+
+  goToButtonsScreen = () => Navigation.push(this, Screens.Buttons);
 }
 
 module.exports = Options;

playground/src/screens/Screens.js

@@ -11,6 +11,7 @@ module.exports = {
   Pushed: 'Pushed',
   Layouts: 'Layouts',
   Options: 'Options',
+  Buttons: 'Buttons',
   Stack: 'Stack',
   Modal: 'Modal',
   FullScreenModal: 'FullScreenModal',

playground/src/screens/index.js

@@ -23,13 +23,13 @@ function registerScreens() {
   Navigation.registerComponent(Screens.FullScreenModal, () => require('./FullScreenModalScreen'))
   Navigation.registerComponent(Screens.Navigation, () => require('./NavigationScreen'));
   Navigation.registerComponent(Screens.Options, () => require('./OptionsScreen'));
+  Navigation.registerComponent(Screens.Buttons, () => require('./ButtonsScreen'));
   Navigation.registerComponent(Screens.Orientation, () => require('./OrientationScreen'));
   Navigation.registerComponent(Screens.OrientationDetect, () => require('./OrientationDetectScreen'));
   Navigation.registerComponent(Screens.Overlay, () => require('./OverlayScreen'));
   Navigation.registerComponent(Screens.OverlayAlert, () => require('./OverlayAlert'));
   Navigation.registerComponent(Screens.Pushed, () => require('./PushedScreen'));
   Navigation.registerComponent(Screens.ScrollViewOverlay, () => require('./ScrollViewOverlay'));
-  Navigation.registerComponent(Screens.RoundButton, () => require('./RoundedButton'));
   Navigation.registerComponent(Screens.LifecycleButton, () => require('./LifecycleButton'));
   Navigation.registerComponent(Screens.ReactTitleView, () => require('./CustomTopBar'));
   Navigation.registerComponent(Screens.RoundButton, () => require('./RoundedButton'));

playground/src/testIDs.js

@@ -7,6 +7,7 @@ module.exports = {
   LAYOUTS_TAB: 'LAYOUTS_TAB',
   NAVIGATION_TAB: 'NAVIGATION_TAB',
   OPTIONS_TAB: 'OPTIONS_TAB',
+  BUTTONS_TAB: 'BUTTONS_TAB',
   SIDE_MENU_INSIDE_BOTTOM_TABS_BTN: 'SIDE_MENU_INSIDE_BOTTOM_TABS',
   OVERLAY_BTN: 'OVERLAY_BTN',
   SIDE_MENU_BTN: 'SIDE_MENU_BTN',
@@ -130,6 +131,8 @@ module.exports = {
   SET_ROOT:'SET_ROOT',
   RESET_BUTTONS: 'RESET_BUTTONS',
   SHOW_LIFECYCLE_BTN: 'SHOW_LIFECYCLE_BTN',
+  CHANGE_BUTTON_PROPS: 'CHANGE_BUTTON_PROPS',
+  GOTO_BUTTONS_SCREEN: 'GOTO_BUTTONS_SCREEN',
 
   // Elements
   SCROLLVIEW_ELEMENT: `SCROLLVIEW_ELEMENT`,