Layout changes

Author: guyca

playground/src/app.js

@@ -158,17 +158,53 @@ function start() {
 
     Navigation.setRoot({
       root: {
-        stack: {
-          id: 'TEST',
+        bottomTabs: {
+          options: {
+            animations: {
+              setRoot: {
+                waitForRender: true
+              }
+            }
+          },
           children: [
             {
-              component: {
-                name: 'navigation.playground.WelcomeScreen'
-                // name: 'navigation.playground.CustomTransitionOrigin'
+              stack: {
+                children: [
+                  {
+                    component: {
+                      name: `navigation.playground.OptionsScreen`,
+                      options: {
+                        bottomTab: {
+                          icon: require('../img/one.png'),
+                          text: 'options'
+                        }
+                      }
+                    }
+                  }
+                ]
+              }
+            },
+            {
+              stack: {
+                id: 'TEST',
+                children: [
+                  {
+                    component: {
+                      name: 'navigation.playground.WelcomeScreen',
+                      // name: 'navigation.playground.CustomTransitionOrigin'
+                      options: {
+                        bottomTab: {
+                          icon: require('../img/two.png'),
+                          text: 'Welcome'
+                        }
+                      }
+                    }
+                  }
+                ]
               }
             }
           ]
-        }
+        },
       }
     });
   });

playground/src/screens/CustomRoundedButton.js

@@ -14,10 +14,17 @@ class CustomRoundedButton extends Component {
 
   constructor(props) {
     super(props);
-    this.subscription = Navigation.events().bindComponent(this);
+    this.simulateLongRunningTask();
+    console.log('guyca', `CRB`);
+    Navigation.events().bindComponent(this);
     this.state = {};
   }
 
+  simulateLongRunningTask = () => {
+    // tslint:disable-next-line
+    for (let i = 0; i < Math.pow(2, 24); i++);
+  }
+
   componentDidAppear() {
     console.log('RNN', 'CRB.componentDidAppear');
   }
@@ -31,7 +38,6 @@ class CustomRoundedButton extends Component {
   }
 
   componentWillUnmount() {
-    this.subscription.remove();
     console.log('RNN', `CRB.componentWillUnmount`);
   }
 

playground/src/screens/CustomTopBar.js

@@ -14,8 +14,10 @@ class CustomTopBar extends Component {
 
   constructor(props) {
     super(props);
+    console.log('guyca', `T.ctor ${this.props.color}`);
+    this.simulateLongRunningTask();
     this.state = {};
-    this.subscription = Navigation.events().bindComponent(this);
+    Navigation.events().bindComponent(this);
   }
 
   componentDidAppear() {
@@ -32,7 +34,11 @@ class CustomTopBar extends Component {
 
   componentWillUnmount() {
     console.log('RNN', `CTB.componentWillUnmount`);
-    this.subscription.remove();
+  }
+
+  simulateLongRunningTask = () => {
+    // tslint:disable-next-line
+    for (let i = 0; i < Math.pow(2, 24); i++);
   }
 
   render() {

playground/src/screens/OptionsScreen.js

@@ -17,6 +17,7 @@ const TOPBAR_HEIGHT = 67;
 class OptionsScreen extends Component {
   constructor(props) {
     super(props);
+    console.log('guyca', `OS.ctor`);
     Navigation.events().bindComponent(this);
   }
 
@@ -28,8 +29,16 @@ class OptionsScreen extends Component {
       },
       topBar: {
         title: {
-          text: 'Static Title',
+          _text: 'Static Title',
           _height: TOPBAR_HEIGHT,
+          component: {
+            name: 'navigation.playground.CustomTopBar',
+            alignment: 'center',
+            waitForRender: true,
+            passProps: {
+              title: 'hola'
+            }
+          },
           color: 'black',
           fontSize: 16,
           alignment: 'center',
@@ -38,7 +47,7 @@ class OptionsScreen extends Component {
         largeTitle: {
           visible: false
         },
-        subtitle: {
+        _subtitle: {
           text: 'Static Subtitle',
           color: 'red',
           fontFamily: 'HelveticaNeue-Italic',
@@ -50,7 +59,8 @@ class OptionsScreen extends Component {
             passProps: {
               color: '#bbdefb'
             }
-          }
+          },
+          waitForRender: true
         },
         ...Platform.select({
           android: { drawBehind: true },
@@ -72,6 +82,7 @@ class OptionsScreen extends Component {
             testID: CUSTOM_BUTTON2,
             component: {
               name: 'CustomRoundedButton',
+              waitForRender: true,
               passProps: {
                 title: 'Two'
               }

playground/src/screens/TopBarBackground.js

@@ -10,11 +10,18 @@ class TopBarBackground extends Component {
 
   constructor(props) {
     super(props);
-    this.subscription = Navigation.events().bindComponent(this);
+    this.simulateLongRunningTask();
+    console.log('guyca', `TBB.ctor ${this.props.color}`);
+    Navigation.events().bindComponent(this);
     this.state = {};
     this.dots = new Array(55).fill('').map((ignored, i) => <View key={'dot' + i} style={[styles.dot, {backgroundColor: this.props.color}]}/>);
   }
 
+  simulateLongRunningTask = () => {
+    // tslint:disable-next-line
+    for (let i = 0; i < Math.pow(2, 24); i++);
+  }
+
   componentDidAppear() {
     console.log('RNN', 'TBB.componentDidAppear');
   }
@@ -29,7 +36,6 @@ class TopBarBackground extends Component {
 
   componentWillUnmount() {
     console.log('RNN', `TBB.componentWillUnmount`);
-    this.subscription.remove();
   }
 
   render() {