rename navigationOptions to Options

e2e/ScreenStyle.test.js

@@ -8,7 +8,7 @@ describe('screen style', () => {
     await device.relaunchApp();
   });
 
-  it('declare a navigationOptions on container component', async () => {
+  it('declare a options on container component', async () => {
     await elementById(testIDs.PUSH_OPTIONS_BUTTON).tap();
     await expect(element(by.label('Static Title'))).toBeVisible();
   });

lib/src/commands/Commands.test.js

@@ -31,7 +31,7 @@ describe('Commands', () => {
         children: [],
         data: {
           name: 'com.example.MyScreen',
-          navigationOptions: {}
+          options: {}
         }
       });
     });
@@ -94,7 +94,7 @@ describe('Commands', () => {
         id: 'Component+UNIQUE_ID',
         data: {
           name: 'com.example.MyScreen',
-          navigationOptions: {}
+          options: {}
         },
         children: []
       });
@@ -176,7 +176,7 @@ describe('Commands', () => {
         id: 'Component+UNIQUE_ID',
         data: {
           name: 'com.example.MyScreen',
-          navigationOptions: {}
+          options: {}
         },
         children: []
       });

lib/src/commands/LayoutTreeCrawler.js

@@ -23,19 +23,19 @@ class LayoutTreeCrawler {
   _handleContainer(node) {
     this._assertContainerDataName(node);
     this._savePropsToStore(node);
-    this._applyStaticNavigationOptions(node);
-    OptionsProcessor.processOptions(node.data.navigationOptions);
+    this._applyStaticOptions(node);
+    OptionsProcessor.processOptions(node.data.options);
   }
 
   _savePropsToStore(node) {
     this.store.setPropsForContainerId(node.id, node.data.passProps);
   }
 
-  _applyStaticNavigationOptions(node) {
+  _applyStaticOptions(node) {
     const clazz = this.store.getOriginalContainerClassForName(node.data.name) || {};
     const staticOptions = _.cloneDeep(clazz.navigationOptions) || {};
-    const passedOptions = _.cloneDeep(node.data.navigationOptions) || {};
-    node.data.navigationOptions = _.merge({}, staticOptions, passedOptions);
+    const passedOptions = node.data.options || {};
+    node.data.options = _.merge({}, staticOptions, passedOptions);
   }
 
   _assertKnownLayoutType(type) {

lib/src/commands/LayoutTreeCrawler.test.js

@@ -47,10 +47,10 @@ describe('LayoutTreeCrawler', () => {
     expect(store.getPropsForContainerId('Component+UNIQUE_ID')).toEqual({ myProp: 123 });
   });
 
-  it('Containers: injects navigationOptions from original container class static property', () => {
+  it('Containers: injects options from original container class static property', () => {
     const theStyle = {};
     const MyContainer = class {
-      static get navigationOptions() {
+      static get options() {
         return theStyle;
       }
     };
@@ -58,10 +58,10 @@ describe('LayoutTreeCrawler', () => {
     const node = { type: LayoutTypes.Component, data: { name: 'theContainerName' } };
     store.setOriginalContainerClassForName('theContainerName', MyContainer);
     uut.crawl(node);
-    expect(node.data.navigationOptions).toEqual(theStyle);
+    expect(node.data.options).toEqual(theStyle);
   });
 
-  it('Containers: merges navigationOptions from container class static property with passed options, favoring passed options', () => {
+  it('Containers: merges options from container class static property with passed options, favoring passed options', () => {
     const theStyle = {
       bazz: 123,
       inner: {
@@ -83,12 +83,12 @@ describe('LayoutTreeCrawler', () => {
       }
     };
 
-    const node = { type: LayoutTypes.Component, data: { name: 'theContainerName', navigationOptions: passedOptions } };
+    const node = { type: LayoutTypes.Component, data: { name: 'theContainerName', options: passedOptions } };
     store.setOriginalContainerClassForName('theContainerName', MyContainer);
 
     uut.crawl(node);
 
-    expect(node.data.navigationOptions).toEqual({
+    expect(node.data.options).toEqual({
       aaa: 'exists only in passed',
       bazz: 789,
       inner: {
@@ -98,10 +98,10 @@ describe('LayoutTreeCrawler', () => {
     });
   });
 
-  it('Component: deepClones navigationOptions', () => {
+  it('Component: deepClones options', () => {
     const theStyle = {};
     const MyContainer = class {
-      static get navigationOptions() {
+      static get options() {
         return theStyle;
       }
     };
@@ -109,7 +109,7 @@ describe('LayoutTreeCrawler', () => {
     const node = { type: LayoutTypes.Component, data: { name: 'theContainerName' } };
     store.setOriginalContainerClassForName('theContainerName', MyContainer);
     uut.crawl(node);
-    expect(node.data.navigationOptions).not.toBe(theStyle);
+    expect(node.data.options).not.toBe(theStyle);
   });
 
   it('Containers: must contain data name', () => {
@@ -117,94 +117,94 @@ describe('LayoutTreeCrawler', () => {
     expect(() => uut.crawl(node)).toThrow(new Error('Missing container data.name'));
   });
 
-  it('Containers: navigationOptions default obj', () => {
+  it('Containers: options default obj', () => {
     const MyContainer = class { };
 
     const node = { type: LayoutTypes.Component, data: { name: 'theContainerName' } };
     store.setOriginalContainerClassForName('theContainerName', MyContainer);
     uut.crawl(node);
-    expect(node.data.navigationOptions).toEqual({});
+    expect(node.data.options).toEqual({});
   });
 
   describe('navigation options', () => {
-    let navigationOptions;
+    let options;
     let node;
 
     beforeEach(() => {
-      navigationOptions = {};
-      node = { type: LayoutTypes.Component, data: { name: 'theContainerName', navigationOptions } };
+      options = {};
+      node = { type: LayoutTypes.Component, data: { name: 'theContainerName', options } };
     });
 
     it('processes colors into numeric AARRGGBB', () => {
-      navigationOptions.someKeyColor = 'red';
+      options.someKeyColor = 'red';
       uut.crawl(node);
-      expect(node.data.navigationOptions.someKeyColor).toEqual(0xffff0000);
+      expect(node.data.options.someKeyColor).toEqual(0xffff0000);
     });
 
     it('processes colors into numeric AARRGGBB', () => {
-      navigationOptions.someKeyColor = 'yellow';
+      options.someKeyColor = 'yellow';
       uut.crawl(node);
-      expect(node.data.navigationOptions.someKeyColor).toEqual(0xffffff00);
+      expect(node.data.options.someKeyColor).toEqual(0xffffff00);
     });
 
     it('processes numeric colors', () => {
-      navigationOptions.someKeyColor = '#123456';
+      options.someKeyColor = '#123456';
       uut.crawl(node);
-      expect(node.data.navigationOptions.someKeyColor).toEqual(0xff123456);
+      expect(node.data.options.someKeyColor).toEqual(0xff123456);
     });
 
     it('processes numeric colors with rrggbbAA', () => {
-      navigationOptions.someKeyColor = 0x123456ff; // wut
+      options.someKeyColor = 0x123456ff; // wut
       uut.crawl(node);
-      expect(node.data.navigationOptions.someKeyColor).toEqual(0xff123456);
+      expect(node.data.options.someKeyColor).toEqual(0xff123456);
     });
 
     it('process colors with rgb functions', () => {
-      navigationOptions.someKeyColor = 'rgb(255, 0, 255)';
+      options.someKeyColor = 'rgb(255, 0, 255)';
       uut.crawl(node);
-      expect(node.data.navigationOptions.someKeyColor).toEqual(0xffff00ff);
+      expect(node.data.options.someKeyColor).toEqual(0xffff00ff);
     });
 
     it('process colors with special words', () => {
-      navigationOptions.someKeyColor = 'fuchsia';
+      options.someKeyColor = 'fuchsia';
       uut.crawl(node);
-      expect(node.data.navigationOptions.someKeyColor).toEqual(0xffff00ff);
+      expect(node.data.options.someKeyColor).toEqual(0xffff00ff);
     });
 
     it('process colors with hsla functions', () => {
-      navigationOptions.someKeyColor = 'hsla(360, 100%, 100%, 1.0)';
+      options.someKeyColor = 'hsla(360, 100%, 100%, 1.0)';
       uut.crawl(node);
-      expect(node.data.navigationOptions.someKeyColor).toEqual(0xffffffff);
+      expect(node.data.options.someKeyColor).toEqual(0xffffffff);
     });
 
     it('unknown colors return undefined', () => {
-      navigationOptions.someKeyColor = 'wut';
+      options.someKeyColor = 'wut';
       uut.crawl(node);
-      expect(node.data.navigationOptions.someKeyColor).toEqual(undefined);
+      expect(node.data.options.someKeyColor).toEqual(undefined);
     });
 
     it('any keys ending with Color', () => {
-      navigationOptions.otherKeyColor = 'red';
-      navigationOptions.yetAnotherColor = 'blue';
-      navigationOptions.andAnotherColor = 'rgb(0, 255, 0)';
+      options.otherKeyColor = 'red';
+      options.yetAnotherColor = 'blue';
+      options.andAnotherColor = 'rgb(0, 255, 0)';
       uut.crawl(node);
-      expect(node.data.navigationOptions.otherKeyColor).toEqual(0xffff0000);
-      expect(node.data.navigationOptions.yetAnotherColor).toEqual(0xff0000ff);
-      expect(node.data.navigationOptions.andAnotherColor).toEqual(0xff00ff00);
+      expect(node.data.options.otherKeyColor).toEqual(0xffff0000);
+      expect(node.data.options.yetAnotherColor).toEqual(0xff0000ff);
+      expect(node.data.options.andAnotherColor).toEqual(0xff00ff00);
     });
 
     it('keys ending with Color case sensitive', () => {
-      navigationOptions.otherKey_color = 'red'; // eslint-disable-line camelcase
+      options.otherKey_color = 'red'; // eslint-disable-line camelcase
       uut.crawl(node);
-      expect(node.data.navigationOptions.otherKey_color).toEqual('red');
+      expect(node.data.options.otherKey_color).toEqual('red');
     });
 
     it('any nested recursive keys ending with Color', () => {
-      navigationOptions.innerObj = { theKeyColor: 'red' };
-      navigationOptions.innerObj.innerMostObj = { anotherColor: 'yellow' };
+      options.innerObj = { theKeyColor: 'red' };
+      options.innerObj.innerMostObj = { anotherColor: 'yellow' };
       uut.crawl(node);
-      expect(node.data.navigationOptions.innerObj.theKeyColor).toEqual(0xffff0000);
-      expect(node.data.navigationOptions.innerObj.innerMostObj.anotherColor).toEqual(0xffffff00);
+      expect(node.data.options.innerObj.theKeyColor).toEqual(0xffff0000);
+      expect(node.data.options.innerObj.innerMostObj.anotherColor).toEqual(0xffffff00);
     });
   });
 });

lib/src/commands/OptionsProcessor.js

@@ -3,14 +3,14 @@ const { processColor } = require('react-native');
 const resolveAssetSource = require('react-native/Libraries/Image/resolveAssetSource');
 
 class OptionsProcessor {
-  static processOptions(navigationOptions) {
-    _.forEach(navigationOptions, (value, key) => {
+  static processOptions(options) {
+    _.forEach(options, (value, key) => {
       if (value) {
         if (_.endsWith(key, 'Color')) {
-          navigationOptions[key] = processColor(value);
+          options[key] = processColor(value);
         }
         if (_.isEqual(key, 'icon') || _.endsWith(key, 'Icon') || _.endsWith(key, 'Image')) {
-          navigationOptions[key] = resolveAssetSource(navigationOptions[key]);
+          options[key] = resolveAssetSource(options[key]);
         }
         if (_.isObject(value) || _.isArray(value)) {
           OptionsProcessor.processOptions(value);

lib/src/commands/OptionsProcessor.test.js

@@ -1,103 +1,103 @@
 const OptionsProcessor = require('./OptionsProcessor');
-const NavigationOptions = require('./../params/options/NavigationOptions');
+const Options = require('./../params/options/Options');
 
 describe('navigation options', () => {
-  let navigationOptions;
+  let options;
 
   beforeEach(() => {
-    navigationOptions = {};
+    options = {};
   });
 
   it('processes colors into numeric AARRGGBB', () => {
-    navigationOptions.someKeyColor = 'red';
-    OptionsProcessor.processOptions(navigationOptions);
-    expect(navigationOptions.someKeyColor).toEqual(0xffff0000);
+    options.someKeyColor = 'red';
+    OptionsProcessor.processOptions(options);
+    expect(options.someKeyColor).toEqual(0xffff0000);
 
-    navigationOptions.someKeyColor = 'yellow';
-    OptionsProcessor.processOptions(navigationOptions);
-    expect(navigationOptions.someKeyColor).toEqual(0xffffff00);
+    options.someKeyColor = 'yellow';
+    OptionsProcessor.processOptions(options);
+    expect(options.someKeyColor).toEqual(0xffffff00);
   });
 
   it('processes numeric colors', () => {
-    navigationOptions.someKeyColor = '#123456';
-    OptionsProcessor.processOptions(navigationOptions);
-    expect(navigationOptions.someKeyColor).toEqual(0xff123456);
+    options.someKeyColor = '#123456';
+    OptionsProcessor.processOptions(options);
+    expect(options.someKeyColor).toEqual(0xff123456);
 
-    navigationOptions.someKeyColor = 0x123456ff; // wut
-    OptionsProcessor.processOptions(navigationOptions);
-    expect(navigationOptions.someKeyColor).toEqual(0xff123456);
+    options.someKeyColor = 0x123456ff; // wut
+    OptionsProcessor.processOptions(options);
+    expect(options.someKeyColor).toEqual(0xff123456);
   });
 
   it('process colors with rgb functions', () => {
-    navigationOptions.someKeyColor = 'rgb(255, 0, 255)';
-    OptionsProcessor.processOptions(navigationOptions);
-    expect(navigationOptions.someKeyColor).toEqual(0xffff00ff);
+    options.someKeyColor = 'rgb(255, 0, 255)';
+    OptionsProcessor.processOptions(options);
+    expect(options.someKeyColor).toEqual(0xffff00ff);
   });
 
   it('process colors with special words', () => {
-    navigationOptions.someKeyColor = 'fuchsia';
-    OptionsProcessor.processOptions(navigationOptions);
-    expect(navigationOptions.someKeyColor).toEqual(0xffff00ff);
+    options.someKeyColor = 'fuchsia';
+    OptionsProcessor.processOptions(options);
+    expect(options.someKeyColor).toEqual(0xffff00ff);
   });
 
   it('process colors with hsla functions', () => {
-    navigationOptions.someKeyColor = 'hsla(360, 100%, 100%, 1.0)';
-    OptionsProcessor.processOptions(navigationOptions);
+    options.someKeyColor = 'hsla(360, 100%, 100%, 1.0)';
+    OptionsProcessor.processOptions(options);
 
-    expect(navigationOptions.someKeyColor).toEqual(0xffffffff);
+    expect(options.someKeyColor).toEqual(0xffffffff);
   });
 
   it('unknown colors return undefined', () => {
-    navigationOptions.someKeyColor = 'wut';
-    OptionsProcessor.processOptions(navigationOptions);
-    expect(navigationOptions.someKeyColor).toEqual(undefined);
+    options.someKeyColor = 'wut';
+    OptionsProcessor.processOptions(options);
+    expect(options.someKeyColor).toEqual(undefined);
   });
 
   it('any keys ending with Color', () => {
-    navigationOptions.otherKeyColor = 'red';
-    navigationOptions.yetAnotherColor = 'blue';
-    navigationOptions.andAnotherColor = 'rgb(0, 255, 0)';
-    OptionsProcessor.processOptions(navigationOptions);
-    expect(navigationOptions.otherKeyColor).toEqual(0xffff0000);
-    expect(navigationOptions.yetAnotherColor).toEqual(0xff0000ff);
-    expect(navigationOptions.andAnotherColor).toEqual(0xff00ff00);
+    options.otherKeyColor = 'red';
+    options.yetAnotherColor = 'blue';
+    options.andAnotherColor = 'rgb(0, 255, 0)';
+    OptionsProcessor.processOptions(options);
+    expect(options.otherKeyColor).toEqual(0xffff0000);
+    expect(options.yetAnotherColor).toEqual(0xff0000ff);
+    expect(options.andAnotherColor).toEqual(0xff00ff00);
   });
 
   it('keys ending with Color case sensitive', () => {
-    navigationOptions.otherKey_color = 'red'; // eslint-disable-line camelcase
-    OptionsProcessor.processOptions(navigationOptions);
-    expect(navigationOptions.otherKey_color).toEqual('red');
+    options.otherKey_color = 'red'; // eslint-disable-line camelcase
+    OptionsProcessor.processOptions(options);
+    expect(options.otherKey_color).toEqual('red');
   });
 
   it('any nested recursive keys ending with Color', () => {
-    navigationOptions.topBar = { textColor: 'red' };
-    navigationOptions.topBar.innerMostObj = { anotherColor: 'yellow' };
-    OptionsProcessor.processOptions(navigationOptions);
-    expect(navigationOptions.topBar.textColor).toEqual(0xffff0000);
-    expect(navigationOptions.topBar.innerMostObj.anotherColor).toEqual(0xffffff00);
+    options.topBar = { textColor: 'red' };
+    options.topBar.innerMostObj = { anotherColor: 'yellow' };
+    OptionsProcessor.processOptions(options);
+    expect(options.topBar.textColor).toEqual(0xffff0000);
+    expect(options.topBar.innerMostObj.anotherColor).toEqual(0xffffff00);
   });
 
   it('resolve image sources with name/ending with icon', () => {
-    navigationOptions.icon = 'require("https://wix.github.io/react-native-navigation/_images/logo.png");';
-    navigationOptions.topBar = {
+    options.icon = 'require("https://wix.github.io/react-native-navigation/_images/logo.png");';
+    options.topBar = {
       myIcon: 'require("https://wix.github.io/react-native-navigation/_images/logo.png");',
       myOtherValue: 'value'
     };
-    OptionsProcessor.processOptions(navigationOptions);
+    OptionsProcessor.processOptions(options);
 
     // As we can't import external images and we don't want to add an image here
     // I assign the icons to strings (what the require would generally look like)
     // and expect the value to be resovled, in this case it doesn't find anything and returns null
-    expect(navigationOptions.icon).toEqual(null);
-    expect(navigationOptions.topBar.myIcon).toEqual(null);
-    expect(navigationOptions.topBar.myOtherValue).toEqual('value');
+    expect(options.icon).toEqual(null);
+    expect(options.topBar.myIcon).toEqual(null);
+    expect(options.topBar.myOtherValue).toEqual('value');
   });
 
   it('processes NavigationOptions jsDoc object', () => {
-    navigationOptions.someKeyColor = 'rgb(255, 0, 255)';
-    navigationOptions.topBar = { textColor: 'red' };
-    navigationOptions.topBar.innerMostObj = { anotherColor: 'yellow' };
-    const navigationOptionsObj = new NavigationOptions(navigationOptions);
+    options.someKeyColor = 'rgb(255, 0, 255)';
+    options.topBar = { textColor: 'red' };
+    options.topBar.innerMostObj = { anotherColor: 'yellow' };
+    const navigationOptionsObj = new Options(options);
 
     OptionsProcessor.processOptions(navigationOptionsObj);
 
@@ -105,9 +105,9 @@ describe('navigation options', () => {
   });
 
   it('undefined value return undefined ', () => {
-    navigationOptions.someImage = undefined;
-    OptionsProcessor.processOptions(navigationOptions);
+    options.someImage = undefined;
+    OptionsProcessor.processOptions(options);
 
-    expect(navigationOptions.someImage).toEqual(undefined);
+    expect(options.someImage).toEqual(undefined);
   });
 });

lib/src/params/containers/Container.js

@@ -1,11 +1,11 @@
-const NavigationOptions = require('./../options/NavigationOptions');
+const Options = require('./../options/Options');
 
 class Container {
   /**
    * @property {string} name The container's registered name
    * @property {Container[]} [topTabs]
    * @property {object} [passProps] props
-   * @property {NavigationOptions} navigationOptions
+   * @property {Options} options
    */
   constructor(params) {
     this.name = params.name;
@@ -14,7 +14,7 @@ class Container {
       this.topTabs = params.topTabs;
     }
     this.passProps = params.passProps;
-    this.navigationOptions = params.navigationOptions && new NavigationOptions(params.navigationOptions);
+    this.options = params.options && new Options(params.options);
   }
 }
 

lib/src/params/containers/Container.test.js

@@ -6,7 +6,7 @@ const PASS_PROPS = {
 const CONTAINER = {
   name: 'myScreen',
   passProps: PASS_PROPS,
-  navigationOptions: {}
+  options: {}
 };
 const TOP_TABS_CONTAINER = {
   topTabs: [
@@ -20,7 +20,7 @@ describe('ContainerRegistry', () => {
     const uut = new Container(CONTAINER);
     expect(uut.name).toBe('myScreen');
     expect(uut.passProps).toEqual(PASS_PROPS);
-    expect(uut.navigationOptions).toEqual({});
+    expect(uut.options).toEqual({});
   });
 
   it('parses TopTabs container', () => {

lib/src/params/options/NavigationOptions.test.js → lib/src/params/options/Options.test.js

@@ -1,4 +1,4 @@
-const NavigationOptions = require('./NavigationOptions');
+const NavigationOptions = require('./Options');
 const BottomTabs = require('./BottomTabs');
 const TopBar = require('./TopBar');
 const BottomTab = require('./BottomTab');
@@ -38,7 +38,7 @@ const NAVIGATION_OPTIONS = {
 };
 
 describe('NavigationOptions', () => {
-  it('parses navigationOptions correctly', () => {
+  it('parses options correctly', () => {
     const uut = new NavigationOptions(NAVIGATION_OPTIONS);
     expect(uut.bottomTabs).toBeInstanceOf(BottomTabs);
     expect(uut.topBar).toBeInstanceOf(TopBar);