api migration

lib/ios/RNNLayoutNode.m

@@ -15,11 +15,11 @@
 
 -(BOOL)isContainer
 {
-	return [self.type isEqualToString:@"Container"];
+	return [self.type isEqualToString:@"Component"];
 }
 -(BOOL)isContainerStack
 {
-	return [self.type isEqualToString:@"ContainerStack"];
+	return [self.type isEqualToString:@"Stack"];
 }
 -(BOOL)isTabs
 {

lib/ios/RNNRootViewController.m

@@ -45,7 +45,7 @@
 }
 
 -(BOOL)isCustomTransitioned {
-	return self.animator;
+	return self.animator != nil;
 }
 
 - (BOOL)prefersStatusBarHidden {

lib/src/Navigation.js

@@ -9,9 +9,9 @@ const LayoutTreeCrawler = require('./commands/LayoutTreeCrawler');
 const PrivateEventsListener = require('./events/PrivateEventsListener');
 const PublicEventsRegistry = require('./events/PublicEventsRegistry');
 const Element = require('./adapters/Element');
-const Root = require('./params/containers/Root');
-const Container = require('./params/containers/Container');
-const NavigationOptions = require('./params/options/NavigationOptions');
+// const Root = require('./params/containers/Root');
+// const Container = require('./params/containers/Container');
+// const Options = require('./params/options/Options');
 
 /** @constructor */
 class Navigation {
@@ -44,12 +44,12 @@ class Navigation {
    * @param {Root} root
    */
   setRoot(params) {
-    return this.commands.setRoot(new Root(params));
+    return this.commands.setRoot(params);
   }
 
   /**
    * Set default options to all screens. Useful for declaring a consistent style across the app.
-   * @param {options:NavigationOptions} options
+   * @param {options:Options} options
    */
   setDefaultOptions(options) {
     this.commands.setDefaultOptions(options);
@@ -58,10 +58,10 @@ class Navigation {
   /**
    * Change a containers navigation options
    * @param {string} containerId The container's id.
-   * @param {options:NavigationOptions} options
+   * @param {options:Options} options
    */
   setOptions(containerId, options) {
-    this.commands.setOptions(containerId, new NavigationOptions(options));
+    this.commands.setOptions(containerId, options);
   }
 
   /**
@@ -93,7 +93,7 @@ class Navigation {
    * @param {Container} container
    */
   push(containerId, container) {
-    return this.commands.push(containerId, new Container(container));
+    return this.commands.push(containerId, container);
   }
 
   /**

lib/src/commands/OptionsProcessor.test.js

@@ -1,5 +1,4 @@
 const OptionsProcessor = require('./OptionsProcessor');
-const Options = require('./../params/options/Options');
 
 describe('navigation options', () => {
   let options;
@@ -93,15 +92,14 @@ describe('navigation options', () => {
     expect(options.topBar.myOtherValue).toEqual('value');
   });
 
-  it('processes NavigationOptions jsDoc object', () => {
+  it('processes Options object', () => {
     options.someKeyColor = 'rgb(255, 0, 255)';
     options.topBar = { textColor: 'red' };
     options.topBar.innerMostObj = { anotherColor: 'yellow' };
-    const optionsObj = new Options(options);
 
-    OptionsProcessor.processOptions(optionsObj);
+    OptionsProcessor.processOptions({ o: options });
 
-    expect(optionsObj.topBar.textColor).toEqual(0xffff0000);
+    expect(options.topBar.textColor).toEqual(0xffff0000);
   });
 
   it('undefined value return undefined ', () => {

lib/src/params/options/Options.js → lib/src/xparams/options/Options.js

@@ -3,7 +3,7 @@ const BottomTabs = require('./BottomTabs');
 const BottomTab = require('./BottomTab');
 const TopTabs = require('./TopTabs');
 
-class NavigationOptions {
+class Options {
   /**
    * @property {options:TopBar} [topBar]
    * @property {options:BottomTabs} [bottomTabs]
@@ -24,4 +24,4 @@ class NavigationOptions {
   }
 }
 
-module.exports = NavigationOptions;
+module.exports = Options;

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

@@ -1,4 +1,4 @@
-const NavigationOptions = require('./Options');
+const Options = require('./Options');
 const BottomTabs = require('./BottomTabs');
 const TopBar = require('./TopBar');
 const BottomTab = require('./BottomTab');
@@ -19,9 +19,9 @@ const NAVIGATION_OPTIONS = {
   topTabs: TOP_TABS
 };
 
-describe('NavigationOptions', () => {
+describe('Options', () => {
   it('parses options correctly', () => {
-    const uut = new NavigationOptions(NAVIGATION_OPTIONS);
+    const uut = new Options(NAVIGATION_OPTIONS);
     expect(uut.bottomTabs).toBeInstanceOf(BottomTabs);
     expect(uut.topBar).toBeInstanceOf(TopBar);
     expect(uut.bottomTab).toBeInstanceOf(BottomTab);

playground/src/app.js

@@ -5,8 +5,14 @@ function start() {
   registerContainers();
   Navigation.events().onAppLaunched(() => {
     Navigation.setRoot({
-      container: {
-        name: 'navigation.playground.WelcomeScreen'
+      stack: {
+        children: [
+          {
+            component: {
+              name: 'navigation.playground.WelcomeScreen'
+            }
+          }
+        ]
       }
     });
   });

playground/src/containers/CustomTransitionDestination.js

@@ -22,19 +22,23 @@ class CustomTransitionDestination extends Component {
   }
   push() {
     Navigation.push(this.props.containerId, {
-      name: 'navigation.playground.OptionsScreen'
+      component: {
+        name: 'navigation.playground.OptionsScreen'
+      }
     });
   }
   pop() {
-    Navigation.pop(this.props.containerId, { customTransition: {
-      animations: [{ type: 'sharedElement', fromId: 'title2', toId: 'title1', startDelay: 0, springVelocity: 0.2, duration: 0.5 },
-            { type: 'sharedElement', toId: 'image1', fromId: 'customDestinationImage', startDelay: 0, springVelocity: 0.2, duration: 0.5 },
-            { type: 'sharedElement', toId: 'image2', fromId: 'customDestinationImage2', startDelay: 0, duration: 0.8 },
-            { fromId: 'image4', startY: 50, startX: 50, startAlpha: 0, startDelay: 0, duration: 0.8, springVelocity: 0.5 },
-            { fromId: 'customDestinationParagraph', endY: 50, endX: 50, endAlpha: 0, startAlpha: 1, startDelay: 0, duration: 0.8 }
-      ],
-      duration: 0.8
-    } });
+    Navigation.pop(this.props.containerId, {
+      customTransition: {
+        animations: [{ type: 'sharedElement', fromId: 'title2', toId: 'title1', startDelay: 0, springVelocity: 0.2, duration: 0.5 },
+        { type: 'sharedElement', toId: 'image1', fromId: 'customDestinationImage', startDelay: 0, springVelocity: 0.2, duration: 0.5 },
+        { type: 'sharedElement', toId: 'image2', fromId: 'customDestinationImage2', startDelay: 0, duration: 0.8 },
+        { fromId: 'image4', startY: 50, startX: 50, startAlpha: 0, startDelay: 0, duration: 0.8, springVelocity: 0.5 },
+        { fromId: 'customDestinationParagraph', endY: 50, endX: 50, endAlpha: 0, startAlpha: 1, startDelay: 0, duration: 0.8 }
+        ],
+        duration: 0.8
+      }
+    });
   }
   render() {
     return (

playground/src/containers/CustomTransitionOrigin.js

@@ -52,17 +52,19 @@ class CustomTransitionOrigin extends Component {
   }
   onClickNavigationIcon() {
     Navigation.push(this.props.containerId, {
-      name: 'navigation.playground.CustomTransitionDestination',
-      customTransition: {
-        animations: [
-              { type: 'sharedElement', fromId: 'title1', toId: 'title2', startDelay: 0, springVelocity: 0.2, duration: 0.5 },
-              { type: 'sharedElement', fromId: 'image1', toId: 'customDestinationImage', startDelay: 0, springVelocity: 0.9, springDamping: 0.9, duration: 0.8, interactivePop: true },
-              { type: 'sharedElement', fromId: 'image2', toId: 'customDestinationImage2', startDelay: 0, duration: 0.8 },
-              { fromId: 'image4', endY: 50, endX: 50, endAlpha: 0, startDelay: 0, duration: 0.8, springVelocity: 0.5 },
-              { fromId: 'customDestinationParagraph', startY: 50, startAlpha: 0, endAlpha: 1, startDelay: 0, duration: 0.8 }
+      component: {
+        name: 'navigation.playground.CustomTransitionDestination',
+        customTransition: {
+          animations: [
+            { type: 'sharedElement', fromId: 'title1', toId: 'title2', startDelay: 0, springVelocity: 0.2, duration: 0.5 },
+            { type: 'sharedElement', fromId: 'image1', toId: 'customDestinationImage', startDelay: 0, springVelocity: 0.9, springDamping: 0.9, duration: 0.8, interactivePop: true },
+            { type: 'sharedElement', fromId: 'image2', toId: 'customDestinationImage2', startDelay: 0, duration: 0.8 },
+            { fromId: 'image4', endY: 50, endX: 50, endAlpha: 0, startDelay: 0, duration: 0.8, springVelocity: 0.5 },
+            { fromId: 'customDestinationParagraph', startY: 50, startAlpha: 0, endAlpha: 1, startDelay: 0, duration: 0.8 }
 
-        ],
-        duration: 0.8
+          ],
+          duration: 0.8
+        }
       }
     });
   }

playground/src/containers/LifecycleScreen.js

@@ -61,7 +61,7 @@ class LifecycleScreen extends Component {
   }
 
   onClickPush() {
-    Navigation.push(this.props.containerId, { name: 'navigation.playground.TextScreen' });
+    Navigation.push(this.props.containerId, { component: { name: 'navigation.playground.TextScreen' } });
   }
 }
 module.exports = LifecycleScreen;

playground/src/containers/OptionsScreen.js

@@ -125,13 +125,17 @@ class OptionsScreen extends Component {
 
   onClickScrollViewScreen() {
     Navigation.push(this.props.containerId, {
-      name: 'navigation.playground.ScrollViewScreen'
+      component: {
+        name: 'navigation.playground.ScrollViewScreen'
+      }
     });
   }
 
   onClickCustomTranstition() {
     Navigation.push(this.props.containerId, {
-      name: 'navigation.playground.CustomTransitionOrigin'
+      component: {
+        name: 'navigation.playground.CustomTransitionOrigin'
+      }
     });
   }
 

playground/src/containers/WelcomeScreen.js

@@ -46,79 +46,113 @@ class WelcomeScreen extends Component {
 
   onClickSwitchToTabs() {
     Navigation.setRoot({
-      bottomTabs: [
-        {
-          container: {
-            name: 'navigation.playground.TextScreen',
-            passProps: {
-              text: 'This is tab 1',
-              myFunction: () => 'Hello from a function!'
-            },
-            options: {
-              bottomTab: {
-                title: 'Tab 1',
-                testID: testIDs.FIRST_TAB_BAR_BUTTON
-              }
+      bottomTabs: {
+        children: [
+          {
+            stack: {
+              children: [
+                {
+                  component: {
+                    name: 'navigation.playground.TextScreen',
+                    passProps: {
+                      text: 'This is tab 1',
+                      myFunction: () => 'Hello from a function!'
+                    },
+                    options: {
+                      bottomTab: {
+                        title: 'Tab 1',
+                        testID: testIDs.FIRST_TAB_BAR_BUTTON
+                      }
+                    }
+                  }
+                }
+              ]
             }
-          }
-        },
-        {
-          container: {
-            name: 'navigation.playground.TextScreen',
-            passProps: {
-              text: 'This is tab 2'
-            },
-            options: {
-              bottomTab: {
-                title: 'Tab 2',
-                testID: testIDs.SECOND_TAB_BAR_BUTTON
-              }
+          },
+          {
+            stack: {
+              children: [
+                {
+                  component: {
+                    name: 'navigation.playground.TextScreen',
+                    passProps: {
+                      text: 'This is tab 2'
+                    },
+                    options: {
+                      bottomTab: {
+                        title: 'Tab 2',
+                        testID: testIDs.SECOND_TAB_BAR_BUTTON
+                      }
+                    }
+                  }
+                }
+              ]
             }
           }
-        }
-      ]
+        ]
+      }
     });
   }
 
   onClickSwitchToSideMenus() {
     Navigation.setRoot({
-      bottomTabs: [
-        {
-          container: {
-            name: 'navigation.playground.TextScreen',
-            passProps: {
-              text: 'This is a side menu center screen tab 1'
-            }
-          }
-        },
-        {
-          container: {
-            name: 'navigation.playground.TextScreen',
-            passProps: {
-              text: 'This is a side menu center screen tab 2'
-            }
-          }
-        },
-        {
-          container: {
-            name: 'navigation.playground.TextScreen',
-            passProps: {
-              text: 'This is a side menu center screen tab 3'
-            }
-          }
-        }
-      ],
       sideMenu: {
         left: {
-          container: {
+          component: {
             name: 'navigation.playground.SideMenuScreen',
             passProps: {
               side: 'left'
             }
           }
         },
+        center: {
+          bottomTabs: [
+            {
+              stack: {
+                children: [
+                  {
+                    component: {
+                      name: 'navigation.playground.TextScreen',
+                      passProps: {
+                        text: 'This is a side menu center screen tab 1'
+                      }
+                    }
+                  }
+                ]
+              }
+            },
+            {
+              stack: {
+                children: [
+                  {
+                    component: {
+                      name: 'navigation.playground.TextScreen',
+                      passProps: {
+                        text: 'This is a side menu center screen tab 2'
+                      }
+                    }
+                  }
+                ]
+              }
+            },
+            {
+              stack: {
+                children: [
+                  {
+                    component: {
+                      name: 'navigation.playground.TextScreen',
+                      passProps: {
+                        text: 'This is a side menu center screen tab 3'
+                      }
+                    }
+                  }
+                ]
+              }
+            }
+          ]
+        },
         right: {
-          container: {
+          component: {
             name: 'navigation.playground.SideMenuScreen',
             passProps: {
               side: 'right'
@@ -131,19 +165,23 @@ class WelcomeScreen extends Component {
 
   async onClickPush() {
     await Navigation.push(this.props.containerId, {
-      name: 'navigation.playground.PushedScreen'
+      component: {
+        name: 'navigation.playground.PushedScreen'
+      }
     });
   }
 
   onClickLifecycleScreen() {
     Navigation.push(this.props.containerId, {
-      name: 'navigation.playground.LifecycleScreen'
+      component: {
+        name: 'navigation.playground.LifecycleScreen'
+      }
     });
   }
 
   async onClickShowModal() {
     await Navigation.showModal({
-      container: {
+      component: {
         name: 'navigation.playground.ModalScreen'
       }
     });
@@ -155,7 +193,9 @@ class WelcomeScreen extends Component {
 
   onClickPushOptionsScreen() {
     Navigation.push(this.props.containerId, {
-      name: 'navigation.playground.OptionsScreen'
+      component: {
+        name: 'navigation.playground.OptionsScreen'
+      }
     });
   }
 
@@ -212,13 +252,17 @@ class WelcomeScreen extends Component {
 
   onClickBackHandler() {
     Navigation.push(this.props.containerId, {
-      name: 'navigation.playground.BackHandlerScreen'
+      component: {
+        name: 'navigation.playground.BackHandlerScreen'
+      }
     });
   }
 
   onClickPushOrientationMenuScreen() {
     Navigation.push(this.props.containerId, {
-      name: 'navigation.playground.OrientationSelectScreen'
+      component: {
+        name: 'navigation.playground.OrientationSelectScreen'
+      }
     });
   }
 }